AJAX ResponseText как DOM?

Question

Рассмотрим следующую функцию с использованием jQuery:

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

Это в основном то, что я хочу сделать, но я понятия не имею, как это сделать.Единственные методы, которые я знаю, работали бы, включают фреймы или innerHTML, которые я не могу использовать, потому что я должен ждать, пока элемент будет готов.Единственный способ сделать это - использовать обратный вызов, и эта функция должна возвращать значение элемента, а не что-то еще.Моя логика здесь ошибочна, поэтому, пожалуйста, не стесняйтесь меня поправлять.

Answer 1

Прежде всего, с вашей текущей структурой вы должны использовать обратный вызов для возврата значения. Чтобы проанализировать строку HTML, полученную через AJAX, вы можете передать ее в 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() {
    $.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()
            });
        });
    }
}

Answer 3

Несколько проблем там.Во-первых, вы не можете return от такого обратного вызова.Вы просто вернетесь к самой анонимной функции, а не из метода 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 4

Вы не можете сделать это, если элементы не добавлены в дерево dom.

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

Answer 5

если это действительная HTML-разметка, вы можете использовать ее XML для просмотра с помощью селектора:

*[id=myInput]

или вы можете просто визуализировать разметку на каком-то фиктивном элементе на вашей странице и затем выполнить поиск:1004 *

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

Answer 6

Нет, вы не могли этого сделать .. так как это асинхронный вызов. Вам нужно предоставить обратный вызов вашего кода, чтобы вернуть значение

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

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