Отправьте форму и получите ответ 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), подвергают форму действию формы (process_form.json) и получают ответ JSON от сервера. Затем у меня будет функция JavaScript, которая работает в ответ на ответ JSON, как
function form_success(json) {
alert('Your form submission worked');
// process json response
}
Как я обеспечиваю электричеством кнопку отправки формы для вызова моего form_success метода при выполнении? Также это должно переопределить собственную навигацию браузера, так как я не хочу оставлять страницу. Или я должен переместить кнопку из формы, чтобы сделать это?
3 ответа
Если вы хотите получить ответ в виде обратного вызова, вы не можете опубликовать форму. Размещение формы означает, что ответ загружается как страница. Вам необходимо получить данные формы из полей формы и сделать запрос AJAX.
Пример:
$(function(){
$('form[name=new_post]').submit(function(){
$.post($(this).attr('action'), $(this).serialize(), function(json) {
alert(json);
}, 'json');
return false;
});
});
Обратите внимание, что вы должны вернуть false из метода, обрабатывающего событие отправки, в противном случае форма также будет опубликована.
Вы пробовали использовать .getJSON () и .serialize () ?
$('form').submit(function() {
$.getJSON('ajax/test.json?' + $(this).serialize(), function(data) {
$('.result').html('<p>' + data.foo + '</p>'
+ '<p>' + data.baz[1] + '</p>');
});
});
Если вам нужен POST-запрос, используйте jQuery.post () с передачей четвертого аргумента «json»
$(function(){
$("form").submit(function(){
$.post($(this).attr("action"), $(this).serialize(), function(jsonData){
console.log(jsonData);
}, "json");
});
});
Гуффа был быстрее меня :)