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的异步的提交