解决火狐浏览器发送jquery的ajax请求无效的问题

今天遇到这样一个问题:
页面在chrome下发送ajax的请求是没有问题的,但是在firfox下无效。

代码大致如下:

//前面省略
<form>
.....
<button class="btn btn-primary" onclick="generateScore(this);"><i class="fa fa-random"></i>&nbsp;生成成绩</button>
<button class="btn btn-primary" type="submit"><i class="fa fa-search"></i>&nbsp;查询成绩</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……
button的type默认值

因此点击按钮的时候不是提交到请求的URL,而是提交了form表单…..

解决办法:
设置按钮的type属性为 button就行了

<button class="btn btn-primary" type="button" onclick="generateScore(this);"><i class="fa fa-random"></i>&nbsp;生成成绩</button>

以上是本人遇到这个问题的解决办法,希望对读者有所帮助

posted @ 2017-06-19 16:22  我来抓人了  阅读(1482)  评论(1编辑  收藏  举报