ajax使用jsonp跨域取数据献上3个demo

2016-5-27 Jon js+jquery+ajax

ajax使用jsonp跨域取数据 3个demo献上

1、ajax通过getScript跨域请求数据

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>ajax通过getScript跨域请求数据</title>
  </head>
  <body>
    <h1>ajax通过getScript跨域请求数据</h1>
    <h2></h2>
    <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
      $.getScript('https://yuanqiao.pw/yqiao/jsonp/datas.json',function(){
        console.log(Dylan);
        $('h2').html('姓名：'+Dylan.name+'<br>性别：'+Dylan.gender+'<br>年龄：'+Dylan.age);
      });
    </script>
    <!--
      datas.json代码
      var Dylan={"name":"jack","age":21,"gender":"male"}
    -->
  </body>
  </html>

您可以修改框中代码后运行查看

2、ajax通过jsonp jsonpCallback跨域请求json数据

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>ajax通过jsonp jsonpCallback跨域请求json数据</title>
  </head>
  <body>
    <h1>ajax通过jsonp jsonpCallback跨域请求json数据</h1>
    <h2></h2>
    <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
      $.ajax({
        type: 'get',
        async: false,
        url: 'https://yuanqiao.pw/yqiao/jsonp/datas2.json',
        dataType: 'jsonp',
        jsonp: 'callback',//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
        jsonpCallback:'flightHandler',//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
        success: function(json){
          $('h2').html('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
        },
        error: function(){
          alert('fail');
        }
      });
    </script>
    <!--
      datas2.json 代码
      flightHandler({
        "code": "CA1998",
        "price": 1780,
        "tickets": 5
      });
     -->
  </body>
  </html>

您可以修改框中代码后运行查看

3、ajax通过jsonp跨域请求数据

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>ajax通过jsonp跨域请求数据</title>
  </head>
  <body>
    <!--
      注意：跨域只能是get请求，juqery 不支持post跨域
     -->
    <h1>ajax通过jsonp跨域请求数据</h1>
    <h2></h2>
    <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
      // 请求页面数据
      $.ajax({
        url:'https://yuanqiao.pw/yqiao/jsonp/datas.php',
        type:'get',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
      }).done(function(datas){
        console.log(datas);
        $('h2').html('姓名：'+datas.username+'<br>性别：'+datas.gender+'<br>年龄：'+datas.age);
      }).fail(function(xml, err){
        console.log(err);
      });
    </script>
    <!--
      datas.php 代码
      <?php
        $data = array ('username'=>'jack','age'=>21,'gender'=>'male');
        echo $_GET['jsoncallback']."(".json_encode($data).")";
      ?>
     -->
  </body>
  </html>

您可以修改框中代码后运行查看

标签: jsonp 跨域

分享这篇文章

赞助鼓励：如果觉得内容对您有所帮助，您可以支付宝(左)或微信(右)：

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

下一篇江南皮革厂
上一篇前端开发规范手册2.0

发表评论：

知向前端

ajax使用jsonp跨域取数据献上3个demo

ajax使用jsonp跨域取数据 3个demo献上

1、ajax通过getScript跨域请求数据

2、ajax通过jsonp jsonpCallback跨域请求json数据

3、ajax通过jsonp跨域请求数据

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

存档

随机文章

最新文章

热门文章

友情链接