异步问题
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. angularJs中自定义directive的数据交互

    首先放官方文档地址:https://docs.angularjs.org/guide/directive 就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模 ...

  3. angularJS中directive父子组件的数据交互

    angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...

  4. AngularJs $resource 高大上的数据交互

    $resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 需要注入 ngResource 模块.angular-resource[.min].js ...

  5. --@angularJS--$http服务与后台数据交互

    1.httpBasic.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title& ...

  6. web实现数据交互的几种常见方式

    前言 在当今社会,作为一名前端程序猿,并不是一昧的去制作静态页面就可以满足滴:你说你会制作网页,好吧,只能说你算是一个前端程序猿.但这是你作为一个程序猿最基本的能力,并不会为你进行加分: 我们都明白, ...

  7. Android客户端和服务器端数据交互

    网上有很多例子来演示Android客户端和服务器端数据如何实现交互不过这些例子大多比较繁杂,对于初学者来说这是不利的,现在介绍几种代码简单.逻辑清晰的交互例子,本篇博客介绍第四种: 一.服务器端: 代 ...

  8. 使用Jquery.AJAX方法和PHP后台数据交互小结

    使用jQuery的AJAX方法和后台PHP进行数据交互,交互采用的数据格式JSON格式. 我主要小小的总结了一下,我使用AJAX方法时候遇到一些小小的问题. 第一:在传递数据的时候,传输地址注意是否正 ...

  9. View与Control间的数据交互

    View与Control间的数据交互 1.ViewBag.Name ="Name1" 2.ViewData["VD"] = "view data&qu ...

随机推荐

  1. golang 自定义json解析

    在实际开发中,经常会遇到需要定制json编解码的情况. 比如,按照指定的格式输出json字符串, 又比如,根据条件决定是否在最后的json字符串中显示或者不显示某些字段. 如果希望自己定义对象的编码和 ...

  2. mvc 部署到iis 提示错误未能加载文件或程序集System.Web.Http.WebHost

    Nuget程序包管理 —>程序包管理控制台,运行以下命令即可: Update-Package Microsoft.AspNet.WebApi -reinstall

  3. Eclipse提交代码到Spark集群上运行

    Spark集群master节点:      192.168.168.200 Eclipse运行windows主机: 192.168.168.100 场景: 为了测试在Eclipse上开发的代码在Spa ...

  4. Nuke中新建线程的方法

    最近维护合成部门的nuke工具包,发现不少工具的使用方法都很个人化,没有说明文档.这也导致artist在使用工具的时候比较感性,调整参数的时候缺少前后逻辑,长此以往,artist会产生这种意识:只要最 ...

  5. influxDB硬件配置指南

    原地址:https://docs.influxdata.com/influxdb/v1.6/guides/hardware_sizing/ 警告!此页面记录了不再积极开发的InfluxDB的早期版本. ...

  6. php 直接获取url参数赋值成变量。省去繁琐的获取参数,再一个个赋值

    php 直接获取url参数赋值成变量.省去繁琐的获取参数,再一个个赋值 parse_url() 该函数可以解析 URL,返回其组成部分.它的用法如下: array parse_url(string $ ...

  7. navigator 判断移动端是Android还是iOS

    let u = navigator.userAgent; let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > - ...

  8. Nexus3.6版私服搭建安装与配置教程

    1.本地环境配置(Nexus3.6支持jdk版本1.6.1.7.1.8) 1.1.官网下载地址:https://www.sonatype.com/download-oss-sonatype       ...

  9. 流媒体技术笔记(DarwinStreamingServer相关)

    简介 Darwin Streaming Server简称DSS.DSS是Apple公司提供的开源实时流媒体播放服务器程序.整个程序使用C++编写,在设计上遵循高性能,简单,模块化等程序设计原则,务求做 ...

  10. SQL优化系列——子查询

    sql调优方法: (1)not in子查询优化 尽量避免子查询select * from a where id not in(select id from b); select * from a wh ...