PHP/JS - 使用 AJAX 传递值答案

【问题标题】：PHP/JS - pass values with AJAXPHP/JS - 使用 AJAX 传递值
【发布时间】：2015-05-05 16:13:06
【问题描述】：

我试图在不通过表单操作的情况下获取文本框的值（因为我既不能重定向到另一个页面也不能刷新当前页面）。

index.php

进入头脑

<script type="text/javascript">
    function send() {
       $.ajax({
       type:"POST",
       url: "script.php",
       data: {
              fname: document.getElementById("fname").value,
              lname: document.getElementById("lname").value
             },
       success: function callScriptAndReturnAlert() {
                     var sdata = new XMLHttpRequest();
                     sdata.onload = function() {
                        alert(this.responseText);
                     };
                     sdata.open("get", "script.php", true);
                     sdata.send();
                  } 
              });
        }
    </script>

进入身体

<button class="myclass" onclick="send();">MyButton</button>
<input type="text" id="fname" placeholder="First name here" />
<input type="text" id="lname" placeholder="Last name here" />

按钮在输入之前只是用于 UI 的东西

script.php

    $prev = $_SESSION['prev'];
    $fname = $_POST['fname'];
    $lname = $_POST['lname'];

    [....do something....]

    echo 'You used '.$fname.' and '.$lname;

嗯.. script.php 没有收到输入 fname 和 lname 的值。

【问题讨论】：

我确实得到了这些值。这是所有的代码吗？你没有包括 jQuery 吗？如果包含它，它会起作用。当第一次调用 script.php 完成时，为什么要进行第二次 ajax 调用？为什么不使用 jQuery？

标签： javascript php jquery html

【解决方案1】：

当您只需要一个时，您正尝试进行两个 ajax 调用。

<script type="text/javascript">
    function send() {
      $.ajax({
       type:"POST",
       url: "script.php",
       data: {
              fname: $("#fname").val(),
              lname: $("#lname").val()
             },
       beforeSend: function(){
           alert('Sending');
       },
       success: function(data) {
              //Received data from PHP script
              alert(data);
       },
       error: function(){
           alert('Error !');
       },
       complete: function(){
           alert('Done');
       }  
     });
   }
    </script>

【讨论】：

【解决方案2】：

$.post(
    'script.php', // Your PHP file
    { // The data to pass
        'fname' : $('#fname').val(),
        'lname' : $('#lname').val()
    }
).done(function(data) { // Here your AJAX already finished correctly.
    alert(data); // Show what the PHP script returned
});

$.ajax()、$.get() 和 $.post() jQuery 方法用于进行 AJAX 调用，因此，它们已经管理自己的 XMLHttpRequest 对象。

【讨论】：