码迷,mamicode.com
首页 > Web开发 > 详细

使用ajax提交form表单

时间:2018-11-02 17:55:01      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:写入   mda   title   value   element   错误   open   success   上传文件   

使用FormData对象

FormData对象是html5的一个对象,目前的一些主流的浏览器都已经兼容,非常的强大

FormData可以凭空创建一个对象,然后往这个对象里面添加数据,然后直接提交,不需要写一行html代码,如下:

var form = new FormData();
form.append("username","zxj");
form.append("password",123456);
var req = new XMLHttpRequest();
req.open("post", "${pageContext.request.contextPath}/public/testupload", false);
req.send(form);

 

这样就可以向浏览器发送表单数据了,或者也可以使用Jquery这样发送:

 var form = new FormData();
  form.append("username","zxj");
  form.append("password",123456);
 $.ajax({
                url:"${pageContext.request.contextPath}/public/testupload",
                type:"post",
                data:form,
                processData:false,
                contentType:false,
                success:function(data){
                    window.clearInterval(timer);
                    console.log("over..");
                }
});
技术分享图片

FormData还支持直接从html中的表单生成数据,就是在html页面中已经有数据了,然后FormData可以直接把这个表单的数据写入这个对象,然后直接提交给后台

代码如下,先给出html代码:

<form id="tf">
            <input type="file" name="img"/>
            <input type="text" name="username"/>
            <input type="button" value="提" onclick="test();"/>
                        .............
 </form>

FormData还支持困扰众多开发者已久的ajax的上传文件,以前我们上传文件,需要写一个表单直接刷新提交,但是这里不需要,下面给出提交代码:

  function test(){
            var form = new FormData(document.getElementById("tf"));
//             var req = new XMLHttpRequest();
//             req.open("post", "${pageContext.request.contextPath}/public/testupload", false);
//             req.send(form);
            $.ajax({
                url:"${pageContext.request.contextPath}/public/testupload",
                type:"post",
                data:form,
                processData:false,
                contentType:false,
                success:function(data){
                    window.clearInterval(timer);
                    console.log("over..");
                },
                error:function(e){
                    alert("错误!!");
                    window.clearInterval(timer);
                }
            });        
            get();//此处为上传文件的进度条
        }


 

 

使用ajax提交form表单

标签:写入   mda   title   value   element   错误   open   success   上传文件   

原文地址:https://www.cnblogs.com/freyfeng/p/9897441.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!