Отправьте форму и получите ответ JSON с помощью jQuery

Я ожидаю, что это будет легко, но я не нахожу простого объяснения, как это сделать. У меня есть стандартная HTML-форма:

<form name="new_post" action="process_form.json" method=POST>
      <label>Title:</label>
      <input id="post_title" name="post.title" type="text" /><br/>

      <label>Name:</label><br/>
      <input id="post_name" name="post.name" type="text" /><br/>

      <label>Content:</label><br/>
      <textarea cols="40" id="post_content" name="post.content" rows="20"></textarea>
    <input id="new_post_submit" type="submit" value="Create" />
</form>

Я хочу, чтобы javascript (используя jQuery) передал форму форме action (process_form.json) и получил ответ JSON с сервера. Тогда у меня будет функция javascript, которая запускается в ответ на ответ JSON, например

  function form_success(json) {
     alert('Your form submission worked');
     // process json response
  }

Как подключить кнопку отправки формы для вызова метода form_success, когда это делается? Также он должен переопределить собственную навигацию браузера, так как я не хочу покидать страницу. Или я должен переместить кнопку из формы, чтобы сделать это?

Ответы

Ответ 1

Если вы хотите получить ответ в обратном вызове, вы не можете публиковать форму. Проводка формы означает, что ответ загружается как страница. Вы должны получить данные формы из полей в форме и сделать запрос AJAX.

Пример:

$(function(){
  $('form[name=new_post]').submit(function(){
    $.post($(this).attr('action'), $(this).serialize(), function(json) {
      alert(json);
    }, 'json');
    return false;
  });
});

Обратите внимание, что вы должны вернуть false из метода, который обрабатывает событие отправки, иначе форма также будет опубликована.

Ответ 2

Если вам нужен запрос POST, используйте jQuery.post(), передав четвертый аргумент "json" 

$(function(){
  $("form").submit(function(){
    $.post($(this).attr("action"), $(this).serialize(), function(jsonData){
      console.log(jsonData);
    }, "json");
  });
});

Гуффа был быстрее меня:)

Ответ 3

Пробовали ли вы использовать .getJSON() и .serialize()?

$('form').submit(function() {
    $.getJSON('ajax/test.json?' + $(this).serialize(), function(data) {
      $('.result').html('<p>' + data.foo + '</p>'
        + '<p>' + data.baz[1] + '</p>');
    });
});