Проблема с JSON вернулась из Ajax

Question

Я создал страницу (в WordPress), которая должна отправить форму через AJAX, но всякий раз, когда форма отправляется, 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> 

Вот Аякса, который направляющее форму:

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, поэтому я не удивлюсь, если это что-то простое.

Редактировать:: JQuery включен в проект. Я не получаю никаких ошибок javascript, но при дальнейшей проверке я вижу это сообщение в консоли, когда я нажимаю кнопку «Отправить»:

«Ресурс интерпретируется как Документ, но передается с применением MIME-типа/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(){});