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

 更新时间:2019年04月16日 11:34:50   作者:Zhihua_W  
这篇文章主要介绍了JQuery Ajax跨域调用和非跨域调用问题,结合具体实例形式分析了jQuery基于ajax的非跨域请求及跨域请求相关实现技巧与操作注意事项,需要的朋友可以参考下

本文实例讲述了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中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结

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

相关文章

  • 基于jQuery的星级评分插件

    基于jQuery的星级评分插件

    以前写过一篇文章以jquery为基础的星星评分,今天有时间把这个功能重写,并以jQuery插件的形式出现以便以后使用。
    2011-08-08
  • 基于jquery实现表格内容筛选功能实例解析

    基于jquery实现表格内容筛选功能实例解析

    对于表格来说,当数据比较多的时候,我们无法一页一页的查找,这样我们就可以进行筛选操作,这篇文章主要为大家详细介绍了基于jquery实现表格内容筛选功能的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 利用jQuery.Validate异步验证用户名是否存在(推荐)

    利用jQuery.Validate异步验证用户名是否存在(推荐)

    这篇文章主要介绍了利用jQuery.Validate异步验证用户名是否存在的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • jQuery数组处理方法汇总

    jQuery数组处理方法汇总

    有段时间没写什么了, 打算把jquery中的比较常用的数组处理方法汇总一下
    2011-06-06
  • 浅谈jQuery操作类数组的工具方法

    浅谈jQuery操作类数组的工具方法

    在很多时候,JQuery的$()函数都返回一个类似数据的JQuery对象,例如$(‘div’)将返回div里面的所有div元素包装的JQuery对象。在这种情况下,JQuery提供了几个常用的属性和方法来操作JQuery对象。本文将对此进行介绍,下面跟着小编一起来看下吧
    2016-12-12
  • jquery判断滚动条距离顶部的距离方法

    jquery判断滚动条距离顶部的距离方法

    今天小编就为大家分享一篇jquery判断滚动条距离顶部的距离方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • jquery+ajax验证不通过也提交表单问题处理

    jquery+ajax验证不通过也提交表单问题处理

    这篇文章主要介绍了jquery validationEngine中使用ajax验证不通过也提交表单问题处理,需要的朋友可以参考下
    2014-12-12
  • Jquery解析json数据详解

    Jquery解析json数据详解

    本篇文章主要是对Jquery解析json数据进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • jquery实现带单选按钮的表格行选中时高亮显示

    jquery实现带单选按钮的表格行选中时高亮显示

    如果将选中的这条记录的行高亮显示,同时该行的单选按钮也被选中了,这样会提高用户的体验的,于是本文下了个示例,有需要的朋友可以参考下
    2013-08-08
  • jQuery中$.extend()用法实例

    jQuery中$.extend()用法实例

    这篇文章主要介绍了jQuery中$.extend()用法,实例分析了extend()方法的功能、定义及相关的使用技巧,需要的朋友可以参考下
    2015-06-06

最新评论