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实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jQuery实现简单日历效果
Jul 05 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报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
js实现简单的随机点名器
2020/09/17 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Python数据结构之翻转链表
2017/02/25 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
python多线程分块读取文件
2019/08/29 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
python 写一个文件分发小程序
2020/12/05 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
启动仪式策划方案
2014/06/14 职场文书
公司员工辞职信范文
2015/05/12 职场文书
家长会感言
2015/08/01 职场文书
初中班长竞选稿
2015/11/20 职场文书
vue中data里面的数据相互使用方式
2022/06/05 Vue.js