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

Form表单实现异步的提交相关推荐

php阻止form提交表单提交,防止表单提交时刷新页面-阻止form表单的默认提交行为...
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
php表单转json对象,form表单转Json提交的方法(推荐)
form表单转Json提交的方法(推荐) 先将表单数值转换成数组存储,存储成的格式为[{"name":"","value":"&q ...
Form表单之get提交与post提交
Form表单之get提交与post提交 Form表单的属性action 与method: 属性值 ...
form表单用butten提交后无反应表单提交三种方式
form表单用butten提交后无反应&表单提交三种方式一,表单提交无反应有时候,我们发现表单提交的butten按钮,根本就没niao用.鼠标都点烂了,也提交不上去.找了半天什么错误也没找 ...
form表单的多种提交方式及提交前验证
以下是本人总结处来的一些form的提交方式,网上还有别的提交方式,这里我总结了大小分为7类,其实就是三类的提交方式,若有哪里不对的,还请评论指出来,大家一起学习学习 1.无任何验证提交(最普通的提交) ...
jquery表单ajax json数据,jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...
form表单的多种提交方式
在项目开发中自己总结的form表单的集中提交方式: 1,<input type="submit"> 提交按钮提交表单. 例: <!DOCTYPE html> ...
利用beforeSend实现提交加载中、form表单的重复提交等前端功能
前文在用JQ+bootstrap写前端的时候,有时需要实现点击按钮后失效的功能,比如下载按钮,为了避免网络延迟而引起的页面不及时跳转,让用户多次点击按钮,造成的服务器压力和用户体验就都不友好.发 ...
Form表单回车(Enter)提交表单问题
Form表单回车(Enter)提交表单问题在Form表单中input会自动响应回车事件.这是表单的默认提交动作. 表单的提交行为,可以用两种方式定义,一是form表单自身,二是form表单的but ...

Form表单实现异步的提交

Form表单实现异步的提交

问题描述

解决方式

Form表单实现异步的提交相关推荐

最新文章

热门文章