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

2016-5-27 Jon

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

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

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

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

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

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

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

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

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

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

发表评论：