AJAX POST - how to use a js variable in PHP

Question

The first time the page loads, there will not be anything in the POST data array. After it runs I want to be able to use whatever variable I send in the POST data in the PHP code so I can query my database based on parameters sent. Do I need to reload the page somehow to do this?

PHP:

if(isset($_POST['boarder'])){
    $boarder = $_POST['boarder'];
    function boarderCheck($boarder){
        echo "<script type ='text/javascript'>alert('$boarder');</script>";
    }
    boarderCheck($boarder);
} else {
?>
  <script defer src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="map.js"></script>
<?
};
?>

JavaScript (map.js)

$.ajax({
  type: "POST",
  data: {boarder: 'test'},
  dataType: 'text',
  success: function(response) {
    console.log(response);
  }
})

Possible duplicate of [AJAX: Submitting a form without refreshing the page](http://stackoverflow.com/questions/14235596/ajax-submitting-a-form-without-refreshing-the-page) — JazZ, Mar 06 '17 at 19:52

score 1 · Accepted Answer · edited Apr 13 '17 at 12:33

No you don't need to reload the page, especially since you are utilizing an asynchronous request (the A in AJAX) to the same URL.

See this phpfiddle demonstrating your example (with a couple modifications). Click the Run - F9 button and then click the button labeled Board to run the JavaScript (with the AJAX request). If you open the browser console, you should see the requests in the Network tab. The main one should be a GET request to a page like code_41096139.php (the numbers will likely change). Then when the AJAX request is made, there should be a POST request to that same page. Expand that request and you should see the Form data.

The only modifications made, besides adding the button and click handler, were to add the output element:

<div id="output"></div>

and then in the success callback of the AJAX request, set the text of that element to the response (in addition to the call to console.log()):

 success: function(response) {
      $('#output').text('response: '+response);
      console.log(response);
 }

score 0 · Answer 2 · answered Mar 06 '17 at 20:04

You can accomplish this by using an Ajax request. You have already loaded the JQuery library and have code that sends an Ajax request.

Maybe you are looking for how to use the Ajax response on your client side script or how to send an Ajax request to the server on a client side event.

Ajax is a way to communicate with the server without refreshing the page.

So the simple answer to your question is that - no you don't need to reload the page to accomplish this.

But, if you are ok (and more comfortable) with reloading the page, you can write JavaScript to fill a hidden field in a hidden form and use JavaScript to programmetically submit the form and handle everything in php on $_POST

Shafiqul Islam · Answer 3 · 2017-03-13T13:12:33.557

i think it will help you so send request and load data and if you want to reload page and if you want to search it also

   <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PHP, jQuery search demo</title>
<link rel="stylesheet" type="text/css" href="my.css">

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("input").keyup(function () {
        $('#results').html('');
        var searchString = $("#search_box").val();
        var data = 'search_text=' + searchString;
        if (searchString) {
            $.ajax({
                type: "POST",
                url: 'search.php',
                data: data,
                dataType: 'text',
                async: false,
                cache: false,
                success: function (result) {
                    $('#results').html(result);
                    //window.location.reload();

                }
            });
        }
    });
});
 </script>

</head>
<body>
<div id="container">
<div style="margin:20px auto; text-align: center;">
<form method="post" action="do_search.php">
    <input type="text" name="search" id="search_box" class='search_box'/>
    <input type="submit" value="Search" class="search_button"/><br/>
</form>
</div>
<div>

<div id="searchresults">Search results :</div>
<ul id="results" class="update">
</ul>

</div>
</div>

</body>
</html>

then create a php file

<?php 

 $searchquery = trim($_POST['search_text']); 
echo $searchquery;
?>

you can add more code which you want like update database , insert search as you want

AJAX POST - how to use a js variable in PHP

PHP:

JavaScript (map.js)

3 Answers3

Linked