jQuery ajax 请求:如何在成功函数中访问发送的数据

jQuery ajax request: how to access sent data in success function?

本文关键字：访问 数据 函数 成功 请求 ajax jQuery      更新时间：2023-09-26

所以我正在尝试实现以下目标，但我不知道如何完成这项工作。

$.ajax({
  url: "whatever.php",
  method: "POST",
  data: { myVar: "hello" },
  success: function(response) {
    console.log('received this response: '+response);
    console.log('the value of myVar was: '+data.myVar); // <<<< data.myVar is not accessible from here
    console.log('the value of myVar was: '+myVar); // <<<< myVar is not accessible from here
  }
});

有没有办法在.success()函数中访问myVar的值？我可以以某种方式访问.success()函数中在此 ajax 请求中发送的原始data对象吗？

希望您的解决方案。谢谢！

您可以使用this来访问整个对象。所以你可以做这样的事情：

$.ajax({
  url: "whatever.php",
  method: "POST",
  data: { myVar: "hello" },
  success: function(response) {
    console.log('received this response: '+response);
    console.log('the value of myVar was: '+this.data.myVar);
  }
});

除了拼音的答案之外，所有其他答案都是不可靠的，是一种不好的做法。

就其本质而言，AJAX 请求是异步的。这意味着当响应从服务器返回时，他们设置的变量可能已经更改。如果你想要一个例子，只需制作两个按钮，它们都触发相同的代码，但myData设置为不同的值，并在响应返回之前快速单击它们......现在变量已更改，您将获得不可靠的结果。

拼音的答案也很好，但有时你会得到不同格式的发送数据。它可能是stringify的 JSON 对象，也可能是带有查询字符串的 GET 格式等。

在

编码器上最简单的方法(尽管它确实在RAM中产生了更多的开销(是分配AJAX对象的新属性并在回调中访问它，如下所示(使用Piyin的示例(：

var dataToSend = { myVar: "hello" };
$.ajax({
  url: "whatever.php",
  method: "POST",
  data: dataToSend,
  sentData: dataToSend, //add this property
  success: function(response) {
    console.log('received this response: ' + response);
    console.log('the value of myVar was: '+ this.sentData.myVar); //access sentData property
  }
});

通常，如果您希望能够多次引用数据，则需要确保它在正确的范围内。您在.ajax()内部传递的 json 数据对象的作用域是 ajax 函数。如果您希望能够引用该值之外的data:值，例如您调用.ajax()的范围，最简单的方法是将其分配给变量。例如

myData = { myVar: "hello" };
$.ajax({
  url: "whatever.php",
  method: "POST",
  data: myData,
  success: function(response) {
    console.log('received this response: '+response);
    $("#response").html(response);
    console.log('the value of myVar was: '+myData.myVar); // <<<< data.myVar is not accessible from here
    $("#myVar").html(myData.myVar);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="response"></p>
<p id="myVar"></p>

只需先将您发布的数据存储在变量中即可。

var data = {myVar: "hello"}
 $.ajax({
  url: "whatever.php",
  method: "POST",
  data: data,
  success: function(response) {
    console.log('received this response: '+response);
    console.log('the value of myVar was: '+data.myVar); 
  }
});

创建一个数据对象，以便您可以在请求的各个部分进行访问

var postData ={ myVar: "hello" };
$.ajax({
  url: "whatever.php",
  method: "POST",
  data: postData ,
  success: function(response) {
    console.log('received this response: '+response);
    console.log('the value of myVar was: '+postData.myVar);

您始终可以执行以下操作：

var myData = '{ myVar: "hello" }';
$.ajax({
    url: "whatever.php",
    method: "POST",
    data: myData,
    success: function(response) {
        console.log('the value of myVar was: ' + myData.myVar);
    }
});

甚至更好

var myData = {
    myVar: "hello"
};
$.ajax({
    url: "whatever.php",
    method: "POST",
    data: JSON.stringify(myData),
    success: function(response) {
        console.log('the value of myVar was: ' + myData.myVar);
    }
});
相关文章：