打印JSON數組到屏幕通過ajax到PHP腳本

我一直在比較我的代碼與網絡上的其他示例，我仍然無法找到我的錯誤。當我加載頁面並點擊提交時，屏幕上沒有任何反應。但是，在Firebug中，我收到POST 200 OK，應該在屏幕上顯示的PHP腳本在POST響應標籤中列出。打印JSON數組到屏幕通過ajax到PHP腳本

由於Firebug正在作出適當的反應，我很困惑什麼是錯的。

基本HTML表單

<form id="form" action="" method="post"> 
    <input type="submit" name="submit" id="submit" value="submit"/> 
</form> 
<div id="results"></div>

jQuery的創建一個JS對象。該對象通過JSON.stringify和JSON.parse發送。提交事件處理程序觸發$.ajax。 JSON數據傳遞給ok.php，理論上它應該返回腳本中調用的PHP信息。

var addIt = new Object(); 

addIt.one = "one"; 
addIt.two = 2; 
addIt.three = addIt.one +" + "+ addIt.two +" = "+ "three"; 

$jsonAddIt = JSON.stringify(addIt); 
$jsonAddIt = JSON.parse($jsonAddIt); 

$('#submit').click(function(e){ 
    e.preventDefault(); 

    $.ajax({ 
     type: 'POST', 
     url: 'ok.php', 
     dataType:'json', 
     data: ({ json:$jsonAddIt }), 
     success:function(data) { 
      $("#results").html(data); 
     } 
    }); 
});

PHP

<?php 
    $ajaxInfo = $_POST["json"]; 
    if ($ajaxInfo !="") 
    { 
     echo "info transfered"; 
    } 
    else 
     echo "nothing"; 
?> 

<div id="returned"> 
    <?php print_r($ajaxInfo); ?> 
</div>

來源

2012-12-11 bkbarton

當你在成功時提醒數據變量時，你有什麼做什麼 – mlwacosmos

這兩條線是不需要的，第二條線是第一條線。只是將它們都刪除。

$jsonAddIt = JSON.stringify(addIt); 
$jsonAddIt = JSON.parse($jsonAddIt);

此行應該給你[object Object]在你的DIV如果Ajax請求是成功的，否則它不會做任何事情（這是您目前的結果）。

$("#results").html(data)

當前您的ajax請求實際上失敗，因爲它沒有返回預期的JSON數據類型。如果你改變你的dataType爲「html」，它將起作用。

$.ajax({ 
    type:'POST', 
    url: 'ok.php', 
    dataType:'html', 
    data: {json:addIt}, 
    success:function(data){ 
     $("#results").html(data); 
    } 
});

此外，

var addIt = new Object();

應該

var addIt = {};

來源

2012-12-11 16:34:44

設置數據類型爲JSON將使jQuery的Ajax請求自動解析到一個Javascript對象。你在這裏有兩個解決方案。要麼改變Ajax請求的數據類型：

$.ajax({ 
        type:'POST', 
         url: 'ok.php', 
         dataType:'text', 
         data: ({json:$jsonAddIt}), 
         success:function(data){ 
          $("#results").html(data); 
          } 
});

或者你可以使用this庫字符串化對象：

$.ajax({ 
        type:'POST', 
         url: 'ok.php', 
         dataType:'json', 
         data: ({json:$jsonAddIt}), 
         success:function(data){ 
          $("#results").html(JSON.stringify(data)); 
          } 
});

希望它能幫助。

來源

2012-12-11 16:31:39 a0viedo

@aOviedo，我會考慮按照你提到的方式添加stringify。謝謝你的幫助。 – bkbarton

我認爲這個問題是您dataType。通過說json，你告訴jQuery你期待的內容是json。哪裏php可能設置標題中的內容類型爲html。你應該能夠刪除它，jQuery將自動從響應的頭部中找出它。

來源

2012-12-11 16:37:16 jaysqrd

更改數據類型確實有幫助。謝謝（你的）信息。 +1 – bkbarton

打印JSON數組到屏幕通過ajax到PHP腳本

回答

相關問題