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,如需转载请自行联系原作者
目录
相关文章
|
6月前
|
存储 前端开发 JavaScript
HTTP进阶,Cookie,响应的回报结果含义,ajax,form表单,不同状态码代表的结果
HTTP进阶,Cookie,响应的回报结果含义,ajax,form表单,不同状态码代表的结果
HTTP进阶,Cookie,响应的回报结果含义,ajax,form表单,不同状态码代表的结果
|
10月前
|
JavaScript 前端开发
Form表单利用Jquery Validate验证以及ajax提交
Form表单利用Jquery Validate验证以及ajax提交
50 0
|
12月前
|
JSON 前端开发 数据格式
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(下)
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(下)
|
12月前
|
前端开发 Java API
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(上)
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(上)
135 0
|
SQL 前端开发 数据库
Yii2.0的模型表单、活动表单和AJAX表单是干什么的?底层原理是什么?
Yii2.0的模型表单、活动表单和AJAX表单是干什么的?底层原理是什么?
|
数据采集 SQL 前端开发
【jquery Ajax 】form表单教学+评论案例
【jquery Ajax 】form表单教学+评论案例
120 0
【jquery Ajax 】form表单教学+评论案例
|
前端开发
pbootcms使用Ajax无刷新提交留言及表单
pbootcms使用Ajax无刷新提交留言及表单
418 0
|
JSON 前端开发 API
pbootcms使用Ajax无刷新提交留言及表单
pbootcms使用Ajax无刷新提交留言及表单
301 0
|
JavaScript 前端开发 PHP
jquery $.post 序列化表单ajax提交
jquery $.post 序列化表单ajax提交
95 0
|
JavaScript 前端开发 Python
Django中ajax技术和form表单两种方式向后端提交文件
一、Form表单方式提交: form表单提交文件或者图像时需要对form中的属性进行如下设置: 1、method="post" //提交方式 post 2、enctype="multipart/form-data" //不对字符编码。
1898 0