Ajax与AngularJS
2020-04-08 本文已影响0人
小潤澤
为什么要用Ajax
整体加载，速度很慢，如果向后台提交表单，内容不合格，那么之前的也要重新填写
那么Ajax的作用就是客户端在不刷新页面的条件下，向服务器端发送请求，这样就不会影响用户体检了
Ajax运行环境
Ajax虽然是客户端JS的代码，但是它必须运行在web服务器中才可以执行
基本语法
首先在html文件中的bady标签下接入<script>
<script type = "text/javascript">
//1.创建ajax对象
var xhr = new XMLHttpRequest();
//2.发送请求的方式，get/post请求
xhr.open('get', 'http: ');
//3.发送请求
xhr.send();
//4.获取web端
xhr.onload = function (){
console.log(xhr.responseText)
}
</script>
其中responseText是获得字符串形式的相应数据；responseXML为获得 XML 形式的响应数据
如果要设置触发点击时发动请求
<body>
<p>
<input type="text" name="" id="username">
</p>
<p>
<input type="text" name="" id="age">
</p>
<p>
<input type="button" value="提交" id="btn">
</p>
<script type="text/javascript">
var btn = document.getElementById('btn');
var username = document.getElementById('username');
var age = document.getElementById('age');
btn.onclick = function (){
var xhr = new XMLHttpRequest();
var nameValue = username.value;
var ageValue = age.value;
var params = 'username='+ nameValue + '&age=' + ageValue;
xhr.open('get','http://localhost:3000/first?'+params);
xhr.send();
xhr.onload = function () {
console.log(xhr.responseText)
}
}
</script>
</body>
Ajax封装
将Ajax封装成一个函数
<body>
<script type="text/javascript">
function ajax(options) {
var xhr = new XMLHttpRequest();
xhr.open(options.type,options.url);
xhr.send();
xhr.onload = function () {
console.log(xhr.responseText);
}
}
ajax({
//请求方式
type: 'get',
//请求地址
url: 'http: '
success: function (data) {
console.log('success' + data)
}
})
</script>
</body>
Ajax与form
使用form表单的时候，一旦点击提交触发submit事件，一般会使得页面跳转，
而Ajax实现的是异步提交，所以页面不会跳转
<body>
<form id="form">
<input type="text" name="username">
<input type="password" name="password">
<input type="button" id="btn" value="提交">
</form>
<script type="text/javascript">
var btn = document.getElementById('btn');
var form = document.getElementById('form');
btn.onclick = function () {
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('post', 'http://localhost:3000/formData');
xhr.send(formData);
xhr.onload = function () {
if (xhr.status == 200) { //200是返回的状态码
console.log(xhr.responseText);
}
}
}
</script>
</body>
Angular JS
Angular JS是前端的一种结构性框架，在前端的
基本的表达式是
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<title></title>
</head>
<body >
<div ng-app>
<p>表达式: {{ 5+5 }}</p>
</div>
</body>
</html>
在head标签下，我们利用script标签引入angularjs模块
其中angularjs的表达式写在双大括号内
在div标签里面添加ng-app
ng-app：初始化angularjs
ng-init：初始化数据
ng-model：绑定数据值
ng-repeat：循环指令
ng-model
ng-model的作用是进行数据绑定
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model=" ">
{{ expression}}
</div>
其中，ng-model后面接你要绑定的内容
ng-controller
ng-controller 指令定义了应用程序控制器，什么意思呢，也就是说你可以自定义输入的数据
<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
</div>
<script>
expression
</script>
具体实例：
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
这里的script下面就是页面输入框默认内容其中scope是作用域，目的是调用控制器，firstName和lastName是控制器的两个属性
myCtrl 是一个 JavaScript 函数。
当然，script也考试院通过src参数调取外部脚本
过滤器
简而言之，过滤器就是隐藏我不想显示的内容,加 | 来过滤
<script src="//cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ firstName | lowercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe",
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
</body>
</html>
比方说我要保留firstName，就在 | 前面加上firstName即可；如果要保留lastName，就在 | 前面加上lastName即可
