如何防止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重複加載不必要的元素？

回答

相關問題