表单异步提交不返回响应数据总结
来源:互联网 发布:js仿京东商品详情 编辑:程序博客网 时间:2024/06/06 16:33
昨天和我一起学习的小伙伴让我给他解决一个问题,我花了一个下午才搞出来了,一开始一点头绪也没有,后来自己研究代码才发现原来就是表单异步提交的同时没有阻止表单提交给当前页面。导致页面刷新,异步请求还没有来的及响应就失效了。接下来我就自己总结一下表单的同步提交方式和异步提交方式。
一、首先说一说表单的同步提交方式
<form id="newsForm" action="提交的资源地址" method="post" enctype="multipart/form-data">
<p> //action=“资源地址”
<label> 主题 </label>
<select name="ntid" id="ntid">
<option value="0">--请选择--</option>
</select>
</p>
<p>
<label> 标题 </label> <input name="ntitle" type="text"
class="opt_input" />
</p>
<p>
<label> 作者 </label> <input name="nauthor" type="text"
class="opt_input" />
</p>
<input name="action" type="hidden" value="addnews"> <input
type="submit" value="提交" class="opt_sub" /> <input type="reset"
value="重置" class="opt_sub" />
</form>
表单提交的关键就是设置<form>元素的action属性,action设置的就是表单提交的地址。在该地址中对于表单提交的参数进行存储或者其他的操作。
二、接下来就总结一下昨天坑了我一个下午的表单异步提交吧。
1.首先昨天小伙伴的表单的代码是这样的
<form onsubmit="user_login()">
<h2 >用户登录</h2>
<br/><br/>
<label >用户名</label>
<input id="uname" type="text" name="uname" >
<label class="sr-only">Password</label>
<input id="upwd" type="password" name="upwd" >
<input type="submit" value="登录" />
</form>
//异步登陆处理
function user_login(){
var uname=$("#uname").val();
var upwd=$("#upwd").val();
alert(uname+"="+upwd);
//异步请求login资源 未执行
$.get("login","name="+uname+"&pwd="+upwd,function(data){
alert("真假"+data.success);
if(data.success){
alert("我是true");
location.href="my.jsp";
}else{
alert("我是false");
location.href="my.jsp";
}
},"json");
}
如上面我的小伙伴的代码执行过程如图所示:
2.后来我又自己在异步请求下面加上了一句输出的话:
function user_login(){
var uname=$("#uname").val();
var upwd=$("#upwd").val();
alert(uname+"="+upwd);
//异步请求login资源 未执行
$.get("login","name="+uname+"&pwd="+upwd,function(data){
alert("真假"+data.success);
if(data.success){
alert("我是true");
location.href="my.jsp";
}else{
alert("我是false");
location.href="my.jsp";
}
},"json");
//弹出一个提示框
alert("我的异步请求有响应吗?");
}
3.最后我尝试了在提交函数中返回false,为什么返回false,意思是表不提交给当前页面,所以当前页面不会刷新。此时表单提交的执行过程如下:
<form onsubmit="return user_login()">
<h2 >用户登录</h2>
<br/><br/>
<label >用户名</label>
<input id="uname" type="text" name="uname" >
<label class="sr-only">Password</label>
<input id="upwd" type="password" name="upwd" >
<input type="submit" value="登录" />
</form>
//表单提交处理函数
function user_login(){
var uname=$("#uname").val();
var upwd=$("#upwd").val();
alert(uname+"="+upwd);
$.get("login","name="+uname+"&pwd="+upwd,function(data){
alert("真假"+data.success);
if(data.success){
alert("我是true");
location.href="my.jsp";
}else{
alert("我是false");
location.href="my.jsp";
}
},"json");
alert("我的异步请求有吗");
return false;
}
终于解决了小伙伴的问题,和大家共享一下。
- 表单异步提交不返回响应数据总结
- EasyUI的Form表单异步提交问题-ThinkPHP5对EasyUI异步表单不返回json
- form表单提交返回数据
- springmvc中异步发送表单数据到Bean,并响应JSON文本返回
- SpringMVC 异步发送表单数据到JavaBean,并响应JSON文本返回
- Springmvc异步发送表单数据到JavaBean,并响应JSON文本返回 (14)
- springmvc中,异步发送表单数据到Action,并响应Json文本返回(后端代码)
- 【SpringMVC】异步发送表单数据到JavaBean,并响应JSON文本返回(十七)
- Form表单异步提交,不刷新页面
- Ajax异步提交表单数据简单方法
- Ajax异步提交表单数据简单方法
- (23)ExtJS之表单数据异步提交
- php表单,HTML表单提交后,返回,保留表单数据
- form表单异步提交序列化表单数据
- Jquery带返回值的异步提交表单
- Form表单提交数据不跳转
- Form表单ajax提交数据不跳转
- ajax提交表单数据不跳转
- 设计模式之简单工厂模式
- 采访 Lua 发明人的一篇文章
- 精实创业:让疯狂烧钱见鬼去吧
- javascript笔记之express初体验
- UIFont 兼容所以版本
- 表单异步提交不返回响应数据总结
- 从网上获取数据转换成byte[]数组
- 62.Odd Even Linked List
- POJ 2243 - Knight Moves (A*)
- hdu2050
- 5.6 array--高效的数值类型数组
- [微积分学习]Day 6.数列的极限
- 线段树系列(数据结构)
- Session对象不必须依赖Cookie