关于ajax提交的公共接口的一大用处

在项目框架搭建的时候,就写了ajax提交的公共接口,是想统一的日志和处理ajax返回的错误信息。

今天,却又帮我解决了另外一个问题:每次点开某个页面,有一个ajax请求总是会调用两次,于是打开chrome调试器,在公共的ajax提交的地方打上断点,查看chrome的Call Stack,很容易就找到两次调用的源头所在,问题瞬间解决。

贴一下我的util.js:

/*!
 * 前端js公用方法插件
 * Copyright 2011-2015 zhangjh.
 * Licensed under MIT (https://github.com/firebata/skysport/blob/master/LICENSE)
 */
(function ($) {
    "use strict";
    //扩展常用方法
    $.extend({
        sendRestFulAjax: sendRestFulAjax,//ajax
        sendJsonAjax:sendJsonAjax,
        strToJson: strToJson,//&连接字符串转json对象
        strIsEmpty: strIsEmpty,//判断字符串为空
        strIsNotEmpty: strIsNotEmpty//判断字符串不为空

    });
    /**
     *
     * @param _url 路径
     * @param _data 数据
     * @param _type HTTP方法
     * @param _dataType 数据类型
     * @param _doSuccess 成功回调函数
     */
    function sendRestFulAjax(_url, _data, _type, _dataType, _doSuccess) {
        var type = strIsEmpty(_type) ? ‘POST‘ : _type;
        //var dataType = _type == "undefined" || $.trim(_dataType) == ‘‘ ? ‘json‘ : _dataType;
        var sf = strIsEmpty(_doSuccess) ? doSucess : _doSuccess;
        $.ajax({
            url: _url,
            data: _data,
            type: type,
            //dataType: dataType,
            success: sf,
            error: doNotSucess
        });
    }
    /**
     *
     * @param _url 路径
     * @param _data 数据
     * @param _type HTTP方法
     * @param _dataType 数据类型
     * @param _doSuccess 成功回调函数
     */
    function sendJsonAjax(_url, _data,  _doSuccess) {
        var sf = strIsEmpty(_doSuccess) ? doSucess : _doSuccess;
        $.ajax({
            url: _url,
            data: JSON.stringify(_data),
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            success: sf,
            error: doNotSucess
        });
    }
    /*bootbox.setLocale("zh_CN");*/
    var doNotSucess = function (XMLHttpRequest, textStatus, errorThrown) {
        //console.error(XMLHttpRequest);
        bootbox.alert("本次操作失败.");
    }
    var doSucess = function (XMLHttpRequest, textStatus, errorThrown) {
        //bootbox.alert(XMLHttpRequest);
    }
    /**
     * 将“&”连接的字符串转换成Json
     * @param str “&”连接的字符串
     * @returns {Object}  Json
     */
    function strToJson(str) {
        str = str.replace(/&/g, "‘,‘");
        str = str.replace(/=/g, "‘:‘");
        str = "({‘" + str + "‘})";
        var obj = eval(str);
        return obj;
    }

    /**
     * 校验字符串为空
     * @param input 字符串
     * @returns {boolean}
     */
    function strIsEmpty(input) {
        return input == undefined || $.trim(input) == ‘‘
    }

    /**
     * 校验字符串不为空
     * @param input 字符串
     * @returns {boolean}
     */
    function strIsNotEmpty(input) {
        return !strIsEmpty(input);
    }
}(jQuery));
时间: 2024-09-30 07:24:59

关于ajax提交的公共接口的一大用处的相关文章

ajax提交与普通表单提交的优缺点

一般需要提交整个表单,那么我们就需要提交form表单.比如查询,分页这种. 如果只是做局部刷新,那么可以采用异步ajax提交.这样请求的时候只用传需要的参数,然后请求成功后也不用整体刷新页面,只用局部刷新,这样节省了带宽, 比如我们采用ajax删除的时候. 所以当需要整体刷新的时候,那么就可以采用表单提交. 当要局部刷新的时候,我们采用ajax请求. 提交form表单: function query(){ var frm = document.getElementById("frm")

Ajax提交底层原型XMLHttpRequest

相信接触过ajax的都觉得其post,get提交很方便,那么他是怎么实现的呢?基于此我们就不得不谈到js中的XMLHttpRequest对象. 其中w3c中是这样解释的: XMLHttpRequest 对象用于在后台与服务器交换数据. XMLHttpRequest 对象是开发者的梦想,因为您能够: 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加载后从服务器接收数据 在后台向服务器发送数据 所有现代的浏览器都支持 XMLHttpRequest 对象. XMLHttpR

判断手机端用户打开页面时是android还是ios,并将判断结果通过ajax返回给url接口,传递回去

首先判断页面是android还是ios,然后利用ajax将结果通过接口url返回回去,记录到log日志中,以统计android和ios用户访问该页面的数量(数据统计) <script type="text/javascript"> window.onload = function(){//页面加载之后立即执行 var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.inde

用Ajax提交用户名和密码出现Session空指针异常

用Ajax提交时出现的异常信息是如下图: 原因是如下图:没有继承这个接口,IRequiresSessionState表示可以对session进行读写操作.

jQuery、ajax提交fromdata数据

需求说明:简单演示ajax提交fromData类型数据. 代码说明:ajax在传输数据的时候基本格式大都是固定的,只需要修改传输类型即可.下面介绍基本的参数提交. 步骤一:建立html或者jsp页面,引入jquery-3.2.1.min.js(其他版本亦可). 步骤二:建立文件选择输入框,上传按钮并给其ID赋值. 步骤三:编写jQuery.ajax代码,完成上传到指定controller. 下面是示例代码: <!DOCTYPE html><html lang="en"

Vue-CLI项目-axios模块前后端交互(类似ajax提交)

08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axios from 'axios' Vue.prototype.$axios = axios; 三.使用 created() { // 组件创建成功的钩子函数 // 拿到要访问课程详情的课程id let id = this.$route.params.pk || this.$route.query.pk

jquery ajax提交表单数据的两种方式

jquery ajax提交表单数据的两种方式

django ajax提交避免csrf错误的方法

使用django 防御csrf功能时,ajax提交表单 {{ csrf_token }}加入到data里面,可避免csrf错误.位置如下红色标注: $.ajax({    :,    :{:.,},    :,    :(callback){       callback = jQuery.parseJSON(callback);       (callback.> ){          .()          .(callback[].);          =callback[].- .

JavaWeb开发中form、ajax提交数据Model转化

JavaWeb开发中form.ajax提交数据Model转化 问题 最近学习MongoDB数据库,作为java开发的我,当然需要做个小的web程序来测试一番了.在html中我采取ajax提交方式,因为我要模拟各种类型的数据,基础数据类型.数组.对象等.然而,最终发现了个不同的地方:Form和ajax提交数据,在HttpServletRequest中尽然参数名有所不同. 数据类型 form ajax 基础数据 para=value para=value 数组 para[]={"aaa",