基于jquery的ajax简单封装调用案例
2018-11-10 10:43
519 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/namechenfl/article/details/83927238
[code]// submitAjax(post方式提交) function submitAjax(form, callbak, success, cache, alone) { var cache = cache || true; var form = $(form); var url = form.attr('action'); var data = form.serialize(); ajax(url, data, callbak, success, cache, alone, false, 'post', 'json'); } /*//调用实例 $(function () { $('#form-login').submit(function () { submitAjax('#form-login'); return false; }); });*/ // ajax提交(post方式提交) function post(url, data, callbak, success, cache, alone) { ajax(url, data, callbak, success, cache, alone, false, 'post', 'json'); } // ajax提交(get方式提交) function get(url, callbak, success, cache, alone) { ajax(url, {}, callbak, success, alone, false, 'get', 'json'); } // jsonp跨域请求(get方式提交) function jsonp(url, callbak, success, cache, alone) { ajax(url, {}, callbak, success, cache, alone, false, 'get', 'jsonp'); } /* ajax封装 * url 发送请求的地址 * data ajax请求参数 *success 请求成功后执行的方法 * cache 浏览器历史缓存 默认为false * alone 独立提交(一次有效的提交)默认为false * type 请求的方式 默认为get * dataType 返回JSON数据 默认为JSON格式数据 *contentType 默认"application/x-www-form-urlencoded" 复杂json数据请用application/json * async 异步请求 默认为true *beforeSend 请求之前执行 *complete 请求完成执行 *error 请求失败执行 */ //页面加载所要进行的操作 $(function () { //设置ajax当前状态(是否可以发送); ajaxStatus = true; }); function ajax(url, data, callbak, success, cache, alone, async, type, dataType, contentType, beforeSend, complete, error) { var type = type || 'post';//请求类型 var dataType = dataType || 'json';//接收数据类型 var contentType = contentType || "application/x-www-form-urlencoded"; var async = async || true;//异步请求 var alone = alone || false;//独立提交(一次有效的提交) var cache = cache || false;//浏览器历史缓存 var callbak = callbak || function(data){} var success = success || function (data) { /*console.log('请求成功');*/ setTimeout(function () { layer.msg(data.Message);//通过layer插件来进行提示信息 }, 500); if (data.Code == 200) {//服务器处理成功 setTimeout(function () { callbak; if (data.url) { location.replace(data.url); } else { location.reload(true); } }, 1500); } else {//服务器处理失败 if (alone) {//改变ajax提交状态 ajaxStatus = true; } } }; var beforeSend = beforeSend || function () { layer.msg('加载中', {//通过layer插件来进行提示正在加载 icon: 16, shade: 0.01 }, function () { //do something }); }; var complete = complete || function (data) { ajaxStatus = true; //console.log(data) }; var error = error || function (data) { /*console.error('请求成功失败');*/ /*data.status;//错误状态吗*/ layer.closeAll('loading'); setTimeout(function () { if (data.status == 404) { layer.msg('请求失败,请求未找到'); } else if (data.status == 503) { layer.msg('请求失败,服务器内部错误'); } else { layer.msg('请求失败,网络连接超时'); } ajaxStatus = true; }, 500); }; /*判断是否可以发送请求*/ if (!ajaxStatus) { return false; } ajaxStatus = false;//禁用ajax请求 /*正常情况下1秒后可以再次多个异步请求,为true时只可以有一次有效请求(例如添加数据)*/ if (!alone) { setTimeout(function () { ajaxStatus = true; }, 1000); } $.ajax({ 'url': url, 'data': data, 'type': type, 'dataType': dataType, 'contentType': contentType, 'async': async, 'success': success, 'complete': complete, 'error': error, 'jsonpCallback': 'jsonp' + (new Date()).valueOf().toString().substr(-4), 'beforeSend': beforeSend, 'complete': complete, }); }
AjaxSimple.js
阅读更多相关文章推荐
- 基于jquery的函数方法封装调用案例
- php+jquery+ajax简单Ajax调用示例
- 前端 jquery-ajax 的简单案例分析和总结
- 基于jquery封装的一个简单web右键菜单
- 基于Jquery 的 Disucz Ajaz 请求 比自带的Ajax 简单
- 基于jquery的ajax封装
- jQuery封装方法ajax调用获得返回json数据方法
- asp.net自定义服务器控件-基于jquery的AjaxUpload封装的服务器控件
- Jquery 调用asp.net ajax (web service/static page method)的示例(一)---简单参数
- ajax学习第一天——基于jquery的简单应用
- 原生js方式实现ajax,并仿jquery方式简单调用
- 基于ThinkPHP3.23的简单ajax登陆案例
- jQuery简单的Ajax调用示例
- 基于jquery的ajax方法的二次封装
- 前端 jquery-ajax 的简单案例分析和总结
- jquery封装 [返回顶部] 语句,简单调用即可
- jquery封装 [ 限制文本框只能输入数字和小数] 语句,简单调用即可
- 基于jquery的$.ajax再次封装(可以防止重复请求)
- 刚封装的基于jquery的一个简单的、可过滤可添加的下拉框控件
- jQuery简单的Ajax调用示例