在不刷新页面的情况下更新 SQL 数据 - Updating SQL data without refreshing page

我正在尝试使用从数据库中获取的信息更新两个锁定的文本框。我在"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>

为此，您需要使用 AJAX。示例 $.ajax() -> 快捷键 $.post() 、 $("id").load("url") 、...在堆栈溢出上查找有关这些的深入解释。

请不要将 JavaScript 与 PHP 混为一谈。在单独的文件中使用它。

编辑：那么你修好了吗？动态加载分页的更简单方法是使用加载方法 + 操作。如果您需要对从 PHP 返回的数据执行某些操作，则使用 $.post。我会给你一个负载的例子。

我将给出一个如何编码的适当示例。

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

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

PHP 示例首选 showsomething函数在单独的文件中，如 showfunctions.php

function myLinks() {
    echo "<a href='index.php?action=showsomething'>showsomething</a>"
}

索引.php + 包含显示功能.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的情况下工作，但它只会重新加载页面。

为此，您必须使用 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>