无需刷新页面即可更新SQL数据

时间:2016-03-04 11:41:42

标签: javascript php html

我正在尝试使用从数据库中获取的信息更新两个锁定的文本框。我在“Telefon”复选框中输入了一个电话号码,我希望它能获得该电话号码的名字和姓氏。这顺便说一下,但这不是我想要的方式。我希望在不刷新页面的情况下将信息自动放入文本框中。由于一些奇怪的原因,我的代码在这里分成两部分。我试着找几个小时的解决方案。我对编码很新,我很乐意帮忙!

<?php
SESSION_START();


$output = NULL;


if(isset($_POST['btn_checkTelefon'])) {

    require 'connectdb.php';

    $telefon_Search =  $connect_DB->real_escape_string($_POST['telefon_Search']);
    $sql = "SELECT * FROM elever WHERE Telefon = '$telefon_Search'";
    $resultSet = $connect_DB->query($sql); 

    if($resultSet->num_rows > 0) {
        while($rows = $resultSet->fetch_assoc()) {
            $fornavnoutput_Database = $rows['Fornavn'];
            $etternavnoutput_Database = $rows['Etternavn'];

        }   

    echo '<script type = "text/javascript">';

        echo 'function sayHi() {';
        echo 'val1 = document.getElementById("telefon_Input").value;';
        echo 'if(val1 == "") {';
        echo '  alert("Vennligst skriv inn ditt telefon nummer!");';
        echo '}';
        echo 'if(val1 !== "") { ';
        echo '  document.getElementById("check_Fornavn").value = "<?php echo $fornavnoutput_Database?>";';
        echo '  document.getElementById("check_Etternavn").value = "<?php echo $etternavnoutput_Database?>";';
        echo '}';
        echo '}';

    echo '</script>';
    } else {
        $output = "No results";
    }
}

$fornavnoutput_Database2 = "Fornavn";
$etternavnoutput_Database2 = "Etternavn";
?> 



  <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style2.css?<?php echo time(); ?>" />
        </script> 
    <script type = "text/javascript"></script>
    <title></title>

</head>
<body>
    <?php
        include 'connectdb.php';
    ?>
     <form name="form1" action="">


        <table id="valgt_skap_tabell" class="bokssvartabell">
            <tr>
                <td>Valgt skap</td>
            </tr>
            <tr>
                <td>
                    <input class="bokssvarskjema" type="text" name="Valgt skap" disabled value= <?php
                        if(isset($_POST["radios"])){
                            echo $_POST["radios"];
                        } else {
                            //header('location: index.php');
                        }   ?>>
                </td>
            </tr>
        </table>

        <table id="telefon_tabell" class="bokssvar_tabell">
            <tr>
                <td>Telefon:</td>
            </tr>
            <tr>
                <td><input type="text" name="telefon_Search" id="telefon_Input" maxlength=8"><br></td>
            </tr>
            <tr>
                <td><button type="button" name ="btn_checkTelefon" id="sjekkTelefon" onclick = "sayHi()">Sjekk</button></td>
            </tr>
            <div id="d1"></div>
        </table>

        <table id="opplysninger_tabell" class="bokssvartabell">
            <tr>
                <td>Fornavn:</td>
                <td>Etternavn:</td>
            </tr>
            <tr>
                <td><input type="text" name="Fornavn" disabled id="check_Fornavn"></td>
                <td><input type="text" name="Etternavn" disabled id="check_Etternavn"></td>
            </tr>
        </table>
    </form>

    <?php echo $output; ?>


</body>

2 个答案:

答案 0 :(得分:1)

你需要使用AJAX。示例$.ajax() - &gt;快捷方式$.post()$("id").load("url"),...在stackoverflow上详细了解这些内容。

请不要将JavaScript与php混合使用。 在单独的文件中使用它。

编辑:那你修好了吗? 加载分页动态的更简单方法是使用加载方法+操作。如果您需要对来自php的返回数据执行某些操作,则使用$ .post。我将举例说明加载。

我将给出一个如何编码的正确例子。

链接的通用函数,用于查看href值并从PHP动态加载到您的页面的HTML部分(在本例中为表单),如果您只有一个默认操作,则需要实现操作或只调用普通页面。我在这里使用jQuery库。此脚本必须位于单独的文件中,否则它将起作用,但您将在控制台中收到同步警告。

$(function() {

        $('a').on("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            var URL = $(this).attr('href');
            $('body').load(URL, 'form');
        })

})

php示例 在showfunctions.php

这样的单独文件中首选显示功能
function myLinks() {
    echo "<a href='index.php?action=showsomething'>showsomething</a>"
}

index.php +包括showfunctions.php

<?php
    myLinks();
    if(isset($_GET["action"]){
     // do your ordinary thing like open connection with database.
    switch($_GET["action"]))
    {
    case "showsomething":
     //show showsomething() function with html
    break;

//further you can add more action instead of showsomething if you have several links

    }
    //close database.
    }
?>

你需要将你的代码分开,否则如果它变得更复杂就会变得一团糟。 HTML代码必须仅在showfunctions.php中,例如在函数中调用操作。

代码没有经过测试,但我认为它会起作用。这段代码也可以在没有javascript的情况下运行,但它只会重新加载页面。

答案 1 :(得分:0)

你必须使用jQuery $.post()

首先你必须创建将处理你的数据的php文件。

例如,让我们使用以下内容创建文件query.php

<?php
if(isset($_POST['telefon_Search'])) {
    require 'connectdb.php';
    $telefon_Search =  $connect_DB->real_escape_string($_POST['telefon_Search']);
    $sql = "SELECT * FROM elever WHERE Telefon = '$telefon_Search'";
    $resultSet = $connect_DB->query($sql);

    if($resultSet->num_rows > 0) {
        $row = $resultSet->fetch_assoc();
        echo json_encode($row);
    }
}

您页面上的下一步您必须创建一个功能,该功能会将phone number发送到我们的query.php文件,如果存在,则会返回Name and Surname

$('#sjekkTelefon').click(function (){    
        $.post('query.php', { telefon_Search : $('#telefon_Input').val() }, function (data){
            var user = $.parseJSON(data);
            $('#check_Fornavn').val(user.Fornavn);
            $('#check_Etternavn').val(user.Etternavn);
        });
    });

并且完整的html将如下所示:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style2.css?<?php echo time(); ?>" />
    <title></title>
</head>
<body>
    <table id="telefon_tabell" class="bokssvar_tabell">
        <tr>
            <td>Telefon:</td>
        </tr>
        <tr>
            <td><input type="text" name="telefon_Search" id="telefon_Input" maxlength=8"><br></td>
        </tr>
        <tr>
            <td><button name ="btn_checkTelefon" id="sjekkTelefon">Sjekk</button></td>
        </tr>
        <div id="d1"></div>
    </table>
    <table id="opplysninger_tabell" class="bokssvartabell">
        <tr>
            <td>Fornavn:</td>
            <td>Etternavn:</td>
        </tr>
        <tr>
            <td><input type="text" name="Fornavn" disabled id="check_Fornavn"></td>
            <td><input type="text" name="Etternavn" disabled id="check_Etternavn"></td>
        </tr>
    </table>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
    $('#sjekkTelefon').click(function (){    
        $.post('query.php', { telefon_Search : $('#telefon_Input').val() }, function (data){
            $('#check_Fornavn').val(data.Fornavn);
            $('#check_Etternavn').val(data.Etternavn);
        });
    });
</script>
</body>
</html>