jQuery在单击按钮时返回PHP脚本

Question

Currently, I have a HTML page that includes a PHP script. Once the user signs in, with the php script included, the data is automatically returned to the page, as follows:

 <section class="content">
 <?php include("api/qnams_all.php"); ?>
 </section>

That script includes a query that returns a table with an ID called #example1.

Using that ID, I am to use jQuery DataTables to format the data from that script:

 $('#example1').DataTable({
 {
   "dataType": "json",  
   "iDisplayLength": 25,
   "bDestroy": true,
   "stateSave": true
 });

Now, what I would like to do, is check if a button was clicked via jQuery, and if so, run a different php script.

So in that section tag above, I want to do something like this:

 <section class="content">
 <button type="button" id="buttonSearch">Search</button>
 <script type="text/javascript">
   if('#buttonSearch').click(function()  
   {
     // return <?php include("api/differentScript.php"); ?>
   }
   else
   {
     // return <?php include("api/qnams_all.php"); ?>
   });
 </script>
 </section>

I am sure the syntax is probably wrong in the JavaScript. I was trying to show an example of what I'm trying to do.

Can this be done?

Answer 1

I would use an ajax call to the page. Listen to whats been requested in PHP and return it. Then add the result of this to a HTML object on page.

I would approach it similar to this;

<?php 

if(isset($_POST['script1'])){
    include("api/differentScript.php");
    exit;
}

if(isset($_POST['script2'])){
    include("api/qnams_all.php");
    exit;
}

?>

<div id='output'></div>


<script type="text/javascript">

    $("#buttonSearch").on('click', function(){
        $.ajax({
            type:"POST",
            url: "/page_location/",
            data: "script1=true",
            success: function(result){
                $("#output").html(result);
            }
        });
    });

    $("#buttonSearch2").on('click', function(){
        $.ajax({
            type:"POST",
            url: "/page_location/",
            data: "script2=true",
            success: function(result){
                $("#output").html(result);
            }
        });
    });

</script>

I'm not sure how data tables works, if you were to store the data in a variable you could send it with the post data by changing it to:

data: {script1: true, post_data_1: var}, 

Answer 2

Unfortunately, what you are trying to do won't work without sending something back to your web server. PHP is a server side language, so once you are in a browser using Jquery, you cannot execute anymore PHP on that page.

You have two options, assuming you don't want to send both options downstream with the initial request: you can redirect on click:

<script type="text/javascript">
if('#buttonSearch').click(function()  
{
    window.location.href = "/api/differentScript.php";
}
else
{
   window.location.href = "/api/qnams_all.php";
});
</script>

Or, looking at your URL and noting that you are using an API, you can make an asynchronous call using AJAX:

<script type="text/javascript">
$('#buttonSearch').click(function()  
{
   $.ajax({
       dataType: 'json',
       url: "/api/differentScript.php",
       data: {key: 'value'},
       success: function(repsonse) {
       var responseObject = JSON.parse(response);
       //Do something with response object on page
   },
   error (message) {
       //handle errors
   }
});
</script>

If 'differentScript.php' ends in

return json_encode($results);

And $results is a PHP object or array, then the

JSON.parse(response)

Will turn your PHP array into a jquery object.

Answer 3

You cannot include a PHP script like that within Javascript. You will have to make an Ajax call for each condition & then do the necessary things you want via the PHP script. If you "include" the PHP scripts as you have mentioned above, they will directly be included when your page loads, not on click of any button. Plus this is not the right way to do it.