How to prevent Ajax from loading the unnecessary elements repeatedly?

Question

I want Ajax to apply only in the div (#usersDiv)

When selector is changed into 'body' it loads the whole page repeatedly. (Cannot type in the box)

but when selector changed as #userDiv, it shows the search box twice in the page. In the first box can be typed, but again second box loads over and over.

PHP file is as follows (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/>

Required reading: [How can I prevent SQL-injection in PHP?](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) — Alexander O'Mara, Jul 28 '16 at 18:34
You need to wrap your PHP code in a `if($_POST)` wrapper, otherwise it'll load the entire page every ajax call — MikeF, Jul 28 '16 at 18:34
@MikeF - do you mean a `POST` ajax request won't have a `$_POST` variable ? — Nikolay Ermakov, Jul 28 '16 at 18:53
@NikolayErmakov - No, I mean if he doesn't separate the PHP code from the rest of the page, his ajax result will return the entire page, including the search form. — MikeF, Jul 28 '16 at 20:20

score 0 · Answer 1 · answered Jul 28 '16 at 18:42

I have altered your code to wrap your PHP function within an if($_POST) to prevent the entire page loading

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

As Alexander suggests, read up on SQL Injection

How can I prevent SQL injection

Thank you for the response. But I need the search box to appear always in the page. — AnushkaM, Jul 30 '16 at 02:23

How to prevent Ajax from loading the unnecessary elements repeatedly?

1 Answers1