JavaScript—异步提交表单的6种方式

最新推荐文章于 2023-05-13 08:36:41 发布

LiTianao88

最新推荐文章于 2023-05-13 08:36:41 发布

阅读量1.1k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_34120041/article/details/77877853

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在学习异步提交表单之前，先来学习几个JQuery方法和属性。

1、serialize()：序列表格内容为字符串。如下：

queryBean.orderBy=OPERATE_TIME&queryBean.orderSequnce=DESC&queryBean.title=&queryBean.province=&queryBean.city=&selectID=ad78f509f2bc412fb9fe16e36d227a11&queryBean.orderBy=OPERATE_TIME&queryBean.orderSequnce=DESC&queryBean.page.intPage=1

2、serializeArray()：序列化表格元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。

注意，此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。

返回的JSON对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对——name参数和value参数（如果value不为空的话）。举例来说：

[
    {
        "name": "firstname", 
        "value": "Hello"
    }, 
    {
        "name": "lastname", 
        "value": "World"
    }, 
    {
        "name": "alias"
    }
]

3、data属性：发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 “&foo=bar1&foo=bar2”。

4、dataType属性：预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

“xml”: 返回 XML 文档，可用 jQuery 处理。

“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了”cache”参数。”’注意：”’在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)。

“json”: 返回 JSON 数据。

“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

“text”: 返回纯文本字符串

一、ajax方式

<script type="text/javaScript">
　　  $.ajax({
        url:"mobileSurveyAction_addSurvey.action",//提交地址
        data:$("#form1").serialize(),//将表单数据序列化
        type:"POST",
        dataType:"json",
        success:function(result){
            if (result.success == '100'){
                $("#mySection").hide();
                $(".footer").hide();
                $("#alertMsg").show();
            }else{
                alert("失败！");
            }
        }
    });
</script>

二、submit方式

有时在A页面点击按钮弹出一个form表单，在填完表单后提交成功后，需要关闭表单页并将表单中的某些值反应在A页面上，这时就需要异步提交表单。其实也挺简单，只是需要把表单数据序列化。

<script type="text/javaScript">
　　  $("#form1").submit(function (){ 
　　      var ajax_url = "yourActionUrl"; //表单目标 
　　      var ajax_type = $(this).attr('method'); //提交方法 
　　      var ajax_data = $(this).serialize(); //表单数据 

　　      $.ajax({ 
    　　       type:ajax_type, //表单提交类型 
    　　       url:ajax_url, //表单提交目标 
    　　       data:ajax_data, //表单数据
    　　       success:function(msg){
        　　        if(msg == 'success'){//msg 是后台调用action时，你传过来的参数
            　　         //do things here
            　　         window.close();
        　　        }else{
                       //do things here
        　　        }
    　　       } 
　　      }); 
　　      //return false; //阻止表单的默认提交事件 
    });
</script>

三、submit方式2

<html>
<head>
<script type="text/javaScript">
　　  jQuery(document).ready(function (){
　　     jQuery('#search_form').bind("submit", function(){
        　　         var key_word = jQuery("#keyword").val();
        　　         if(key_word == ""){ 
        　　           return false; 
        　　        }
        　　         var options = {
            　　                url: '/portrait/user_info_display?user_info_keyword=' + key_word,
            　　                type: 'post',
            　　                dataType: 'text',
            　　                data: $("#search_form").serialize(),
            　　                success: function (data) {
            　　                      if (data.length > 0){
            　　                          jQuery("#user_info").html(data);
            　　                      }
            　　                }
        　　         };
        　　         $.ajax(options);
        　　         return false;
　　          });

    　$('#search').click(function(){
            $('#search_form').submit();
    　　   });
　　});
</script>
</head>
<body>
    <form mothod="post" id="search_form">
        <div class="cf">
            <label class="search-bar">
                <input id="keyword" placeholder="请输入搜索关键词" name="user_info_keyword" type="text" value="" class="input-search">
                <a id="search" class="btn-search">
                    <i class="icon-search"></i>
                </a>
                <a href="javascript:;" class="btn-more"></a>
            </label>
        </div>
    </form>
</body>
</html>

代码完成了两个功能：1.输入关键词后按回车，会向server发送一个POST请求，然后异步提交表单，刷新部分页面；2.输入关键词后，点击查询按钮，也可异步刷新部分页面。

此时要注意表单提交后发送的是POST请求，而点击按钮会发送一个GET请求，所以我们可以通过jQuery，使得按钮点击时触发表单提交，这样后端就不用再写代码处理GET请求。

四、隐藏的iframe模拟异步上传

为什么在这里说的是模拟呢?因为我们其实是将返回结果放在了一个隐藏的iframe中，所以才没有使当前页面跳转，感觉就像是异步操作一样。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="UTF-">
<title>隐藏的iframe上传文件</title>
<script type="text/javascript" src="jquery路径..."></script>
</head>
<body>
    <iframe name="frm" style="display: none"></iframe>
    <form action="/upload" enctype="multipart/form-data" method="post" target="frm" onsubmit="loading(true);">
        <p id="upfile">
            附件： <input type="file" name="myfile" style="display: inline">
        </p>
        <p id="upbtn">
            <input style="padding-left: px; padding-right: px;" type="submit" value="异步上传">
            <span id="uptxt" style="display: none">正在上传...</span>
        </p>
    </form>
    <div id="flist" style="border: px dotted darkgray;"></div>
    <script>
        // 上传完成后的回调
        function uploadFinished(fileName) {
            addToFlist(fileName);
            loading(false);
        }

        function addToFlist(fname) {
            var temp = ["<p id='" + fname + "'>",fname,"<button onclick='delFile(\""+fname+"\");'>删除</button>","</p>"];
            $("#flist").append(temp.join(""));
        }

        function loading(showloading) {
            if (showloading) {
                $("#uptxt").show();
            } else {
                $("#uptxt").hide();
            }
        }
    </script>
</body>
</html>

这种技术有两个关键的地方:

form会指定target,提交的结果定向返回到隐藏的ifram中。(即form的target与iframe的name属性一致)。
提交完成后，iframe中页面与主页面通信，通知上传结果及服务端文件信息.

如何与主页面通信呢?
　　我们用nodejs在接收完了文件后返回了一个window.parent.主页面定义的方法，执行后可以得知文件上传完成。代码很简单:

router.post('/upload', multipartMiddleware, function(req, res) {
    var fpath = req.files.myfile.path;
    var fname = fpath.substr(fpath.lastIndexOf('\\') + );
    setTimeout(function() {
        var ret = ["<script>","window.parent.uploadFinished('"+fname+"');","</script>"];
        res.send(ret.join(""));
    }, );
});

五、使用XMLHttpRequest2来进行真正的异步上传

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>xhr level 异步上传</title>
<script type="text/javascript" src="jquery路径..."></script>
</head>
<body>
<div>
    <p id="upfile">
        附件： <input type="file" id="myfile" style="display: inline">
    </p>
    <p id="upbtn">
        <input style="padding-left: px; padding-right: px;" type="button" value="异步上传" onclick="upload();">
        <span id="uptxt" style="display: none">正在上传...</span>
        <span id="upprog"></span>
        <button id="stopbtn" style="display: none;">停止上传</button>
    </p>
</div>
<div id="flist" style="border: px dotted darkgray;"></div>

<script>
function upload() {
    // 准备FormData
    var fd = new FormData();
    fd.append("myfile", $("#myfile")[0].files[0]);

    // 创建xhr对象
    var xhr = new XMLHttpRequest();
    // 监听状态，实时响应
    // xhr 和 xhr.upload 都有progress事件，xhr.progress是下载进度，xhr.upload.progress是上传进度
    xhr.upload.onprogress = function(event) {
        if (event.lengthComputable) {
            var percent = Math.round(event.loaded / event.total);
            console.log('%d%', percent);
            $("#upprog").text(percent);
        }
    };
    // 传输开始事件
    xhr.onloadstart = function(event) {
        console.log('load start');
        $("#upprog").text('开始上传');

        $("#stopbtn").one('click', function() {
            xhr.abort();
            $(this).hide();
        });

        loading(true);
    };
    // ajax过程成功完成事件
    xhr.onload = function(event) {
        console.log('load success');
        $("#upprog").text('上传成功');

        console.log(xhr.responseText);
        var ret = JSON.parse(xhr.responseText);
        addToFlist(ret.fname);
    };
    // ajax过程发生错误事件
    xhr.onerror = function(event) {
        console.log('error');
        $("#upprog").text('发生错误');
    };
    // ajax被取消
    xhr.onabort = function(event) {
        console.log('abort');
        $("#upprog").text('操作被取消');
    };
    // loadend传输结束，不管成功失败都会被触发
    xhr.onloadend = function (event) {
        console.log('load end');
        loading(false);
    };
    // 发起ajax请求传送数据
    xhr.open('POST', '/upload', true);
    xhr.send(fd);
}
function addToFlist(fname) {
    var temp = ["<p id='" + fname + "'>",fname,"<button onclick='delFile(\"" + fname + "\");'>删除</button>","</p>"];
    $("#flist").append(temp.join(""));
}
function delFile(fname) {
    console.log('to delete file: ' + fname);
    // TODO: 请实现
}
function loading(showloading) {
    if (showloading) {
        $("#uptxt").show();
        $("#stopbtn").show();
    } else {
        $("#uptxt").hide();
        $("#stopbtn").hide();
    }
}
</script>
</body>
</html>

　　代码有点多，但是通俗易懂。使用过AJAX的人都知道，XHR对象提供了一个onreadystatechange的回调方法来监听整个请求/响应过程。在XMLHttpRequest2级规范中又多了几个进度事件。有以下6个事件:
　　1.loadstart: 在接收到响应数据的第一个字节时触发。
　　2.progress: 在接收响应期间持续不断地触发。
　　3.error: 在请求发生错误时触发。
　　4.abort: 在因为调用abort()方法而终止连接时触发。
　　5.load: 在接收到完整的响应数据时触发。
　　6.loadend: 在通信完成或者触发error,abort,load事件后触发。
　　
　　这次我们可以解读代码:当传输事件开始后，我们便在停止传送按钮上添加点击事件，内置了abort方法可以停止传送。若不点则会正常上传直到传送完毕为止。其后台代码类似第二种方法。

LiTianao88

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript—异步提交表单的6种方式

在学习异步提交表单之前，先来学习几个JQuery方法和属性。1、serialize()：序列表格内容为字符串。如下：queryBean.orderBy=OPERATE_TIME&queryBean.orderSequnce=DESC&queryBean.title=&queryBean.province=&queryBean.city=&selectID=ad78f509f2bc412
复制链接

扫一扫