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

我想阿贾克斯只在div（#usersDiv）如何防止Ajax重复加载不必要的元素？

当选择改变为“体”它反复加载整个页面申请。（不能在框中输入）

但是当选择符更改为#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/>

来源

2016-07-28 AnushkaM

必需阅读：[如何防止SQL注入在PHP？]（https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php） –

您需要将你的PHP代码封装在一个'if（$ _ POST）'包装器中，否则它会每载入一个AJAX调用的整个页面。 – MikeF

@MikeF - 你的意思是'POST' ajax请求不会有'$ _POST'变量？ –

我已经改变了你的代码的if($_POST)内包装你的PHP函数，以防止整个页面加载

<?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

来源

2016-07-28 18:42:22 MikeF

谢谢你的回应。但我需要搜索框始终出现在页面中。 – AnushkaM

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

回答

相关问题