從Ajax返回的JSON問題

我已經構建了一個應該通過AJAX提交表單的頁面，但是無論何時提交表單，url都會更改爲表單處理程序的url，並且只顯示JSON應該返回而不是使用它來更新當前頁面。它只是看起來像一個空白頁：從Ajax返回的JSON問題

{"id":"1","task":"test","status":"complete"}

下面是我用什麼形式：

<div id='test'> 
<form action ='handler.php' method='post' class='test_form complete'> 
... hidden input fields ... 
<input type="submit" name="markcomplete" value="Mark Complete" /></form> 
</div>

下面是被提交表格的AJAX：

jQuery('.test_form').on('submit', function(e) { 
    jQuery(this).hide(); 
    jQuery.ajax({ 
     url : myAjax.ajaxurl, //this is required for using ajax in WordPress 
     dataType : "json", 
     type: "POST", 
     data: jQuery(this).serialize(), 
     success: function (response) {     
      otherform = "#" + response.task + " form" + "." + response.status; 
      jQuery(query).show(); 
      jQuery('#message').html("<p>status changed</p>"); 
    } 
    }); 
    e.preventDefault(); 
});

什麼這應該是隱藏當前窗體，顯示另一個窗體，並顯示狀態已更改的簡單消息。

和這裏的handler.php：

if (isset($_POST['markcomplete'])){ 
    $id = $_POST['id']; 
    $task = $_POST['task']; 
    $cparray = array('userid' => $id, 'task' => $task, 'satus' => "complete"); 
// function that makes changes to database... 
wp_send_json($cparray); // this is the equivalent of echo json_encode($cparray); 
}

我知道後正在發送，因爲我看到對數據庫所做的更改，它顯示我想在當前頁面使用JSON 。我對AJAX並不熟悉，所以如果它簡單，我不會感到驚訝。

編輯1：JQuery包含在項目中。我沒有得到任何javascript錯誤，但進一步檢查時，我點擊提交時，在控制檯中看到此消息：

「資源解釋爲Document，但是以MIME類型application/json：」handler.php「傳輸。

來源

2016-12-29 Eric T

你看了AJAX請求/ R在瀏覽器的開發者工具中使用esponse？你有沒有在項目中包含jQuery庫？是否有任何錯誤報告？你在網絡服務器上運行這個嗎？ –

如果在'e.preventDefault（）;'之後添加'return false;'會怎麼樣？ –

加入return false並沒有改變任何東西。 –

<div id='test'> 
    <form action="" method="POST" id="testForm" class='test_form complete'> 
... hidden input fields ... 
    <input type="submit" name="markcomplete" value="Mark Complete" .></form> 
    </div> 


jQuery('#testForm').on('submit', function(e) { 
e.preventDefault(); 
jQuery(this).hide(); 
jQuery.ajax({ 
    url : myAjax.ajaxurl, //this is required for using ajax in WordPress 
    dataType : "json", 
    type: "POST", 
    data: jQuery(this).serialize(), 
    success: function (response) {     
     otherform = "#" + response.task + " form" + "." + response.status; 
     jQuery(query).show(); 
     jQuery('#message').html("<p>status changed</p>"); 
} 
}); 

});

使用e.preventDefault()第一，以避免表單提交

來源

2016-12-29 19:54:34

moving preventDefault（）沒有幫助，仍然以相同的方式顯示它。 –

立即查看！做一些改變，然後告訴 –

你的代碼對我來說似乎沒有問題 –

解決：這個問題是我沒有把jQuery的內部

jQuery(document).ready(function(){});

來源

2016-12-29 21:55:22

從Ajax返回的JSON問題

回答

相關問題