简单封装$.ajax() 方法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33285292/article/details/76147450

注意:用此方法必须基于JQuery.min.js  上实现。

话不多说贴上一个Demo:

<!DOCTYPE HTML> 
<html> 
    <head>  
        <meta charset="GBK" />
        <title>简单封装$.ajax()方法</title> 
        <script src="jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
        <script language="javascript" type="text/javascript">


            function myfunc(data) {  //自己的函数   可以对data 这个数据对象进行操作或遍历数据
                alert(data.name);
            }




            ajax_all_Filed("true", "false", "GET", "newjson.json", "json", "", myfunc);//调用函数




            /*
             * AJAX针对所有的数据类型的函数
             * 
             * @param {type} sync 是否异步传输 默认是true是异步。 false就是同步传输 
             * @param {type} cache 是否开启缓存
             * @param {type} type ajax的传输类型 POST 或 GET
             * @param {type} url  是传输的目标url (注意:这个url要非常注意,如果路径不对就会导致错误  !--所以是重点--)
             * @param {type} datatype 传输数据的类型可以是 text:纯文本 | html:HTML信息包括script标签会在插入DOM时执行 | script:返回纯文本JavaScript代码 | json:json数据 | jsonp:jsonp数据格式 | xml:返回XML文档 
             * @param {type} data 是要传输的数据(注意:数据是什么格式datatype就要是对应的格式,否则传输失败)
             * @param {type} func 当ajax执行成功之后跳转到自己的函数  注意:这里只需要写上自己函数的名称即可
             * @returns {undefined}
             */
            function ajax_all_Filed(sync, cache, type, url, datatype, data, func) { //封装ajax的一些常用参数  //data数据可以为空
                $.ajax({
                    sync: sync,
                    cache: cache,
                    type: type,
                    url: url,
                    dataType: datatype,
                    data: data,
                    beforSend: function () {
                        // 禁用按钮防止重复提交
                        $("#submit").attr({disabled: "disabled"});
                    },
                    error: function (data) {
                        //请求失败时被调用的函数 
                        alert("传输失败:" + data);
                    },
                    success: function (data) {
                        func(data);
                    }
                });
            }




        </script> 
    </head> 
    <body > 
        <h1>封装$.ajax()方法</h1> 
    </body> 
</html> 

newjson.json 文件:

{
    "name": "Administrator"
}

总结

我是新手最近一直再用 AJAX  这个方法简单的写成函数的方式不知道会不会方便,主要是ajax 传输成功之后  把后台的data 返回到自己的函数上 ,这样对数据就可以随意操作了。

 

猜你喜欢

转载自blog.csdn.net/qq_33285292/article/details/76147450