JQuery Ajax跨域调用和非跨域调用问题实例分析


Posted in jQuery onApril 16, 2019

本文实例讲述了JQuery Ajax跨域调用和非跨域调用问题。分享给大家供大家参考,具体如下:

现在的互联网技术发展的越来越快,我们在开发过程中遇到的问题也越来越多。比如当我们需要进行跨域访问数据的时候该如何进行开发?本篇博文就记述如何使用Ajax进行跨域访问调用数据。

1、非跨域调用

我们用到的最多是这样的方式,也就是非跨域的进行访问,只是简单的在我们的网页中进行Ajax使用即可。如下面代码:

/**
* 非跨域请求方式
*/
function feikuayu() {
    $.ajax({
      type: "post",
      url: platformUrl + "/security/modifyPwd",
      data: $('#updatepwdform').serialize(),
      dataType: "json",
      success: function (data) {
        $("#updatepwd_btn").click();
        $.toast("修改成功,系统即将退出,请重新登录", 1500);
      },
      error: function () {
        $.toast("网络异常", 1500);
      }
    });
}

2、跨域请求

在我们进行跨域请求时需要改变ajax固定参数:

dataType:"jsonp",
crossDomain:true,
jsonpCallback:"jsonpCallbackFun",
jsonp:"callback",

且后台返回的数据格式必须是:jsonpCallbackFun(json数据); 这里的jsonpCallbackFun是你自定义的回调函数方法名。

代码如下:

/**
* 跨域请求方式
*/
function kuayu() {
    $.ajax({
      type: "post",
      url: platformUrl + "/security/modifyPwd",
      data: params,
      dataType: "jsonp",
      crossDomain: true,
      jsonpCallback: "jsonpCallbackFun",
      jsonp: "callback",
      success: function (data) {
        if (data.result == 1) {
          $("#updatepwd_btn").click();
          $.toast("修改成功,系统即将退出,请重新登录", 1500);
          setTimeout("logout()", 1600);
        } else if (data.result == 2) {
          $.toast(data.msg, 1500);
        } else {
          $.toast("修改失败", 1500);
        }
      },
      error: function () {
        $.toast("网络异常", 1500);
      }
    });
}

这样即可跨域请求了!

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
使用jQuery实现购物车结算功能
Aug 15 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 #jQuery
详解JQuery基础动画操作
Apr 12 #jQuery
详解jQuery设置内容和属性
Apr 11 #jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 #jQuery
jQuery中实现text()的方法
Apr 04 #jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 #jQuery
jQuery分组选择器简单用法示例
Apr 04 #jQuery
You might like
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
如何使用PHP中的字符串函数
2006/11/24 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
浅谈python迭代器
2017/11/08 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
QA工程师岗位职责
2013/11/20 职场文书
应急管理培训方案
2014/06/12 职场文书
离婚案件答辩状
2015/05/22 职场文书