AJAX 响应文本作为 DOM？

Question

考虑使用 jQuery 的以下函数：

function getVal() {
    jQuery.get('/relative/url/', function (data) {
        return data.getElementById('myInput').value;
    }
}

这基本上就是我想要做的，但我不知道应该如何完成。 我知道唯一可行的方法涉及框架或innerHTML，但我无法使用它们，因为我必须等待元素准备好。唯一的方法是使用回调，并且此函数必须返回元素的值而不是其他值。 我的逻辑可能有问题，请大家指正。

Answer 1

首先，对于当前的结构，您应该使用回调来返回值。要解析通过 AJAX 检索到的 HTML 字符串，您可以将其交给 jQuery，然后像往常一样查询它。

function getVal(callback) {
    jQuery.get('/relative/url/', function (data) {
        callback($(data).find('#myInput').val());
    }, 'html');
}

然后，当您调用函数 getVal 时，您需要提供回调：

getVal(function(input_val) {
    /**
     * This code will be run once the GET request finishes.
     * It will be passed one parameter - the value of #myInput in the HTML
     * response to the request (see getVal function).
     */

    alert(input_val);
});

Answer 2

不，你不能这样做......因为它是异步调用。您需要的是为您的代码提供回调以返回值

function getVal(callback) {
    jQuery.get('/relative/url/', function (data) {
        callback(data.getElementById('myInput').value);
    }
}

getVal(function (value) {
  alert(value);
});

Answer 3

如果它是有效的 html 标记，您可以使用选择器浏览其 xml：

*[id=myInput]

或者您可以只在页面中的某个虚拟元素上呈现标记，然后进行查找：

function getVal() {
    jQuery.get('/relative/url/', function (data) {
        dummyNode.innerHTML = data; //not sure data points to responseTxt
        return getElementById('myInput').innerHTML;
    }
}

Answer 4

除非将元素添加到 dom 树中，否则您无法执行此操作。

function getVal() {
    jQuery.get('/relative/url/', function (data) {
        return $(document.body).append(data).find('#myInput').val();
    }
}

Answer 5

有几个问题。首先，您不能从这样的回调中返回。您只需返回匿名函数本身，而不是从 getVal() 方法返回。

为了解决这个问题，您可以返回jXHR对象并应用一些魔法：

function getVal() {
    return jQuery.get('/relative/url/');
}

getVal().done(function (data) {
    var val = $( data ).find('#myInput').val();
    // do something with val
}

我不知道data的结构是什么样的，但它应该以这种方式工作。如果不是，可能是因为 myInput 位于顶层。在这种情况下，请将 .find() 替换为 .filter()。

Answer 6

哦，好吧。我明白了。我认为我没有提供足够的信息。我认为上下文无关紧要。好的，这是一个描述我的解决方案的示例。

function getVal() {
    $.get('/relative/url/', function (data) {
        $.get('relative/url/2', function (data2) {
            var data_obj = [];
            data_obj.push({
                "data_1":data[i].name
            }, {
                "data_2":$(data).find('#myInput').val()
            });
        });
    }
}