AngularJS中的 XMLHttpRequest （$http）相当于jQuery中的ajax

最新推荐文章于 2023-07-16 21:27:56 发布
最新推荐文章于 2023-07-16 21:27:56 发布
阅读量465 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/greensomnuss/article/details/70925373
版权

具体实现功能为 点击click按钮使得从url中获取得到的数据显示到界面，在点一次数据消失。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="siteCtrl"> 
<button ng-click="toggle()">look</button>

<ul ng-show="myVar">
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('siteCtrl', function($scope, $http) {

$http({
method: 'get',
url: 'http://www.runoob.com/try/angularjs/data/sites.php'
}).then(function successCallback(response) {
$scope.names = response.data.sites;
}, function errorCallback(response) {
// 请求失败执行代码
});
  
 $scope.toggle = function() {  
$scope.myVar = !$scope.myVar;
    };

  
});
</script>

</body>
</html>

greensomnuss
关注
jsp&ajax学习笔记
weixin_44736938的博客
06-30 1390
jsp&ajax学习笔记
什么是Ajax（Ajax的来历、运行原理、优缺点及其它）
IT修真院：初学者转行到互联网的聚集地
05-11 1114
这里是修真院web小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析web知识/技能，本篇分享的是： 【什么是Ajax（Ajax的来历、运行原理、优缺点及其它）】 大家好，我是IT修真院深圳分院第3期的学员，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网前端工程师深度思考中的知识点——什...
AngularJS XMLHttpRequest
01-21
AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。 使用格式： // 简单的 GET 请求，可以改为 POST $http({     method: 'GET',     url: '/someUrl' }).then(function successCallback(response) {         // 请求成功执行代码     }, function errorCallback(response) {         // 请求失败执行代码 }); 简写方法 POST 与 GET 简写方法格式
angularjs $http服务--XMLHTTPRequest && SQL
待归魔帝的博客
11-10 758
angularjs中的XMLHttpRequest $http是angularjs中的一个核心服务，它实现了前后端的数据交互，不像ajax那样烦琐，在angularjs中只需要使用$http服务即可实现网页的局部动态获取数据。 对于$http服务的格式，在angularjs中有两种写法，一种是常规的写法有些复杂，但是不难理解，另一种是属于简单的写法，分别如下： 常规的写法：$http({
jquery
07-31
6. **Ajax（Asynchronous JavaScript and XML）**: jQuery的`.ajax()`方法封装了XMLHttpRequest对象，简化了Ajax请求的编写。同时，还有`.get()`, `.post()`等简化的版本。 7. **插件生态（Plugin Ecosystem）**: ...
AngularJS基础学习笔记
qq_37962735的博客
12-04 318
  Angular是什么？优点？ 前端MVC框架 克服了HTML在构建应用上的诸多不足 特点 jQuery以dom为驱动(核心) angularjs以数据和逻辑作为驱动(核心) 最核心的是：模块化、双向数据绑定、语义化标签、依赖注入 MVC是一种开发模式 M--&gt;model一般...
angularjs学习总结(~~很详细的教程) 适合快速了解angularjs整体结构 有个整体印象
热门推荐
麦田中的麦田鱼<・)))><<的博客
01-27 1万+
1 前言 前端技术的发展是如此之快，各种优秀技术、优秀框架的出现简直让人目不暇接，紧跟时代潮流，学习掌握新知识自然是不敢怠慢。 AngularJS是google在维护，其在国外已经十分火热，可是国内的使用情况却有不小的差距，参考文献/网络文章也很匮乏。这里便将我学习AngularJS写成文档，一方面作为自己学习路程上的记录，另一方面也给有兴趣的同学一些参考。 首先我自己也是一名学
AngularJS入门教程之 XMLHttpRequest实例讲解
12-13
AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。 读取 JSON 文件 以下是存储在web服务器上的 JSON 文件： http://www.mscto.com/try/angularjs/data/Customers_JSON.php { "records": [ { "Name" : "Alfreds Futterkiste", "City" : "Berlin", "Country" : "Germany" }, { "Name" : "Berglunds snabbköp", "City" :
angular 用拦截器统一处理http请求和响应的方法
12-10
想使用angularjs里的htpp向后台发送请求,现在有个用户唯一识别的token想要放到headers里面去，也就是{headres:{‘token’:1}} index.html里引入以下js： angular.module('app.factorys',[]) .factory('httpInterceptor',['$q','$injector','$localStorage',function ($q,$injector,$localStorage) { var httpInterceptor = { 'responseError' : function(
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
11-29
本文实例讲述了AngularJS出现$http异步后台无法获取请求参数问题的解决方法。分享给大家供大家参考，具体如下： angular在通过异步提交数据时使用了与jQuery不一样的请求头部和数据序列化方式,导致部分后台程序无法正常解析数据。 原理分析（网上的分析）： 对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应。整个过程示例如下： var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatech
如何AngularJS 中使用 XMLHttpRequest 进行数据通信？
网络技术联盟站
07-16 128
XMLHttpRequest 对象是 Web 浏览器提供的一种原生 JavaScript 对象，用于在后台与服务器进行数据交互。它能够发送 HTTP 请求并接收服务器返回的数据，而不会阻塞用户界面。在 AngularJS 中，我们可以通过$http服务来封装和使用 XMLHttpRequest 对象。$http服务提供了许多方法和选项，用于发送和处理 HTTP 请求。在本文中，我们详细介绍了 AngularJS 中使用 XMLHttpRequest 进行数据通信的方法和技巧。我们学习了如何使用$http。
AngularJS XMLHttpRequest请求解释
shaleilei的博客
11-17 668
{{ x.Name + ', ' + x.Country }} 关于angular.js中$http的解释.success是http请求成功自带的方法 .response是success内function里传的参数，就是个参数而已，一般喜欢用res或者response 至于.records我也是来百度的，网上没找到，看结果估计是只取JSON中的value
从jquery里的$.ajax()到angularjs的$http
weixin_30642561的博客
09-22 145
jquery中对ajax的使用做了很多封装，使得我们使用习惯了，反而并不大清楚在请求过程中的一些细节。 在第一次使用angularjs的$http时，后台一直接受不到前端请求的数据，于是小小研究了一下。 用我自己这边的项目为例，后台服务这边接受请求的方式是通过HttpContext.Request.Params来，原来用jquery中的Ajax请求一直正常，一换到原始的$http,瞬...
jQuery(四)--HTTP请求
weixin_30701575的博客
11-30 206
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"&...
AngularJS XMLHttpRequest
qq_21119289的博客
12-26 459
读取JSON文件：{ "sites": [ { "Name": "菜鸟教程", "Url": "www.runoob.com", "Country": "CN" }, { "Name": "Google", "Url": "w
jquery中的$ajax
最新发布
08-30
在 jQuery 中，你可以使用 `$ajax()` 方法来发起 AJAX 请求。该方法是对底层的 `XMLHttpRequest` 进行了封装，使得 AJAX 请求更加便捷。以下是一个使用 `$ajax()` 方法的示例： ```javascript $.ajax({ url: '/api/data', type: 'GET', success: function(response) { // 请求成功，获取响应数据 const data = response; // 调用渲染页面的函数，并传递数据 renderPage(data); }, error: function(xhr, status, error) { // 请求失败，处理错误 console.error(error); } }); ``` 在这个示例中，我们通过传递一个包含请求参数的对象给 `$ajax()` 方法来发起 AJAX 请求。对象中包含了请求的 URL、请求类型（GET、POST 等）、请求成功和失败的回调函数等。 - `url`：请求的 URL 地址。 - `type`：请求的类型，比如 GET、POST 等。 - `success`：请求成功时执行的回调函数，该函数接收响应数据作为参数。 - `error`：请求失败时执行的回调函数，该函数接收 `XMLHttpRequest` 对象、错误状态和错误信息作为参数。 在成功回调函数中，你可以将响应数据传递给渲染页面的函数进行页面渲染。 需要注意的是，上述示例是一个简单的版本，实际情况中可能会有更多的配置项，比如请求头、请求参数等。你可以根据需要在对象中添加相应的配置。 此外，使用 `$ajax()` 方法时，需要确保已经引入了 jQuery 库。你可以通过 CDN 或者本地方式引入 jQuery 库。 ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 同时，确保后端服务正常运行，并提供正确的 API 接口来响应请求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值