前端学习笔记--AJAX的应用(三)form表单改为AJAX提交
2017-07-23 13:56
661 查看
参考博客:http://www.cnblogs.com/bubbleStar/p/6060415.html
参考博客:http://blog.csdn.net/u011458469/article/details/48134581
一、form表单改成AJAX提交
原来的form格式
修改成AJAX提交的流程
将form元素的属性action和method去掉,添加id=”myForm”,form元素就变为
将提交按钮的button的type=”submit”改为type=”button”,增加 id
在js文件中写入
参考博客:http://blog.csdn.net/u011458469/article/details/48134581
一、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提交的流程
将form元素的属性action和method去掉,添加id=”myForm”,form元素就变为
<form id="myForm">
将提交按钮的button的type=”submit”改为type=”button”,增加 id
在js文件中写入
$("#按键的id").click(function () { $.ajax({ type: "POST", //提交的方法 url:"/home/request", //提交的地址 data:$('#fm').serialize(),// 序列化表单值 async: false, error: function(request) { //失败的话 alert("Connection error"); }, success: function(data) { //成功 alert(data); //就将返回的数据显示出来 window.location.href="跳转页面" } }); });
相关文章推荐
- JSP学习笔记:用multipart/form-data提交表单get非文件字段获取的解决办法
- ajax,异步提交form表单,从后台返回值到前端
- ExtJS学习笔记(5)- Form表单的提交 -Ext.FormPanel
- 20151223jquery学习笔记--Ajax表单提交
- 今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式
- struts2——学习笔记2 通过form表单方式或者js的方式提交请求,封装boolean值的问题
- Java学习笔记33--ajax提交表单
- form表单改为AJAX提交
- jQuery Form 表单提交插件-----ajaxSubmit() 的应用
- jQuery学习笔记---阻止事件发生及事件发生顺序及表单提交示例应用
- jQuery Form 表单提交插件-----ajaxForm() 的应用
- 学习笔记_springmvc返回值、数据写到页面、表单提交、ajax、重定向
- 当button按钮放入form表单进行ajax提交遇到的诡异问题
- ajax提交form表单资料详细汇总
- ajax提交form表单,关键代码:$("#theForm").serialize()
- ajax下提交form表单不能使用submit
- 用jquery.form ajax提交文件上传表单
- jQuery实现Ajax提交form表单的简单方法
- ajax提交整个form表单
- 沫沫金 - jQuery序列化form表单【支持ajax提交form对象表单entity.xxx】