Получить несколько переменных из вызова AJAX в jQuery

Делайте то, что Фредерико говорит выше. Верните json из своего php и войдите в jQuery с помощью вызова ajax. Примерно так: http://makitweb.com/return-json-response-ajax-using-jquery-php/. Просто пропустите шаг № 3 и сделайте то, что вам нужно, с полученными данными на шаге № 5, если вам не нужно печатать их в формате html.

Сторона PHP

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

На первом этапе вы хотите настроить свои данные, которые вы будете возвращать вызову ajax. Если у вас есть несколько строк с несколькими полями, у вас будет что-то в этих строках (может исходить из базы данных или назначений, что угодно):

$rows = [];
$rows[] = array('thing'=>'value 1','something'=>'blah','tertiary'=>'yup');
$rows[] = array('thing'=>'value 2','something'=>'yadda','tertiary'=>'no');
$rows[] = array('thing'=>'value 3','something'=>'woop','tertiary'=>'maybe');

Теперь, чтобы передать эти строки данных в ajax, вы выполняете одну простую операцию:

echo json_encode($rows);
exit; // important to not spew ANY other html

Это все, что вам действительно нужно делать со стороны PHP. Итак, что же нам делать? Итак, мы взяли многомерный массив данных (обычно представляющий то, что поступает из базы данных), закодировали его в формате JSON и вернули. Вышеупомянутое будет выглядеть в вашем браузере так:

[{"thing":"value 1","something":"blah","tertiary":"yup"},
 {"thing":"value 2","something":"yadda","tertiary":"no"},
 {"thing":"value 3","something":"woop","tertiary":"maybe"}]

Он будет обрабатывать все экранирование и кодирование utf8 и других специальных символов. Радости json_encode()!

Сторона JAVASCRIPT

Эта сторона не так сложна, но есть кое-что, что нужно понять. Во-первых, давайте приведем ваш вызов jquery ajax в форму:

<div id = "rows"></div>
<script>
$("#your-trigger").on('click',function(e){
    e.preventDefault(); // just stops the click from doing anything else
    $.ajax({
       type: "POST",
       url: 'your_ajax.php',
       data: { varname: 'value', numrows: '6' },// your sent $_POST vars
       success: function(obj) {
           // loop on the obj return rows
           for(var i = 0; i < obj.length; i++) {
               // build a div row and append to #rows container
               var row = $('<div></div>');
                   row.append('<span class = "thing">'+ obj[i].thing +'</span>'); 
                   row.append('<span class = "details">'+  
                                   obj[i].something +' '+ obj[i].tertiary
                               +'</span>');
               $("#rows").append(row);
           }
       },
       dataType: 'json' // important!
    });
});
</script>

Итак, давайте объясним несколько ключевых моментов.

Самым важным является dataType: 'json'. Это сообщает вашему вызову ajax ОЖИДАТЬ, что строка json превратится в объект. Этот объект становится тем, что вы определяете в функции успеха arg (которую я назвал выше obj).

Теперь, чтобы получить доступ к каждой конкретной переменной данных каждой строки, вы рассматриваете ее как объект. Массив строк, в каждой строке есть переменные, названные так, как вы их назвали в PHP. Здесь у меня есть пример for для циклического перебора массива строк.

Например, obj[0].thing относится к первой строке переменной thing. Использование i позволяет вам просто автоматически просматривать все строки на основе length объекта. Там есть несколько удобных вещей.

Вы можете создать любой HTML-код из возвращенного объекта и значений. Я только что показал, как настроить примерную строку <div><span class = "thing"></span><span class = "details"></span></div>. Вы можете использовать таблицы или более сложные настройки и код.

Чтобы сохранить данные, возвращаемые вашим вызовом ajax, вы можете сохранить их в локальной или глобальной переменной, например так:

<script>
var globalvar;
$....('click',function(e){
    var localvar;
    $.ajax(.... success: function(obj){
        ....
        localvar = obj;
        globalvar = obj;
        ....
    });
});
</script>