angularjs1.6.8版本跨域

<!DOCTYPE html>

<html ng-app="test">

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="angular.js" charset="utf-8"></script>

    <script>

    let mod=angular.module('test', []);

    mod.controller('main', function ($scope, $http, $sce){

      $scope.arr=[];

      $scope.word='';

      $scope.$watch('word', function (){

        let res=$sce.trustAsResourceUrl(`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${$scope.word}`);

        $http.jsonp(res, {jsonpCallbackParam: 'cb'}).then(res=>{

          $scope.arr=res.data.s;

        }, ()=>{

          alert('错了');

        });

      });

    });

    </script>

  </head>

  <body ng-controller="main">

    <input type="text" ng-model="word">

    <ul>

      <li  ng-repeat="str in arr">{{str}}</li>

    </ul>

  </body>

</html>

angularjs，Jsonp跨域访问页面的更多相关文章

  1. Jsonp跨域访问

    很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...

  2. 在ASP.NET MVC3 中利用Jsonp跨域访问

    在ASP.NET MVC3 中利用Jsonp跨域访问 在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录.一般情况下我们需要在多系统之间使用多个用户名和密码.这样客户就需要在多个系统之间重复 ...

  3. jquery ajax怎么使用jsonp跨域访问

    在项目中使用接口的比较多,在客户端跨域访问,jquery中只能使用jquery ajax的jsonp方法. 值得注意的是,jQuery.ajax()只支持get方式的跨域,post的方式是不支持的.& ...

  4. 【AngularJs】---JSONP跨域访问数据传输

    大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...

  5. 【AngularJs】---JSONP跨域访问数据传输（JSON_CALLBACK）

    大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...

  6. Jsonp跨域访问原理和实例

    >>什么是跨域 出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,当前域名的js只能读取同域下的窗口属性,即同源策略.而跨域就是通过某些手段来绕过同源策略限制,实 ...

  7. 从前端和后端两个角度分析jsonp跨域访问（完整实例）

    一.什么是跨域访问 举个栗子:在A网站中,我们希望使用Ajax来获得B网站中的特定内容.如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题.你可以理解为两个域名之间不能跨过域名来发送请求或者请 ...

  8. JSONP跨域访问百度实现搜索提示小案例

    一.JSONP简介 JSONP 全称 JSON with padding(填充式 JSON 或参数式 JSON),JSONP实现跨域请求的原理,就是动态创建<script>标签,然后利用& ...

  9. AJax与Jsonp跨域访问

    一.JavaScript的AJax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML) 设计AJax使用的一种重要技术 ...

随机推荐

  1. Linux rm命令详解

    Linux rm命令 Linux rm命令用于删除一个文件或者目录 语法: rm [options] name... 参数解释: -f, --force 强制删除.忽略不存在的文件,不提示确认 -i ...

  2. tomcat中catalina是什么

    catalina 就是Tomcat服务器使用的 Apache实现的servlet容器的 名字. Tomcat的核心分为3个部分: (1)Web容器---处理静态页面: (2)catalina --- ...

  3. MAC JDK默认安装路径 JAVA路径

    打开终端,执行     /usr/libexec/java_home -V 默认JDK1.6(Apple自带JDK)路径:   /System/Library/Java/JavaVirtualMach ...

  4. IIC总线初识

    IIC总线初识 IIC总线的拓扑结构 八位数据分布: 写操作: 读操作: IIC总线的工作频率: IIC总线的时序(重要): 起始位的时序: 用verilog代码描述这一过程: 此处是用来描述SDA信 ...

  5. The Best KPIs to Use in Your Company

    Here is a list of key performance indicators (KPIs) that should be used in contact centres, alongsid ...

  6. 荣耀9少 gms core服务

    1.首先安装gms core即本软件gms安装器,安装时候会重启一次. gms core apk下载地址:http://www.paopaoche.net/android/307559.html 注意 ...

  7. intellij idea 设置 Error 提示颜色修改

    File--->Settings --->Editor --->ColorScheme--->General --->Errors and Warning--->E ...

  8. python 指定文件编码的方法

    import sys reload(sys) sys.setdefaultencoding('utf-8')

  9. 配置文件elasticsearch.yml详解

    在es根目录下的config目录中有elasticsearch.yml配置文件,es加载使用的yml格式配置 17行:cluster.name: 自定义集群名称(强烈推荐默认名称elasticsear ...

  10. 服务网关zuul之三：zuul统一异常处理

    我们详细介绍了Spring Cloud Zuul中自己实现的一些核心过滤器,以及这些过滤器在请求生命周期中的不同作用.我们会发现在这些核心过滤器中并没有实现error阶段的过滤器.那么这些过滤器可以用 ...