Question

我希望 Ajax 仅在div（#usersDiv）中应用

当选择器变为＆＃39; body＆＃39;它反复加载整个页面。（不能在框中输入）

但是当选择器更改为#userDiv时，它会在页面中显示两次搜索框。在第一个框中可以输入，但第二个框一遍又一遍地加载。

PHP 文件如下（test.php）

<?php
    $connection = mysqli_connect('localhost', 'root', '', 'users');

    function users($connection){
        if(!empty($_POST)){
            $country = $_POST['userCountry'];

            $sql = "SELECT * FROM users WHERE country = '$country' ";
            $result = mysqli_query($connection, $sql);

            if (mysqli_num_rows($result) > 0) {
                while ($row = mysqli_fetch_assoc($result)) {
                    $userName = $row['username'];
                    $city = $row['city'];

                    echo '<div><h4>'. $userName. " ". $city. '</h4></div>';
                }
            } else {
                echo "Use search box!";
            }
        } else {
            echo "Use Search Box!";
        }
    }
?>

<html>
<head><script src = "jquery.min.js"></script>
       <script>
           $(document).ready(function(){
           $.getJSON("http://freegeoip.net/json/", function(data) {
               var country = data.country_name;
               $.ajax({
                   method:"POST",
                   url:"test.php",
                   data:{userCountry:country},
                   success:function(result){
                       $('#usersDiv').html(result);
                   }
               });
              });
           });
       </script>
</head>

<body>
    <form name = "searchForm" action = "search.php" method = "POST">
        <input type = "text" name = "searchPlace" required />
        <input type = "submit" value = "Search"/>
    </form>
    <div id = "usersDiv"> <?php users($connection); ?> </div>
</body>
<html/>

Answer 1

我已修改您的代码以将您的PHP函数包装在if($_POST)内，以防止整个页面加载

<?php
$connection = mysqli_connect('localhost', 'root', '', 'users');
if($_POST){ // Check if form has been submitted
    $country = $_POST['userCountry'];

    $sql = "SELECT * FROM users WHERE country = '$country' ";
    $result = mysqli_query($connection, $sql);

    if (mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_assoc($result)) {
            $userName = $row['username'];
            $city = $row['city'];

            echo '<div><h4>'. $userName. " ". $city. '</h4></div>';
        }
    } else {
        echo "Use search box!";
    }
}else{ // If it hasn't then show the search form
?>

<html>
<head><script src = "jquery.min.js"></script>
   <script>
       $(document).ready(function(){
        $("#searchForm").on("submit",function(e){ // Check for form submission
           $.getJSON("http://freegeoip.net/json/", function(data) {
                   var country = data.country_name;
                   $.ajax({
                       method:"POST",
                       url:"test.php",
                       data:{userCountry:country},
                       success:function(result){
                           $('#usersDiv').html(result);
                       }
                   });
              });
           });
       });
   </script>
</head>

<body>
<form name = "searchForm" action = "search.php" method = "POST" id="searchForm">
    <input type = "text" name = "searchPlace" required />
    <input type = "submit" value = "Search"/>
</form>
<div id = "usersDiv"></div>
</body>
<html/>
<?php } ?>

正如亚历山大建议的那样，请阅读SQL注入

How can I prevent SQL injection

如何防止Ajax重复加载不必要的元素？

1 个答案: