JQuery Ajax执行跨域请求数据的解决方案

今天前端因为需要ajax调用两个不同的项目，请求域不一样，所以涉及ajax跨域的问题 ，其实很简单，具体如下

原来的ajax请求如下：

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

只需改动ajax固定参数

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

且后台返回的数据格式必须是：jsonpCallbackFun（json数据）;  这里的jsonpCallbackFun是你自定义的回调函数方法名

改动后：

$.ajax({
 type:"post",
 url:platformUrl +"/security/modifyPwd.do",
 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);
 }
 });

这样即可跨域请求了

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接

赞 (0)

相关推荐

  • Ajax请求内嵌套Ajax请求示例代码

    前段时间做项目,需要把全国省市的两个XML文件整合成一个JSON格式的数据,手写的话觉得数据太多了,而且容易出错,于是就想到了用Ajax嵌套的方法来解决,就想平时用Ajax的方法直接嵌套,都会先读出外面Ajax的内容,然后才读取嵌套在Ajax里面的内容,后面经网上查找资料,加个async:false这个Ajax参数就行了,下面是贴代码: <script type="text/javascript"> $(function () { $.ajax({ type: "

  • JQuery实现ajax请求的示例和注意事项

    最近很多人问我ajax该怎么用,怎么访问后台,怎么取得数据页面显示 写一个简单的ajax访问: $.ajax({ url: ctx +"/meeting/getMeetingRoomMap", //请求后台地址 type:"get", //请求方式 cache:false, //控制是否缓存数据(post请求默认false,而get请求会为true,容易造成页面数据缓存问题) async:false, //控制同步还是异步 data:{scheduleDate:sc

  • 双层ajax嵌套（可多层）用法实例

    本文实例讲述了双层ajax嵌套(可多层)用法.分享给大家供大家参考.具体如下: function addbus() { //清除a标签中的所有元素 // $("#s1").remove(); var chooseIdTypeOne =$("#chooseIdTypeOne2").find("option:selected").val(); $.ajax({ url : "/ftcms/changeProject.do?getOrigin

  • 用Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案)

    问题 前端小同学在做页面的时候,犯了个常见的错误:把多个Ajax请求顺序着写下来了,而后面的请求,对前面请求的返回结果,是有依赖的.如下面的代码所示: var someData; $.ajax({ url: '/prefix/entity1/action1', type: 'GET' , async: true, contentType: "application/json", success: function (resp) { //do something on response

  • JQuery的Ajax请求实现局部刷新的简单实例

    JQuery的Ajax请求实现局部刷新的简单实例

    请求的ajax路径传递的参数(data)会到action中被一个同样名字的变量(附带set get方法)接收,返回的data是一个JQuery的数组对象,在被调用的action中涉及到的数据变量会对象,都会封装到data中最终返回给页面. 案例:如图 我要实现状态的更改,用JQuery的Ajax更改完之后图标发生改变,实现页面的局部刷新 原理:局部刷新是刷新页面的一部分,在此案例中实现的只是图标的改变,把后台代码和前台现实的图标分离,并不是对数据库重新做查询,二是后台数显数据修改之后,前台直接改

  • JQuery的Ajax跨域请求原理概述及实例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式. 什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.

  • jquery的ajax异步请求接收返回json数据实例

    jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码 代码如下: $('#send').click(function () {     $.ajax({         type : "GET",         url : "a.php",         dataType : "json

  • 详解JavaScript原生封装ajax请求和Jquery中的ajax请求

    前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),当然也可同步,这样就可使网页从服务器请求少量的信息,而不是整个页面.Ajax使我们的项目更小.更快,更友好,在前端开发有很高的地位,也是面试题的热点.本次测试是在localhost本地环境. 1.原生ajax (1)html前端代码get请求方式创建一个ajax实例xhr

  • jQuery实现ajax的嵌套请求案例分析

    本文实例讲述了jQuery实现ajax的嵌套请求.分享给大家供大家参考,具体如下: 今天看到了一个嵌套的ajax,算是长见识了. 不过看一眼就知道怎么回事了. 不是不会,就怕想不到. //发送一个ajax请求,嵌套的ajax请求 'ajaxCall': function(url1, data1, url2, data2){ var returnValue = ''; $.ajax({ type: "POST", url: url1, async: false, data: data1,

  • JQuery Ajax执行跨域请求数据的解决方案

    今天前端因为需要ajax调用两个不同的项目,请求域不一样,所以涉及ajax跨域的问题 ,其实很简单,具体如下 原来的ajax请求如下: $.ajax({ type:"post", url:platformUrl +"/security/modifyPwd.do", data:$('#updatepwdform').serialize(), dataType:"json", success:function(data){ $("#upda

  • jquery+ajax实现跨域请求的方法

    本文实例讲述了jquery+ajax实现跨域请求的方法.分享给大家供大家参考.具体实现方法如下: 说明:这里的dataType 为  "jsonp"  :type 只能为 GET 前台请求代码如下: 复制代码 代码如下: $.ajax({  type: "GET",  url: "http://www.xxx.com/Rest/ValidAccountsExists.aspx?accounts=admin",  dataType: "j

  • jQuery Ajax实现跨域请求

    jQuery Ajax实现跨域请求

    本文实例为大家分享了jQuery Ajax跨域请求的具体代码,供大家参考,具体内容如下 html 代码清单: <script type="text/javascript" src="http://www.youxiaju.com/js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ $.ajax( { ty

  • AJAX跨域请求数据的四种方法(实例讲解)

    由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据 请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行 实例对象 var xhr = new XMLHttpRequest(); 注意点 在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP");  记住要进行兼容处理哦  在这里我就不写了 通过该对象进行获取 获取数据的四种状态  xhr.readyState 该属性保存着请求数据的几种状态 1.xhr.open(请

  • 解决ajax跨域请求数据cookie丢失问题

    前端: 以jquery为例: 需要加入 复制代码 代码如下: xhrFields: {             withCredentials: true         },         crossDomain: true, $.ajax({         type: postType,         url: url,         data: postData || '',         xhrFields: {             withCredentials: tru

  • Ajax jsonp跨域请求实现方法

    什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. 具体策略限制情况可看下表: URL 说明 允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 h

  • jsonp跨域请求数据实现手机号码查询实例分析

    本文实例讲述了jsonp跨域请求数据实现手机号码查询的方法.分享给大家供大家参考,具体如下: 前言 网上有很多开放的api,我们在本地通过ajax获取数据时,总会碰到一个问题,那就是跨域!如果不借助php等,仅仅通过js怎么解决跨域的问题呢?或许jsonp是个不错的选择. 知识准备 之前一篇<说说JSON和JSONP 也许你会豁然开朗>对jsonp已经介绍的很详细了,这里就不多介绍了,直接上实例吧 代码: <!DOCTYPE HTML> <html> <head&

  • js跨域请求数据的3种常用的方法

    js跨域请求数据的3种常用的方法

    由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求. 那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理: 1.JavaScript    在原生js(没有jQuery和ajax支持)的情况下,通常客户端代码是这样的(我假设是在localhost:8080的端口下的http://localhost:8080/webs/i.mediapower.mobi/wutao/index.html页面的body标签下面加入以下代码): <scr

  • 浅谈JQuery+ajax+jsonp 跨域访问

    Jsonp(JSON with Padding)是资料格式 json 的一种"使用模式",可以让网页从别的网域获取资料. 一. 客户端 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv=&q

  • 原生JS实现ajax与ajax的跨域请求实例

    一.原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要传递数据发送null 第五步:在监听函数中,判断readyState=4&&status=200表示请求成功 第六步:使用responseText.responseXML接受响应数据,并使用原生JS操作DOM进行显示 var ajax = new XMLHttpRequest(); ajax.

随机推荐