今天遇到这样一个问题:
页面在chrome下发送ajax的请求是没有问题的,但是在firfox下无效。
代码大致如下:
//前面省略
<form>
.....
<button class="btn btn-primary" onclick="generateScore(this);"><i class="fa fa-random"></i> 生成成绩</button>
<button class="btn btn-primary" type="submit"><i class="fa fa-search"></i> 查询成绩</button>
......
</form>
......
<script>
function generateScore(obj) {
$(obj).prop('disabled',true);
var params={};
params.groupId=$("select[name=groups]").val();
$.common.postJSON("请求的URL",params,function (data) {
if(data.success){
//....相关逻辑
}else{
//....相关逻辑
}
});
}
</script>
//后面省略
封装的common.js
(function ($) {
$.common = {
postJSON: function (url, data, success) {
$.ajax({
type: "post",
url: url,
data: data,
dataType: "json",
success: success,
error: function () {
$.common.myAlert("系统异常,请稍后重试!");
}
});
}
}
})(jQuery);
Firefox中点击生成成绩的按钮一直弹出系统异常那段提示,而在chrome中执行正常,
后来在网上搜了很多资料博客
参照MDN的文档发现,Firefox中button默认的type为submit……
因此点击按钮的时候不是提交到请求的URL,而是提交了form表单…..
解决办法:
设置按钮的type属性为 button就行了
<button class="btn btn-primary" type="button" onclick="generateScore(this);"><i class="fa fa-random"></i> 生成成绩</button>
以上是本人遇到这个问题的解决办法,希望对读者有所帮助