form表单AJAX提交

　

ajax提交form表单

参考文章：

http://blog.csdn.net/qq_28877125/article/details/75907422

http://blog.csdn.net/it_cookie_sam/article/details/52722881

一般来说form表单提交在前期学习，会是这个样子的

原来的form格式

<form action="xxx" method="get">  //action的值是请求的url地址
    <p class="form-group">
        <label for="name">姓名</label>
        <input type="text" class="form-control" name="name">
    </p>
    <p class="form-group">
        <label for="jobNumber">工号</label>
        <input type="number" class="form-control" name="jobNumber">
    </p>
    <p class="form-group">
        <label for="nation">民族</label>
        <input type="text" class="form-control" name="nation">
    </p>
    <p class="form-group">
        <label for="gender">性别</label>
        <input type="text" class="form-control" name="gender">
    </p>
    <p class="modal-footer">
    　<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
　　　<button type="submit" class="btn btn-primary">提交</button>　
    </p>
</form> 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

修改之前，在后台获取提交的数据，获取的是表中的name值，下面是个例子

大致的内容如下：

<form action="xxxxxxx.do" >
<input name="name" value="哈哈"/>
<input type="submit" value="提交"/>
</form>
这个form提交请求后，在你的action中
String name = request.getparameter("name"); 
那么name的值就是“哈哈”

修改成AJAX提交的流程

1. 将form元素的属性action和method去掉，添加id=”myForm”,form元素就变为<form id="myForm">

2. 将提交按钮的button的type=”submit”改为type=”button”，增加 id

3. 在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="跳转页面"  
            }  
         });
       });  

相关阅读

ajaxFileUpload.js 上传 图片

<input type="file id=“file1” name=“file” οnchange="ajaxFileUpload(“要上传图片的区域”)” />function ajaxFileUploa

ajaxfileupload.js异步上传文件插件(完整demo)

ajaxfileupload.js异步上传文件插件 HTML: <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"

【转载】Ajax与Controller数据交互

转自：https://www.cnblogs.com/kasi/p/8443289.html 1.概念 在ssm框架下实现Ajax与Controller之间各种类型数据的数据交互,从Ajax

idea 如何优雅的添加.ignore 忽略不必要提交的文件

最近有点时间然后就跑去搜了下idea热门的插件，一不小心发现了一个.ignore插件。有过在idea使用git都知道.gitignore文件，而这个插件

百度站长平台sitemap站点地图提交工具测试吐槽

百度站长平台测试版开放注册了，9月16日获得了这个消息。如今一周过去了，关于百度站长平台资讯方面介绍较多，鲜有测试试用报告出现，更