Form表单实现异步的提交

Form表单实现异步的提交

---

问题描述

<form>标签的一般情况下的默认写法是

<!-- 在method写提交方式 action写Servlet-->
<form method="" action="">
</form>

但是这样提交form表单是非异步提交，在servlet不改变url的情况下，相当于重新刷新页面，这样就会导致几个问题：
1.浪费额外的链接资源
2.如果本页面还存在以前请求返回有用数据，这些数据也会被刷新
所以有时要实现Form表单的提交是非常有用的

---

解决方式

一、通过<iframe>伪异步提交

<form method="" action="" target="nm_iframe">
</form>
<iframe name="nm_iframe" style="display:none;">
</iframe>

注：此时form进行的刷新是在iframe中进行的，返回的数据也是这里面会显示（如返回的404的错误页面）
二、通过Ajax实现异步提交
<form>标签只填写id

<!-- THML代码 -->
<form id="Myform">
</form>

使用JS的Ajax方式

//JS代码
//使用jquery 此处我只展示POST的提交，其他同理
$.post("//servlet", $('#Myform').serialize(),
            function (data, textStatus, jqXHR) {
                    //data 响应的数据
            },
            "json"
        );

这一种方式比较推荐，但是需要引入jquery，读者也可以使用js写源生Ajax的访问方式

---

以上两种方式都可以实现form的异步的提交