javascript - 从对 jQuery 的 AJAX 调用中检索多个变量

Question

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

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

我不希望它们出现在页面上的普通表格中，让每个人都能看到。

所以不是这样的:

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

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

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

我基本上是在寻求想法来扩大我的视野。

我仍在学习 JavaScript 和 jQuery，所以我宁愿有一个很好的解释，也不愿有一段工作代码。

提前致谢!

Answer 1

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 字符串转换为对象。该对象将成为您在 success 函数 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>