171202之ajax提交整个form表单(二)

最新推荐文章于 2024-08-10 10:11:23 发布

更好的自己520

最新推荐文章于 2024-08-10 10:11:23 发布

阅读量858

点赞数 1

分类专栏：实习博客文章标签： jquery ajax 表单数据

本文链接：https://blog.csdn.net/a3060858469/article/details/78697370

版权

实习博客专栏收录该内容

44 篇文章 0 订阅

订阅专栏

表单提交方法有三种，主要说下第三种
第一种：用 form 自带属性action 提交

  <form action="/servlet/query" method="post" id="myForm">
       <input type="text" name="userName" id="userName"/>
       <input type="submit" id="btnSubmit" value="提交"/>
  </form>

第二种：用 jquery 提交：$("#formid").submit();
jquery提交表单有两种情况：
1：jquery只做提交用。$("form").submit();
这个的表单提交到什么地方的是更具form元素里面的action属性去定义的。
2：jquery用ajax提交数据。

$.ajax({
    type:"post",
    url:"xxx.php",      // 这里是提交到什么地方的url
    data:{},            // 这里把表单里面的数据放在这里传到后台
    dataType:"json",
    success:function(res){
        // 调用回调函数
    }
});

第三种：用 ajax 提交：
但如果form表单中数据很多时，不可能一一列出，只需要用
$(‘#yourformid’).serialize()就可以了
举例如下：

$.ajax({
    cache: true,
    type: "POST",
    url:  ajaxCallUrl,
    data: $('#yourformid').serialize(),// 你的formid
    async: false,
    error: function(request) {
        alert("Connection error");
    },
    success: function(data) {
        $("#commonLayout_appcreshi").parent().html(data);\
    }
});

这样的ajax

$.ajax({
                url:"${pageContext.request.contextPath}/public/testupload",
                type:"post",
                data:{username:username},
                success:function(data){
                    window.clearInterval(timer);
                    console.log("over..");
                },
                error:function(e){
                    alert("错误！！");
                    window.clearInterval(timer);
                }
            });

同样的，很多人也会。但是写的越多就越会发现，这样子虽然可以避免刷新页面，但是我们要写大量的js来到得数据：

var username = $("#username").val();
var password = $("#password").val();
...

如果数量少的话，那还没有什么，但是如果数据十分大的话，那就十分的麻烦
，那有没有什么简单的方法呢？答案肯定有的！下面介绍两种方法，可以极大
的提高开发人员的效率。

方法一：使用FormData对象

注意：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"));
            $.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();//此处为上传文件的进度条
        }