ajax提交表单极简姿势

简介:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type= "text/javascript" >
     function  submitform() {
         var  action_url = $( 'form[name="form-oem-add"]' ).attr( 'action' );
         var  action_type = $( 'form[name="form-oem-add"]' ).attr( 'method' );
         //var post_data = $('form[name="form-oem-add"]').serialize();
         var  post_data =  new  FormData($( 'form[name="form-oem-add"]' )[0]);
 
         $.ajax({
             type: action_type.toUpperCase(),
             url: action_url,
             data: post_data, // 要提交的表单
             async: false,
             cache: false,
             contentType: false,
             processData: false,
             success:  function  (msg) {
                 if  (msg.errorCode == 1) {
                     popx(msg.errorMsg, 5);
                 else  {
                     popx( '新建成功' , 5);
                 }
             }
         });
     }
</script>



需要注意的是:

  1. 表单中的三个属性缺一不可
    <form name="" action="" method="">


    表单中不存在文件域时,可以直接利用jquery的序列化来打包数据

    var post_data = $('form[name="form-oem-add"]').serialize()


    表单中存在文件域时,可以利用html5的Form Data 对象打包数据

    var post_data = new FormData($('form[name="form-oem-add"]')[0])










本文转自 hgditren 51CTO博客,原文链接:http://blog.51cto.com/phpme/1972928,如需转载请自行联系原作者
目录
相关文章
|
4月前
|
XML 前端开发 JavaScript
php中Ajax的简单使用,登录表单调用Ajax判断是否正确登录利用layer.msg进行提示
本文介绍了在PHP中如何使用Ajax进行登录表单的数据提交,并利用jQuery的$.post()方法与后端通信,以及使用layer.msg进行前端提示。
php中Ajax的简单使用,登录表单调用Ajax判断是否正确登录利用layer.msg进行提示
|
5月前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
285 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
存储 前端开发 JavaScript
HTTP进阶,Cookie,响应的回报结果含义,ajax,form表单,不同状态码代表的结果
HTTP进阶,Cookie,响应的回报结果含义,ajax,form表单,不同状态码代表的结果
HTTP进阶,Cookie,响应的回报结果含义,ajax,form表单,不同状态码代表的结果
|
JavaScript 前端开发
Form表单利用Jquery Validate验证以及ajax提交
Form表单利用Jquery Validate验证以及ajax提交
98 0
|
JSON 前端开发 数据格式
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(下)
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(下)
126 0
|
前端开发 Java API
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(上)
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(上)
189 0
|
SQL 前端开发 数据库
Yii2.0的模型表单、活动表单和AJAX表单是干什么的?底层原理是什么?
Yii2.0的模型表单、活动表单和AJAX表单是干什么的?底层原理是什么?
119 0
|
数据采集 SQL 前端开发
【jquery Ajax 】form表单教学+评论案例
【jquery Ajax 】form表单教学+评论案例
181 0
【jquery Ajax 】form表单教学+评论案例
|
前端开发
js-base64转换为file对象,ajax提交表单FormData
js-base64转换为file对象,ajax提交表单FormData
255 0
|
前端开发
pbootcms使用Ajax无刷新提交留言及表单
pbootcms使用Ajax无刷新提交留言及表单
490 0