异步问题
ajax异步请求数据完数据后给$scope赋值的时候需要检查$scope的数据更新没有。要不然无法绑定数据。
<!DOCTYPE html>

<html ng-app="test_ajax">

  <head>

    <meta charset="utf-8">

    <title></title>

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

        <script src="jquery.js"></script>

    <script>

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

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

      $.ajax({

        url: 'arr.txt',

        dataType: 'json',

        success(res){

          $scope.arr=res;

          $scope.$apply(); //检查

        },

        error(){

          alert('错了');

        }

      });

    });

    </script>

  </head>

  <body ng-controller="main">

    <ul>

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

    </ul>

  </body>

</html>
$scope.$apply(); //检查


angularjs方法Post方法请求数据






<!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.config(function ($httpProvider){

      $httpProvider.defaults.transformRequest=function (obj){

        let arr=[];

        for(let name in obj){

          arr.push(`${name}=${obj[name]}`);

        }

        return arr.join('&');

      };

      $httpProvider.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';

    });

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

      $scope.calc=function (){

        $http({

          method: 'POST',

          url: '1.php',

          data: {

            a: $scope.a,

            b: $scope.b

          }

        }).then(res=>{

          alert(res.data);

        }, ()=>{

          alert('错了');

        });

      };

    });

    </script>

  </head>

  <body ng-controller="main">

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

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

    <input type="button" value="计算" ng-click="calc()">

  </body>

</html>






为啥POST出问题
  AngularJS用的是 application/json  的编码格式大多浏览器不认， 编码格式改成application/x-www-form-urlencoded的编码格式。




angularjs方法get方法请求数据




<!DOCTYPE html>

<html ng-app="test_ajax">

  <head>

    <meta charset="utf-8">

    <title></title>

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

    <script>

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

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

      $http.get('arr.txt').then((res)=>{

        $scope.arr=res.data;

      }, (err)=>{

        alert('错了');

      });

    });

    </script>

  </head>

  <body ng-controller="main">

    <ul>

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

    </ul>

  </body>

</html>


												


											
angularjs数据交互的更多相关文章
	

    
								
  1. AngularJS: 自定义指令与控制器数据交互
		
    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    2. 
						
  2. angularJs中自定义directive的数据交互
		
    首先放官方文档地址:https://docs.angularjs.org/guide/directive 就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模 ...
    
		
    3. 
						
  3. angularJS中directive父子组件的数据交互
		
    angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在  ...
    
		
    4. 
						
  4. AngularJs $resource 高大上的数据交互
		
    $resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 需要注入 ngResource 模块.angular-resource[.min].js  ...
    
		
    5. 
						
  5. --@angularJS--$http服务与后台数据交互
		
    1.httpBasic.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title& ...
    
		
    6. 
						
  6. web实现数据交互的几种常见方式
		
    前言 在当今社会,作为一名前端程序猿,并不是一昧的去制作静态页面就可以满足滴:你说你会制作网页,好吧,只能说你算是一个前端程序猿.但这是你作为一个程序猿最基本的能力,并不会为你进行加分: 我们都明白, ...
    
		
    7. 
						
  7. Android客户端和服务器端数据交互
		
    网上有很多例子来演示Android客户端和服务器端数据如何实现交互不过这些例子大多比较繁杂,对于初学者来说这是不利的,现在介绍几种代码简单.逻辑清晰的交互例子,本篇博客介绍第四种: 一.服务器端: 代 ...
    
		
    8. 
						
  8. 使用Jquery.AJAX方法和PHP后台数据交互小结
		
    使用jQuery的AJAX方法和后台PHP进行数据交互,交互采用的数据格式JSON格式. 我主要小小的总结了一下,我使用AJAX方法时候遇到一些小小的问题. 第一:在传递数据的时候,传输地址注意是否正 ...
    
		
    9. 
						
  9. View与Control间的数据交互
		
    View与Control间的数据交互 1.ViewBag.Name ="Name1" 2.ViewData["VD"] = "view data&qu ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. golang GBK与UTF-8互转的例子
			
    package main import ( "code.google.com/p/mahonia" "fmt" ) func main() { //" ...
    
			
    2. 
						
  2. 写了一个hiero检查任务渲染结果的脚本
			
    基本思路是写了一个时间判断函数(postSequence_check)来对比transcode任务提交时间和目标文件夹内文件的修改时间来确定渲染是否成功执行,然后通过Hiero提供的postSeque ...
    
			
    3. 
						
  3. C# winForm中调用javascript文件中的方法
			
    目前有很多的SNS社区或类SNS的网站,例如开心.51.校内等,但是发现大多数社区在邀请好友的时候都没有提供对QQ邮箱或者QQ空间好友列表获取的功能,不过似乎海内支持,但是网上相关QQ的文章还不是很多 ...
    
			
    4. 
						
  4. C/C++基础----随机数分布和随机数引擎
			
    随机数分布 除了伯努利分布,其他都是模板,接收单个类型参数,指出分布生成的结果类型. 表示分布生成浮点数,float.double或long double 表示要求一个整型类型,不包括bool或任何c ...
    
			
    5. 
						
  5. Hadoop概念学习系列之关于hadoop-2.2.0和hadoop2.6.0的winutils.exe、hadoop.dll版本混用（易出错）（四十三）
			
    问题详情是 2016-12-10 23:24:13,317 INFO [org.apache.hadoop.metrics.jvm.JvmMetrics] - Initializing JVM Met ...
    
			
    6. 
						
  6. jQuery :has() 选择器
			
    实例 1.选取所有包含有 <span> 元素在其内的 <p> 元素: $("p:has(span)")       2. <!DOCTYPE html ...
    
			
    7. 
						
  7. 学习笔记之Python全栈开发/人工智能公开课_腾讯课堂
			
    Python全栈开发/人工智能公开课_腾讯课堂 https://ke.qq.com/course/190378 https://github.com/haoran119/ke.qq.com.pytho ...
    
			
    8. 
						
  8. mariadb semi plugin遇到的坑
			
    安装完semi plugin运行一段时间后,重启mariadb, 突然发现canal无法解析数据了,一直在报错,然后登陆mariadb, show plugins竟然没有看到之前安装的semi plu ...
    
			
    9. 
						
  9. 记录Linux下解压大文件时的一次奇葩经历
			
    由于需要安装新的系统,使用wget下载tar包,8G多下载了1个多小时.解压完后的文件夹中的tar包数量明显不够,而且原始的tar包竟然不见了. 同样的操作又进行了一次,结果还是一样,不得不怀疑是哪里 ...
    
			
    10. 
						
  10. Socket的长连接和短连接
			
    讨论Socket必讨论长连接和短连接 一.长连接和短连接的概念 1.长连接与短连接的概念:前者是整个通讯过程,客户端和服务端只用一个Socket对象,长期保持Socket的连接:后者是每次请求,都新建 ...
    
			
    11.