在做项目的过程中遇到要将form表单提交转为ajax方式提交,下面是我总结的如何把form表单提交无缝转为ajax方式提交的方法。
原先的form表单长这样:
<form action="xxx" method="get"> //action的值是请求的url地址 <div class="form-group"> <label for="name">姓名</label> <input type="text" class="form-control" name="name"> </div> <div class="form-group"> <label for="jobNumber">工号</label> <input type="number" class="form-control" name="jobNumber"> </div> <div class="form-group"> <label for="nation">民族</label> <input type="text" class="form-control" name="nation"> </div> <div class="form-group"> <label for="gender">性别</label> <input type="text" class="form-control" name="gender"> </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">提交</button>
</div>
</form>
要转化为ajax方式提交,需要做以下几个改变:
1. 将form元素的属性action和method去掉,添加id="myForm",form元素就变为<form id="myForm">
2. 将提交按钮的button的type="submit"改为type="button"
3. 在js文件中写入
$(function(){ $.ajax({ type : "GET", url : "xxx", success : function (data) { console.log(data); //data即为后台返回的数据 } });
这样,就可以愉快地将form表单提交的方式转为ajax请求的方式啦。
PS:如果想要在ajax请求中加入自定义的HTTP header,则在ajax请求中加入
beforeSend: function(request) { request.setRequestHeader("Content-type", "application/json");
//通过这种方法可以设置自定义HTTP头字段 },
相关推荐
jqueryformjs实现将form提交转为ajax方式提交的方法.docx
ajaxForm异步提交表单(含图片)ajaxForm异步提交表单(含图片)ajaxForm异步提交表单(含图片)
C# post方式提交Form表单。 C# post方式提交Form表单,可以支持带参数传入,供大家学习参考。 C# post提交表单。
主要介绍了jquery.form.js实现将form提交转为ajax方式提交的方法,涉及jQuery插件实现form表单的Ajax提交技巧,非常具有实用价值,需要的朋友可以参考下
php curl模仿form表单提交图片或文件 用的tp5做的例子
如下所示: form表单ID:postform 设置表单请求url document.postform.action = SaveReturnInfo...以上就是小编为大家带来的js 提交form表单和设置form表单请求路径的实现方法全部内容了,希望大家多多支持软件开发网~
ajax无刷新表单提交 2;ajax的运行历程 最简单明了的实例,清晰的帮你弄清上述概念,运行简单,只需解压该包,然后Myeclipse中file - import - general - import existed project to workspace,即可调试运行 调试...
使用AJAX提交Form表单实例演示
Ajax如何无刷新提交form里面的内容。
本文实例讲述了JS提交form表单。分享给大家供大家参考,具体如下: 一、javascript 页面加裁时自动提交表单: Form表单: <form method="post" id="myform" action="a.php"> <input type="submit" value=...
使用AJAX提交Form表单使用AJAX提交Form表单使用AJAX提交Form表单
今天小编就为大家分享一篇layui form表单提交之后重新加载数据表格的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
使用jQuery.form插件,实现完美的表单异步提交
主要介绍了Vue form 表单提交+ajax异步请求+分页效果,需要的朋友可以参考下
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传.
jquery.js + jquery-form.js + springMVC实现ajax提交form表单和上传图片,上传图片成功js可以获取图片保存相对路径。
完整的jq ajax提交表单,奖解压后jq文档加入页面中,调用就可惟了。 表单结构 <form id="myForm" action="comment.php" method="post"> Name: <input type="text" name="name" /> Comment: <...
Ajax表单提交插件jquery form