從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步中的接收數據進行所需的處理。