jquery ajax请求了两次问题
2016-04-12 16:10
471 查看
页面有一个请求form:
<form method="post" id="signin">
<label for="orderid">订单编号</label>
<input id="oid" name="orderid" value="" title="orderid" tabindex="4" type="text">
</p>
<p>
<label for="username">用户帐户</label>
<input id="username" name="username" value="" title="username" tabindex="5" type="text">
</p>
<p>
<label for="sendStatus">发货状态</label>
<select id="sendStatus">
<option value="-1">请选择</option>
<option value="0">未发送</option>
<option value="1">已发送</option>
</select>
</p>
<p>
<button type='submit' id='submit' onclick=showdatalist()>查询</button>
</p>
</form>
JavaScript请求部分:
function showdatalist()
{
var username = $("#username").val();
var orderid = $("#oid").val();
var sendStatus = $("#sendStatus").val();
var data = {"username" : username, "orderid" : orderid, "sendStatus" : sendStatus, "type" : "0"};
$.ajax({
url:"<%=path%>" + "/****",
type : "post",
data : data,
async : true,
success : function(obj)
{
console.dir(obj);
if (obj.success == true)
{
if (obj.obj == null || obj.obj.length < 1)
{
$("#content").html("");
}
else
{
$("#content").html("");
var content= obj.obj ;
var p = "";
var start = 0;
for (i = 0; i < content.length; i++)
{
//组装数据
}
}
}
}
});
}
控制台监测到两次请求:
![](https://images2015.cnblogs.com/blog/680152/201604/680152-20160412160757973-652068723.png)
原因:
发生两次提交的原因是在执行完ajax请求后,并没有阻止submit的行为,所以解决方法有两种:
1、不使用type为submit类型的按钮,而是使用type是button的按钮。
2、在showdatalist函数中,最后加一行return false;,即可阻止submit。
<form method="post" id="signin">
<label for="orderid">订单编号</label>
<input id="oid" name="orderid" value="" title="orderid" tabindex="4" type="text">
</p>
<p>
<label for="username">用户帐户</label>
<input id="username" name="username" value="" title="username" tabindex="5" type="text">
</p>
<p>
<label for="sendStatus">发货状态</label>
<select id="sendStatus">
<option value="-1">请选择</option>
<option value="0">未发送</option>
<option value="1">已发送</option>
</select>
</p>
<p>
<button type='submit' id='submit' onclick=showdatalist()>查询</button>
</p>
</form>
JavaScript请求部分:
function showdatalist()
{
var username = $("#username").val();
var orderid = $("#oid").val();
var sendStatus = $("#sendStatus").val();
var data = {"username" : username, "orderid" : orderid, "sendStatus" : sendStatus, "type" : "0"};
$.ajax({
url:"<%=path%>" + "/****",
type : "post",
data : data,
async : true,
success : function(obj)
{
console.dir(obj);
if (obj.success == true)
{
if (obj.obj == null || obj.obj.length < 1)
{
$("#content").html("");
}
else
{
$("#content").html("");
var content= obj.obj ;
var p = "";
var start = 0;
for (i = 0; i < content.length; i++)
{
//组装数据
}
}
}
}
});
}
控制台监测到两次请求:
![](https://images2015.cnblogs.com/blog/680152/201604/680152-20160412160757973-652068723.png)
原因:
发生两次提交的原因是在执行完ajax请求后,并没有阻止submit的行为,所以解决方法有两种:
1、不使用type为submit类型的按钮,而是使用type是button的按钮。
2、在showdatalist函数中,最后加一行return false;,即可阻止submit。
相关文章推荐
- js网页顶部线性页面加载进度条,jquery头部线性进度条总结
- jQuery之scroll方法及实例
- jQuery表单选择器
- 在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法。两个方法是有区别的,从而这两个方法在针对不同的操作上,显示了各自的特点。 $().each,对于这个方法,在
- 解密jQuery内核 DOM操作方法 之 html,text,val
- ajaxFileUpload Jquery文件上传插件
- jquery 对option 操作
- 权限管理框架实现(3)--jquery自定义标签
- JavaScript/JQuery自执行函数
- jquery学习之事件委派
- jQueryx相关
- jquery实现简单的表单验证
- JQuerywindow.location.href封装在函数里面不然获取不到
- Jquery Autocomplete 实例教程
- jQuery.extend 函数详解
- ajaxFileUpload 异步上传文件简单使用
- JQuery中bind和unbind函数
- 献给和我合作的过得前端童靴们:jquery源码分析--核心函数(使用函数作为参数创建jQuery对象)
- jQuery EasyUI使用教程之在数据网格中扩展行显示详细信息
- Jquery跨域获得Json(三)