我希望这很容易,但我没有在任何地方找到如何做到这一点的简单解释。我有一个像这样的标准 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 方法?它还应该覆盖浏览器自己的导航,因为我不想离开页面。或者我应该将按钮移出表单来执行此操作?
最佳答案
如果您想在回调中获得响应,则无法发布表单。发布表单意味着响应将作为页面加载。您必须从表单中的字段获取表单数据并发出 AJAX 请求。
示例:
$(function(){
$('form[name=new_post]').submit(function(){
$.post($(this).attr('action'), $(this).serialize(), function(json) {
alert(json);
}, 'json');
return false;
});
});
请注意,您必须从处理提交事件的方法返回false
,否则表单也会被发布。
关于javascript - 使用 jQuery 提交表单并获取 JSON 响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2960321/