专栏首页天天跨域问题

跨域问题

1.跨域简介

Ajax是后台交互,后台与前端交互都是使用ajax,在实际开发中,往往不是后台给php去连接,而是一个API,
但是直接访问API,会出错()
eg:
 $(function(){
        $.ajax({
            type:"get",
  //下边的地址就是API接口,
            url:"http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&code=101010100",
            success:function(data){
                console.log(data);
            }
        })


    })

但是在network里能看到数据,只是浏览器不允许在页面显示

2.怎么实现跨域

浏览器中的<script>可以无限制的跨域访问,这是一个漏洞。例如引用静态资源库里的jquery
所以,可以利用这个漏洞解决跨域。
eg:
 <script>
    //利用script标签实现跨域的数据访问,在接口后边加“&_jsonp=abc”,其中abc是一个回调函数的名字
    var url = "http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&code=101010100&_jsonp=abc";
    var scri = document.createElement("script");
    scri.setAttribute("src",url);
    document.body.appendChild(scri);
    function abc(data){
        console.log(data)//这样就拿到了数据
    }
</script>

3.$.ajax()解决跨域问题

 $("#btn").click(function(){
            $.ajax({
                   type:请求方式 GET/POST
                   url:请求地址
                   async:布尔类型,默认为true 表示请求是否为异步,如果为false表示为同步。
                   dataType:返回的数据类型
                   jsonp:传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
              //这里不是标注数据格式,而是帮你处理数据,
              //你要json,他就帮你用JSON.parse处理好再给你,你用jsonp,他就自动帮你在后台创建回调函数处理好给你
                   jsonpCallback:自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
                   success:调用成功执行的函数
                   error:异常处理函数
              })
        })
eg:
$(function(){
        $("#btn").click(function(){
            $.ajax({
                type:"get",
                url:"http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&code=101010100&_jsonp=abc",
                dataType:"jsonp",
                jsonp:"callback",
                jsonpCallback:"abc",
                success:function(data){
                    console.log(data)
                    for(var i=0;i<data.weather.length;i++){
                        $("<p></p>").appendTo($("body")).text(data .weather[i].date+"---"+data .weather[i].info.day.toString()+"---"+data.weather[i].info.night.toString());
                    }
                }
            })
        })
    })

4.检索

eg:
$("#info").keyup(function(e){
        $(".list").empty();
        //ajax请求数据
        if(e.keyCode==32){
            $.ajax({
                type:"get",
                url:"https://....?wd="+$(this).val(),//API接口
                dataType:"jsonp",
                jsonp:"cb",//从network看接口回调函数的名字
                success:function(data){
                    for(var i=0;i<data.s.length;i++){
                        var a_tag = $("<a></a>");
                        var li_tag=$("<li></li>");
                        a_tag.html(data.s[i]).attr("href","http://......&wd="+data.s[i]);
                        a_tag.appendTo(li_tag);
                        li_tag.appendTo($(".list"));
                    }
                }
            })
        }
    });

    $(".list").on("mouseenter","li",function(){
        $("#info").val($(this).text());
    });

    $("#search").click(function(){
        if($("#info").val()!=""){
          //设置浏览器的地址,实现跳转。
            window.location.href = "https://.....&wd="+$("#info").val();
        }
    })
上述代码实现类似百度、必应等检索功能。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用 Laravel 5.5+ 更好的来实现 404 响应

    Laravel 5.5.10 封装了两个有用的路由器方法,可以帮助我们为用户提供更好的 404 页面。现在,当抛出 404 异常时,Laravel 会显示一个漂...

    柳公子
  • MVC 框架中的路由器(Router)是如何跑起来的

    MVC 路由器(Router)或分发器(Dispatcher)会检测 HTTP 请求的 URL,并尝试将单个 URL 组件与控制器和控制器中定义的方法匹配,同时...

    柳公子
  • 深入理解 Laravel 管道

    这是一篇译文,原文 Understanding Laravel Pipelines。

    柳公子
  • PHP 垃圾回收与内存管理指引

    php 的变量存储在「zval」变量容器(数据结构)中,「zval」属性包含如下信息:

    柳公子
  • PHP 数组使用之道

    这个教程我将通过一些实用的实例和最佳实践的方式列举出 PHP 中常用的数组函数。每个 PHP 工程师都应该掌握它们的使用方法,以及如何通过组合使用来编写更精简且...

    柳公子
  • PHP 生成器入门

    PHP 在 5.5 版本中引入了「生成器(Generator)」特性,不过这个特性并没有引起人们的注意。在官方的 从 PHP 5.4.x 迁移到 PHP 5.5...

    柳公子
  • 事件驱动架构设计

    这篇文章是 软件架构演进 一个有关 软件架构 系列文章中的一篇。这些文章,主要是我学习软件架构、对软件架构的思考及使用方法的记录。相比于这个系列的前几篇文章,本...

    柳公子
  • PHP 文件系统完全指南

    今天我们将开启一个新的探索旅程,深入到 PHP 文件系统中,系统的学习和掌握 PHP 文件系统的基本使用。

    柳公子
  • Laravel 广播系统工作原理

    今天,让我们深入研究下 Laravel 的广播系统。广播系统的目的是用于实现当服务端完成某种特定功能后向客户端推送消息的功能。本文我们将学习如何使用第三方 Pu...

    柳公子
  • PHP 多任务协程处理

    上周 有幸和同事一起在 SilverStripe 分享最近的工作事宜。今天我计划分享 PHP 异步编程,不过由于上周我聊过 ReactPHP;我决定讨论一些不一...

    柳公子

扫码关注云+社区

领取腾讯云代金券