jQuery getScript跨域

最新推荐文章于 2021-01-13 03:20:08 发布
转载 最新推荐文章于 2021-01-13 03:20:08 发布 · 59 阅读 · 0
文章标签：

#xhtml #json #javascript #ViewUI

本文详细介绍了如何使用 jQuery 实现 AJAX 跨域调用的技术，包括前端选择器动态加载数据并展示的方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Ajax跨域调用|梦三秋</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<h1><a href=" http://www.skygq.com/2011/03/04/jquery-ajax跨域调用">jquery-ajax跨域调用</a></h1>

 <img id="ajax_image" src="http://www.skygq.com/ci/css/img/ajax_image.gif" style="position:absolute;z-index:10;display:none;" border="0"/>
<select id="letter2">
 <option value="">请选择首字母</option>
 <option value="A">A</option>
 <option value="B">B</option>
 <option value="C">C</option>
 <option value="D">D</option>
 <option value="E">E</option>
 <option value="F">F</option>
 <option value="G">G</option>
 <option value="H">H</option>
 <option value="I">I</option>
 <option value="J">J</option>
 <option value="K">K</option>
 <option value="L">L</option>
 <option value="M">M</option>
 <option value="N">N</option>
 <option value="X">X</option>
</select>
<select id="server2">
 <option value="">等待你选择首字母</option>
</select>

<script>
$(function(){
 $("#letter2").change(function(e){
  var $$ = $(this);
  if ($$.val() != ''){
   var $ajax_image = $("#ajax_image");
   var position = $$.offset();
   $ajax_image.css({"top":position.top,"left":position.left}).show();
   $("#server2").empty().append("<option value=''>正在调用数据...</option>");
   $.getScript("http://113.240.253.110:8080/index.php?arg="+$$.val(),function(){
    $.each(data,function(index,name){
     alert(name.id);
    });
    if (json.length > 0){
     var result = "";
     $.each(json,function(index,entry){
      result += "<option value='"+entry.id+"'>"+entry.name+"</option>";
     });

     $("#server2").empty().append(result);
    }else{
     alert("未找到数据！");
    }
    $ajax_image.hide();
   })
  }
 })
});
</script>
</body>
</html>

JQuery Ajax 跨域访问的解决方案
10-29
具体实现可以通过JQuery的getScript方法来加载并执行跨域的JavaScript文件。getScript方法接受两个参数，第一个是脚本文件的URL路径，第二个是当脚本加载完成后执行的回调函数。 实现步骤如下： - 在目标域（如***...
基于jquery的跨域调用文件
10-28
然而，jQuery提供了一个方便的方法——`$.getScript()`，来实现跨域加载并执行外部JavaScript文件。在给定的标题和描述中，我们聚焦于如何使用`$.getScript()`来跨域调用文件。 `$.getScript()`是jQuery库中的一个...
使用Jquery中getJSON和getScript方法实现跨域
weixin_30716141的博客
11-28 161
一、什么是跨域？ 因为javascript同源策略的限制，a.com 域名下的js脚本无法操作b.com或是c.a.com域名下的对象。 1.什么引起了ajax不能跨域请求的问题？ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互，而浏览器出于安全考虑，不允许js代码进行跨域操作，所以会警告。 网上有很多解决办法，下面介绍使用JQuery的getJSON，getS...
jQuery.getScript 跨域请求
qq_2226976166的博客
03-23 1235
jQuery.getScript("http://127.0.0.1:58891/teacher_client/?command=check");
$.getScript跨域请求
aoeace
10-20 740
  $.getScript可以实现跨域请求，不过是异步请求，无法设置同步请求。
jQuery getScript()用法与跨域请求示例
ntc10095的博客
05-03 4602
通过 HTTP GET 请求从服务器载入并执行一个 JavaScript 文件 jQuery.getScript( url, [ success(data, textStatus) ] ) url一个包含发送请求的URL字符串。 success(data, textStatus)当请求成功后执行的回调函数。 这是一个快速的AJax处理函数，相当于:  
基于Jquery的跨域传输数据(JSONP)
10-28
最后，还可以使用jQuery的另一个方法$.getScript()来加载跨域的脚本资源，例如： ```javascript $.getScript("***", function(){ $("#go").click(function(){ $(".block").animate({backgroundColor: 'pink'}, ...
jquery的ajax跨域请求原理和示例
12-10
分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。 什么是jsonp格式呢？API原文：如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，...
ajax跨域请求($.ajax,$.getScript)
kurt1988的专栏
06-20 958
$.ajax和$.getScript都可以实现跨域(不同一域名)请求 $.getScript 通过 HTTP GET 请求载入并执行一个 JavaScript 文件$.ajax(dataType:script) 具体php ajax例子 $.ajax client:     $.ajax({ url:'http://www.yuming.com/ind
Script 做API请求跨域问题
骑在大象背上的人生
04-13 593
“Request header field ### is not allowed by Access-Control-Allow-Headers in preflight response.” 此句话告诉我们：您的请求头中的###不被接口提前允许。 Preflight response （提前允许）: 前端跨域访问，当前端发起请求时，浏览器会先发起OPTIONS请求，如果服务器允许，返回响应...
JS跨域请求（script标签）和JQuery跨域请求（jsonp）
weixin_33670713的博客
11-11 365
2019独角兽企业重金招聘Python工程师标准>>> ...
使用getJSON或getScript实现跨域回调的一些问题记录
渔歌唱晚
05-26 213
使用如下方式使用回调会比较正常： function cbtest(data){ alert('ok'); } $.getScript("http://other_domain.com/test.jsp?callback=cbtest");  但如果需要对一些传入参数做处理，则必须使用下面的写法：   $.getScript("http://other_domain.c...
jquery读取json文件跨域_基于Jquery的跨域传输数据(JSONP)
weixin_36221525的博客
01-13 205
基于Jquery的跨域传输数据(JSONP) ，需要的朋友可以参考下。后端:$json_str = json_encode(array("ddd"=>"11111111"));echo $_GET['ja'].'('.$json_str.')';?>前端:$.getJSON('http://www.liushan.cn/test.php?ja=?',function (json){al...
关于jquery中 getJSON跨域访问
weixin_30672019的博客
08-31 87
jquery1.2之后getJSON支持跨域访问 jquery官网上的例子： view plain $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", ...
jQuery ajax请求及跨域 事件 插件
JS中字符串的操作
03-18 201
大师风范
jquery ajax跨域
最新发布
02-26
### 解决方案概述 当使用 jQuery 发起 AJAX 请求时，如果目标 URL 属于不同源，则会触发浏览器的安全机制，阻止请求完成。为了克服这一限制，可以采用 JSONP 或 `$.getScript` 方法来处理跨域请求[^1]。 ### 使用 JSONP 进行跨域请求 JSONP 是一种通过 `<script>` 标签加载 JavaScript 文件的方式，它允许开发者绕过同源策略限制。在 jQuery 中可以通过设置 `dataType` 参数为 `"jsonp"` 来启用此功能： ```javascript $.ajax({ url: "https://api.example.com/data", dataType: 'jsonp', success: function(response){ console.log('Data received:', response); }, error: function(xhr, status, error){ console.error('Error occurred:', xhr.responseText || error); } }); ``` 这种方法仅适用于 GET 请求，并且服务端需支持返回带有回调函数包裹的数据结构。 ### 利用 $.getScript 执行脚本形式的跨域请求 另一种替代方案是利用 `$.getScript()` 函数直接加载并执行远程服务器上的 JS 文件。这种方式同样依赖于被访问的服务提供有效的响应内容： ```javascript $.getScript("https://example.com/path/to/script.js", function(data, textStatus, jqxhr) { console.log('Script loaded and executed.'); // 可在此处操作由 script.js 提供的功能或变量 }); ``` 需要注意的是，上述两种方法都要求对方服务器配合配置相应的接口以适应客户端的需求[^2]。 ### CORS 配置作为更通用的选择 除了以上提到的技术外，在现代 Web 开发环境中更为推荐的做法是由后端开启 CORS (Cross-Origin Resource Sharing)，这是一种 HTTP 头部字段定义了哪些来源能够获得特定资源访问权限的标准协议。一旦启用了 CORS 支持，就可以像平常一样发起普通的 XMLHttpRequests 而不必担心跨域问题[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值