Question

我已经构建了一个应该通过AJAX提交表单的页面（在WordPress中），但是每当提交表单时，url都会更改为表单处理程序的url，它只显示它应该返回的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缺乏经验，所以如果它简单的话，我也不会感到惊讶。

Edit1 ：JQuery包含在项目中。我没有得到任何javascript错误，但在进一步检查时，我在控制台中看到此消息，当我单击提交时：

“资源被解释为文档但使用MIME类型application / json传输：”handler.php“。

Answer 1

<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()以避免表单提交。

Answer 2

解决：问题是我没有将jquery放入

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

从Ajax返回的JSON问题

2 个答案: