zoukankan      html  css  js  c++  java
  • jquery中的jsonp和js中的jsonp还有配合php实现的jsonp。

    最近在做一个自己的网站,才知道一个前端需要学习的东西到底有多少。

    来吧~步入正题,我的网站空间很小。所以在资源上,就有点吼不住了。跨域拿数据肯定是不可避免的了。

     一、原生js;

    我们知道他的原理,就是使用sec属性可以跨域拿数据。

    一般如果数据是字符串形式包括json数据,那么都是用一个script标签去拿到然后处理,但如果是图片的,比如图片的api借口。我们可以这样写。

    二、如果要配合后台php拿数据呢?那就更加简单了。php就是一个中转站,他不存在跨域。

        前台:

      var box=document.getElementById('box');
    
      var yes=  document.getElementById('btn').onclick=function () {
            var xhr=new  XMLHttpRequest();
            xhr.onreadystatechange=function () {
                if (xhr.readyState==4){
                    if (xhr.status==200){
                        var data=JSON.parse(xhr.responseText);
                        var img='';
                       for (var i=0;i<data.list.length;i++){
                           img+="<img src="+'http://tnfs.tngou.net/image'+data.list[i].src+">";
                       }
                       box.innerHTML=img;
                    }else {
                        box.innerHTML=404
                    }
                }
            };
            xhr.open('POST','data.php',true);
            xhr.send();
        }
        yes ();
    

      后台:(php)

    $host = 'http://www.tngou.net/tnfs/api/show?id=10';
    $randomNumber=file_get_contents($host);
    echo $randomNumber;
    

      小结:如果想动态拿不同页面,在$host = 'http://www.tngou.net/tnfs/api/show?id=10';里?后面的id=10可以写成id=$bianliang;即这个你定义的变量是来监听前台输入过来的页数。很简单,不在赘述。

  • 相关阅读:
    i.MX6ULL使用寄存器配置GPIO
    i.MX6ULL的GPIO简要介绍。
    stm32的2个can控制器,主从理解
    ST-Link串口驱动安装--ST-Link VCP Ctrl驱动安装失败解决
    大漠穷秋叫狼哥哥要学好的书
    JQuery UI datepicker 经验
    JQuery UI datepicker 使用方法
    前端-细节处理笔记
    Grunt 前端自动化组件 收集
    JS deBug 技巧
  • 原文地址:https://www.cnblogs.com/webSong/p/6262634.html
Copyright © 2011-2022 走看看