如何将 .ajax() responseText 设置为变量答案

【问题标题】：How to set an .ajax() responseText to a variable如何将 .ajax() responseText 设置为变量
【发布时间】：2011-06-09 12:13:17
【问题描述】：

我的问题是如何获取一个页面的 HTML 并将其存储在一个对象中，以后可以使用 jQuery 方法搜索该对象，以通过 id、名称、类等获取元素。

这是我目前所拥有的：

   $(document).ready(function(){
     $('#button').click(function() {
        var page = $.ajax({
                type: 'GET',
                url: 'Grabber.php',
                data: {url:$('#url')},
                dataType: "HTML",
                success: function(data){
                    alert(data); //this alert displays the correct information
                } 
                    }).responseText;
        alert(page); //this alert displays nothing
     });
  });

我怎样才能让那个“页面”变量工作？更好的是，我如何存储它，以便可以像访问 HTML 文档一样访问它。到目前为止，我唯一的想法是作为 DOM 文档。

【问题讨论】：

标签： jquery html ajax dom document

【解决方案1】：

$(document).ready(function(){
 var page;
 $('#button').click(function() {
    $.ajax({
            type: 'GET',
            url: 'Grabber.php',
            data: {url:$('#url')},
            dataType: "HTML",
            success: function(data){
                populate(data);
            } 
    });
    function populate(a) {
        page = a;
        alert(page)
        alert($(page).find('span').text())
    }

 });
});

检查documentation，$.ajax返回XMLHttpRequest，而success方法返回data, textStatus, XMLHttpRequest。你需要的是data
要访问它，您可以执行以下操作：

$(page).find('span').text()

【讨论】：

我已经尝试过了，警报返回“未定义”
alert() 可能在 ajax 调用完成之前发生，导致页面变量为空。您需要在成功函数中工作，以确保数据确实存在。
将 alert() 放入成功函数中。 alert() 在 HTTP 请求返回之前被调用，所以它是未定义的。要么这样，要么设置 async: false 以便它等待 HTTP 请求返回。但我建议在成功函数中执行所有操作，以免耽误其他事情。
true 已修复，成功后您可以调用“搜索”函数来获取您想要的任何内容，就像在更新的示例中一样
这可以正常工作并且是我需要的，但是如果我需要做更多的 ajax 查询，那么它开始在 ajax() 中的 ajax() 中使用 ajax() 变得毛茸茸。

【解决方案2】：

data 仅在 AJAX 调用成功后可用。所以这个成功函数之外的任何变量都不一定要设置：

$(document).ready(function(){
     $('#button').click(function() {
        $.ajax({
          type: 'GET',
          url: 'Grabber.php',
          data: {url:$('#url')},
          dataType: "HTML",
          success: function(data) {
            // keep working _within_ this function
            // and call it "page" instead of "data" if you want
            alert(data);

            // and to find something within this data:
            $(data).find('.some-class')... // etc
          } 
        });
     });
});

【讨论】：

【解决方案3】：

在你的成功回调中，你应该在它的本地范围之外分配一个变量，这样当函数结束时，数据就不会丢失。然后你可以将它作为第二个参数传递给 jQuery 方法，让你的 jQuery 选择器作用于 AJAX 获取的文档而不是 Document。

var a_nasty_global_variable_you_should_put_in_a_better_place;

// most of your code…

    success: function(data){
      a_nasty_global_variable_you_should_put_in_a_better_place = data;
    }

// a little later…

$('#button', a_nasty_global_variable_you_should_put_in_a_better_place).addClass('is-awesome');

你明白它的要点，不是吗？

【讨论】：

【解决方案4】：

如果您希望该变量位于存在此 ajax 的同一页面上，您可以使用 全局变量

或

如果必须存储少量数据并在其他页面上使用 responceText，您可以使用 cookies 来存储您的 responseText 对于带有 jquery 的 cookie HELP?

【讨论】：