统一的Ajax提交封装,一劳永逸好工具(带跨域处理)

简介:

直接上代码,核心代码的使用文末提供

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
         //---------核心关键,大家爱护----------//
         /**
         * 公共:基础支撑
         **/
         var  G = {
             /**
             * 统一的请求
             * @parm url请求服务器地址,格式:"${contextPath }/docmanage/list"
             * @parm fn回调函数,格式:function setTableTr(data){for(..){..}}
             * @parm parm提交的条件,格式:{"name":"zhangsan","age":"23"}
             **/
             request: function  (url,fn,parm) {
                 $.ajax({
                     type:  "post"
                     async:  false ,
                     url: url,  //请求的URL
                     dataType:  "json" ,
                     data: parm,
                     //动态执行这个callback函数
                     success:  function  (data) {
                         if (fn!=undefined)fn(data);
                     },
                     error: function (reslt){
                         alert( "服务器,请求失败。" );
                     }
              })
             }
         }

跨域请求,使用下面这段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//统一的请求
function  request(url,params, fn) {
     $.ajax({
         type:  "get" //jquey是不支持post方式跨域的
         async:  false ,
         url: url,  //跨域请求的URL
         dataType:  "jsonp" ,
         //传递给请求处理程序,用以获得jsonp回调函数名的参数名(默认为:callback)
         jsonp:  "callback" ,
         data: params,
         //成功获取跨域服务器上的json数据后,会动态执行这个callback函数
         success:  function  (data) {
             var  result = data.result;
             if  (data.head !=  'SUCCESS' ) {
                 alert( "服务器错误,请及时联系开发商!" );
                 return ;
             }
             
             if (fn!=undefined) fn(result);
         }
     });
}


使用方法:

request("http://www.baidu.com",{"money":"100000"},moneyCall);

function moneyCall(data){

    alert(JSON.stringify(data));



本文转自 沫沫金 51CTO博客,原文链接:http://blog.51cto.com/zl0828/1839979,如需转载请自行联系原作者

相关文章
|
9月前
|
JSON 前端开发 JavaScript
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(三)
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(三)
|
2月前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
|
4月前
|
JSON 前端开发 安全
浏览器跨域限制:为什么浏览器不能跨域发送Ajax请求?
浏览器跨域限制:为什么浏览器不能跨域发送Ajax请求?
40 0
|
5月前
|
前端开发 API
用promise封装ajax
用promise封装ajax
26 0
|
6月前
|
前端开发 JavaScript API
Promise封装Ajax请求
Promise封装Ajax请求
30 0
|
8月前
|
前端开发 JavaScript
js - 封装ajax
简单封装/使用promise封装ajax/封装:$.ajax()
|
8月前
|
缓存 JSON 前端开发
Ajax:跨域与JSONP
Ajax:跨域与JSONP
43 1
|
9月前
|
缓存 JSON 前端开发
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(二)
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(二)
|
9月前
|
XML 数据采集 Web App开发
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(一)
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)
|
9月前
|
小程序 前端开发