将$ _POST或PHP变量的值存储到Javascript变量中

Question

search.php

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
      <input type="text" name="search" id="search" autocomplete="off">
      <button type="submit" class="btn btn-primary">Search</button>
</form>
    <?php $search = $_POST['search']; ?> // This is what I've tried.
    <script type="text/javascript" src="js/search.js"></script>

I've tried to added $search = $_POST['search']; and put it into search.js like this var searchTerm = "<?php echo $search; ?>";

search.js

 var ajax_arry=[];
 var ajax_index =0;
 var sctp = 100;
 $(function(){
   $('#loading').show();
   var searchTerm = "<?php echo $search; ?>"; // This is what I've tried.
 $.ajax({
     url:"scroll.php",
              type:"POST",
              data:"actionfunction=showData&page=1&search="+searchTerm, // This is what I've tried.
    cache: false,
    success: function(response){
       $('#loading').hide();
      $('#demoajax').html(response);

    }

   });
$(window).scroll(function(){

   var height = $('#demoajax').height();
   var scroll_top = $(this).scrollTop();
   if(ajax_arry.length>0){
   $('#loading').hide();
   for(var i=0;i<ajax_arry.length;i++){
     ajax_arry[i].abort();
   }
}
   var page = $('#demoajax').find('.nextpage').val();
   var isload = $('#demoajax').find('.isload').val();

     if ((($(window).scrollTop()+document.body.clientHeight)==$(window).height()) && isload=='true'){
       $('#loading').show();
   var ajaxreq = $.ajax({
     url:"scroll.php",
              type:"POST",
              data:"actionfunction=showData&page="+page,
    cache: false,
    success: function(response){
       $('#demoajax').find('.nextpage').remove();
       $('#demoajax').find('.isload').remove();
       $('#loading').hide();

      $('#demoajax').append(response);

    }

   });
   ajax_arry[ajax_index++]= ajaxreq;

   }
return false;

if($(window).scrollTop() == $(window).height()) {
   alert("bottom!");
}
});

});

But when I get search from data:"actionfunction=showData&page=1&search="+searchTerm on scroll.php to query it does not work.

function showData($data,$con,$limit){
$page = $data['page'];
if($page==1){
    $start = 0;
}
else{
    $start = ($page-1)*$limit;
}
$name = $data['search'];
$sql = "SELECT * FROM product WHERE p_name LIKE '%$name'";

Answer 1

you should include your Js code in your php file. Because you can not write php code in js file. while js code can be written in php.

So your code should be like.

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
    <input type="text" name="search" id="search" autocomplete="off">
    <button type="submit" class="btn btn-primary">Search</button>
</form>

<?php if ($_POST) {
    $search = $_POST['search'];
    ?> 
    <script>
        var ajax_arry = [];
        var ajax_index = 0;
        var sctp = 100;
        $(function () {
            $('#loading').show();
            var searchTerm = "<?php echo $search; ?>"; // This is what I've tried.
            $.ajax({
                url: "scroll.php",
                type: "POST",
                data: "actionfunction=showData&page=1&search=" + searchTerm, // This is what I've tried.
                cache: false,
                success: function (response) {
                    $('#loading').hide();
                    $('#demoajax').html(response);

                }

            });
            $(window).scroll(function () {

                var height = $('#demoajax').height();
                var scroll_top = $(this).scrollTop();
                if (ajax_arry.length > 0) {
                    $('#loading').hide();
                    for (var i = 0; i < ajax_arry.length; i++) {
                        ajax_arry[i].abort();
                    }
                }
                var page = $('#demoajax').find('.nextpage').val();
                var isload = $('#demoajax').find('.isload').val();

                if ((($(window).scrollTop() + document.body.clientHeight) == $(window).height()) && isload == 'true') {
                    $('#loading').show();
                    var ajaxreq = $.ajax({
                        url: "scroll.php",
                        type: "POST",
                        data: "actionfunction=showData&page=" + page,
                        cache: false,
                        success: function (response) {
                            $('#demoajax').find('.nextpage').remove();
                            $('#demoajax').find('.isload').remove();
                            $('#loading').hide();

                            $('#demoajax').append(response);

                        }

                    });
                    ajax_arry[ajax_index++] = ajaxreq;

                }
                return false;

                if ($(window).scrollTop() == $(window).height()) {
                    alert("bottom!");
                }
            });

        });
    </script>

<?php } ?>