Цикл AJAX-запроса -> MySQL -> создать абзац - PullRequest
Новая
       9

Цикл AJAX-запроса -> MySQL -> создать абзац

0 голосов
/ 27 октября 2011

Я прочитал столько, сколько смогу, но полностью застрял здесь (работало ли это на одном этапе, но только если я включил оповещения - ??). Что мне нужно:

  • Пользователь вводит список в текстовое поле.
  • текстовая область считывается в массив.
  • ajax-запросы к php-скрипту для каждого элемента в массиве.
  • php скрипт затем запускает запрос mysql и возвращает результат в ajax.
  • ajax затем создает новый элемент и заполняет его ответом.

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

Код до сих пор: 

    <script type="text/javascript">
function ajaxFunction(value){
    var ajaxRequest;

    try{
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                alert("Your browser broke!");
                return false;
            }
        }
    }

    ajaxRequest.onreadystatechange = function(){
        if (ajaxRequest.readyState == 4){
            return ajaxRequest.responseText;
        }
    }
    ajaxRequest.open("GET", "results.php?list=" + value, true);
    ajaxRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    ajaxRequest.send(null);
}

function loopAJAX() {
    var box = document.getElementById("results-table");
    box.innerHTML = "";

    var vars = document.getElementById('list').value;
    var varArray = vars.split("\n");
    var len = varArray.length;

    for(var i=0; i<len; i++) {
        var text = ajaxFunction(varArray[i]);
        var entry = document.createElement('p');
        entry.innerHTML = text; 
        box.appendChild(entry);
    }
}
</script>

Вывод должен быть таким: 

<div id='results-table'><p>id1</p><p>id2</p></div>

В настоящее время вывод выглядит так: 

<div id='results-table'><p>undefined</p><p>undefined</p></div>

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 27 октября 2011

Ваш код в корне нарушен.Вызов AJAX является асинхронным - ваш ajaxFunction() возвращает НЕМЕДЛЕННО, не ожидая ответа сервера.Это означает, что он возвращает нулевое значение остальной части кода, который вы затем вставляете в документ, вызывая ваши «неопределенные» абзацы.

Чтобы исправить этот код, вы должны иметь обработчик onreadystatechange, вызывающий функцию, котораявставляет возвращенные данные - это произойдет только ПОСЛЕ того, как сервер ответит некоторыми данными.

Кроме того, ваш код крайне неэффективен.Вы делаете вызов ajax для каждого элемента, который вводит пользователь.Нет абсолютно никаких причин, по которым вы не могли бы изменить свой PHP-сценарий так, чтобы он принимал значения MULTIPLE, обрабатывал их все сразу и возвращал все результаты за один вызов.

0 голосов
/ 27 октября 2011

XMLHTTPRequest, которые вы делаете, являются асинхронными, поэтому они не могут вернуть текст во время определения функции (они вызываются позже). Что вам нужно сделать, это передать ссылку на ваш тег <p> методу onreadystatechange, а затем обновить innerHTML внутри обратного вызова: 

   <script type="text/javascript">
function ajaxFunction(value, p){
    var ajaxRequest;

    try{
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                alert("Your browser broke!");
                return false;
            }
        }
    }

    ajaxRequest.onreadystatechange = function(){
        if (ajaxRequest.readyState == 4){
            p.className = "";
            p.innerHTML = ajaxRequest.responseText;
        }
    }
    ajaxRequest.open("GET", "results.php?list=" + value, true);
    ajaxRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    ajaxRequest.send(null);
}

function loopAJAX() {
    var box = document.getElementById("results-table");
    box.innerHTML = "";

    var vars = document.getElementById('list').value;
    var varArray = vars.split("\n");
    var len = varArray.length;

    for(var i=0; i<len; i++) {
        var entry = document.createElement('p');
        entry.className = "loading";
        entry.innerHTML = "Loading..."; 
        var text = ajaxFunction(varArray[i],entry);
        box.appendChild(entry);
    }
}
</script>
...