从AJAX调用中检索多个变量到jQuery

Question

我有一个PHP文件，该文件从数据库请求六行。 我正在使用ajax调用。

我希望将这六行（多列）传递到我的主文件。 除了将这些值以html形式发布到请求文件中并将其作为表格发布到我的主页上之外，我无法找到将这些值获取到我的主页上的方法。

我不希望它们在普通表的页面上显示给所有人。

所以不是这样的：

success: function(html) {
    $("#display").html(html).show();
}

我现在总是需要六行，但以后可能会更多。

我的想法之一是将其发布为一个长字符串并将其加载到变量中，然后使用explode或类似的东西进行读取。 不知道这是否是一个好方法...

我基本上是在寻求构想以扩大视野。

我仍在学习JavaScript和jQuery，因此我希望有一个很好的解释，而不是一堆可用的代码。

提前致谢！

Answer 1

PHP方面

这是一个非常简单的过程，您可能在掌握之后会踢自己；）但是，一旦这样做，它就会打开一个无限的可能性，您的思想将变得疯狂。

第一步是您要调整将要返回到ajax调用的数据。 如果您的行中有几行，那么您将在以下几行中有所作为（可能来自db或赋值，无论如何）：

$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调用EXPECT一个json字符串变成一个对象。 该对象将成为您在成功函数arg（我在上面将其命名为obj ）中定义的obj 。

现在，要访问每一行的每个特定数据变量，请将其视为对象。 行数组，每行都有vars，就像在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>

Answer 2

照弗雷德里科所说的做。 从您的PHP返回json并使用ajax调用进入jQuery。 像这样的东西： http : //makitweb.com/return-json-response-ajax-using-jquery-php/ 。 只需跳过第3步，如果不需要将接收到的数据打印到html，则对第5步中的接收数据进行所需的处理。