집 >웹 프론트엔드 >JS 튜토리얼 >jQuery가 JSONP를 사용하여 도메인 간 데이터를 얻는 세 가지 방법

jQuery가 JSONP를 사용하여 도메인 간 데이터를 얻는 세 가지 방법

小云云원래의: 2018-05-23 09:22:134444검색

이 기사에서는 JSONP를 사용하여 도메인 간 데이터 수집을 수행하는 세 가지 jQuery 방법을 주로 소개합니다. 또한 jsonp 크로스 도메인 데이터 수집의 세 가지 일반적인 작업 기술을 예제 형식으로 비교하고 분석합니다. 그것이 모두에게 도움이 되기를 바랍니다.

첫 번째 방법은 ajax 함수에서 dataType을 'jsonp'로 설정하는 것입니다

$.ajax({
  dataType: &#39;jsonp&#39;,
  url: &#39;http://www.a.com/user?id=123&#39;,
  success: function(data){
    //处理data数据
  }
});

두 번째 방법은 getJSON을 사용하는 것입니다. 주소에 callback=? 매개변수를 추가하면 됩니다

$.getJSON(&#39;http://www.a.com/user?id=123&callback=?&#39;, function(data){
  //处理data数据
});

세 번째 방법은 getScript 메서드를 사용하는 것입니다.

//此时也可以在函数外定义foo方法
function foo(data){
  //处理data数据
}
$.getScript(&#39;http://www.a.com/user?id=123&callback=foo&#39;);

예제 연습:

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jsonp</title>
<script src="jquery-1.8.0.min.js"></script>
<script>
  $.ajax({
    type : "post",
    url : "jsonp.php?name=zhaoxiace&age=30",
    dataType : "jsonp",
    jsonp: "callbackParam",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
    jsonpCallback:"callbackFunction",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
    success : function(data){
      console.log(data.statusCode + "/" + data.message + "/" + data.name + "/" + data.age);
    },
    error:function(){
      alert(&#39;请求失败&#39;);
    }
  });
</script>
</head>

jsonp.php

<?
$data["age"] = $_GET[&#39;age&#39;];
$data["name"] = $_GET[&#39;name&#39;];
$data["statusCode"]="200";
$data["message"]="成功";
$tmp= json_encode($data); //json数据
echo $callback . &#39;(&#39; . $tmp .&#39;)&#39;; //返回格式，必需
?>

jQuery가 JSONP를 사용하여 도메인 간 데이터를 얻는 세 가지 방법

관련 기사