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

Question

Я ожидаю, что это легко, но я нигде не нахожу простого объяснения того, как это сделать. У меня есть стандартная форма 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) отправлял форму в действие формы (process_form.json) и получал ответ JSON от сервера. Затем у меня будет функция javascript, которая запускается в ответ на JSON-ответ, например

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

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

Answer 1

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

Пример:

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

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

Answer 2

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

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

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

Answer 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>');
    });
});

• http://api.jquery.com/jQuery.getJSON/
• http://api.jquery.com/serialize/