来自PHP文件中的jQuery的GET参数没有带来？

Question

I have some data in an ajax request that I am sending to a php file as an endpoint.

The code is the following:

// some calculations above here, but to keep things minimal assume they produce the following
totalBeforeTip = 38.43;
tipTotal = 5.77;
totalWithTip = 44.48;
saleCount = "3";
  console.log("List for the query String: " + totalBeforeTip 
                                        + "
 Tips: " + tipTotal 
                                        + " 
 Totals+Tip: "+ totalWithTip
                                        + "
 Totals Sales: " + saleCount);

  // Send get to php with q-string

  $.ajax({
    url:"summary.php",
    type: "get",
    data:{
      TotalSales: saleCount, 
      TotalsNoTip:totalBeforeTip, 
      TotalTip: tipTotal, 
      TotalWithTip: totalWithTip
    },
    success: function(resp){
      console.log(resp);
      window.location.href = "summary.php";
    },
    error: function(err){
      console.log(err);
    }
  });

And my php is the following:

<main>
    <?php
    $TotalSales = $_GET["TotalSales"];
    $TotalTips =  $_GET["TotalTip"];
    $TotalBeforeTip = $_GET["TotalsNoTip"];
    $TotalWithTip = $_GET["TotalWithTip"];
    ?>
 <div class='container'>
        <div class='row'>
            <div class='col-md-6'>
                  <form> <!--Main form for user interaction-->
                    <div class='form-group bigger-group'>
                      <label>Sales: </label>
                      <input readonly value="<?php echo $TotalSales  ?>" />
                    </div>
                      <div class='form-group'>
                          <label>Totals Before Tips:</label>
                      </div>
                      <div class='form-group'>
                          <label>Total Tip Cost:</label>
                      </div>
                      <div class='form-group'>
                          <label>Total Cost with Tip:</label>
                      </div>
                    </div>
                    <div class=col-md-6>
                    <h1>Cost ($)</h1>
                <div class='form-group'>
                    <input readonly value="<?php echo $TotalBeforeTip ?>"/>
                </div>
                <div class='form-group'>
                    <input readonly value="<?php echo $TotalTips ?>"/>
                </div>
                <div class='form-group'>
                    <input readonly value="<?php echo $TotalWithTip ?>"/>
                </div>
            </div>
        </div>

</main>

When I redirect my fields are blank but in the response in the console log they are filled. I tried to do a page redirect to the resp it doesn't do anything. After poking at it quite a bit I got it to work by adding the following line to success: function(resp){....}.

window.location = "summary.php?TotalSales="+saleCount+"&TotalsNoTip="+totalBeforeTip+"&TotalTip="+tipTotal+"&TotalWithTip="+totalWithTip;

For some reason this works, and the fields in the php have the proper data but I don't see how? Or why it is that the data I passed in with the .ajax method just evaporated?

I've been struggling with this for two days and it works but I don't understand why at all. Can anyone shed some light?

Answer 1

So with the combination of all the feedback I've received and some more googling I've learned that AJAX is for ACTION not CONTENT and the core purpose of AJAX is to perform background processing without holding main flow on a page. Some good examples are :

• Loading new tweets on twitter
• Giving a notification if you have a new email in your inbox
• Validating form fields on blur

Since in my case I wanted to send the totalBeforeTip, tipTotal, totalWithTip, saleCount to my summary.php to load the content of the input fields based off that data. Using AJAX for it is a bad approach because this should be done in a synchronous process.

I used the following code to accomplish this outside of ajax

window.location = "summary.php?TotalSales="+saleCount+"&TotalsNoTip="+totalBeforeTip+"&TotalTip="+tipTotal+"&TotalWithTip="+totalWithTip;

All I needed was the queryString.