AJax
Ajax 全程 Asynchronous JavaScript and XML 即 异步的JavaScript 和XML，AJax是一种无需重新加载整个网页的情况下，能够更新部分网页的技术，AJax不是一种的编程语言，而是一种用于创建更好更快以及更强的Web应用的技术
在2005年，Google Suggest使用AJax 创建出动态性极强的web界面：当你在谷歌的搜索框输入关键字时，JavaScript会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。
注意:
AJax需要引入JQuery
基本语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
/*
所有的参数：
url: 待载入页面的URL地址(必填)
data: 待发送的 key/value 参数
success: 载入成功时的回调函数
data: 请求返回的数据
status: 请求返回的状态
*/
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function a1(){
$.ajax({
url :"",
data: {"name":$("#textName").val()},
success :function (data,status){
alert(data);
alert(success);
}
});
}
</script>
</head>
<body>
用户名：<input type = "text" id = "textname" onblur="a1()"/>
</body>
</html>
|
两个实例
获取数据嵌入到html中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <body>
<input type = "button" id = "btn" value = "获取数据">
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tbody id = "content">
</tbody>
</table>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function (){
$.post({
url:"",
success: function (data){
var html = "";
for(var i = 0;i<data.length;i++){
html +="<tr>"+
"<td>"+ data[i].name+"</td>"+
"<td>"+data[i].age+"</td>"+
"<td>"+data[i].sex+"</td>"+
"</tr>"
}
$("#content").html(html);
}
})
})
});
</script>
|
登录注册
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function a2(){
$.post({
url :"",
data: {"pwd":$("#name").val()},
success :function (data){
if(data.toString()=='ok'){
$("#userinfo").css("color","green");
}else{
$("#userinfo").css("color","red");
}
$("#userinfo").html(data);
}
});
}
</script>
</head>
<body>
用户名：<input type = "text" id = "textname" onblur="a2()"/>
<span id = "userinfo"></span>
</body>
</html>
|
考试的真题
第一个页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| <!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>产品录入</title>
<link href="css/input.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#search div:first-child{
float: left;
padding-right: 10px;
width: 100px;
text-align: right;
}
#submit input{
width: 268px;
}
</style>
<script type="text/javascript" src = "js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("#submit input").click(function () {
var searchText = $("#search input").val();
if(searchText === ""){
$("#error").text("产品名称必须输入");
$("#error").css("color","#ff0000");
}else if(new RegExp("\\d").test(searchText)){
$("#error").text("产品名称中不能有数字")
$("#error").css("color","#ff0000");
}else {
window.location.href = "product.html";
}
});
});
</script>
</head>
<body>
<div id="search">
<div>产品名称</div>
<div><input type="text" placeholder="请输入产品名称"></div>
</div>
<div id="error"></div>
<div id="submit"><input type="button" value="录入"></div>
</body>
</html>
|
第二个页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>产品</title>
<script type="text/javascript" src = "js/jquery-3.1.1.min.js"></script>
<style>
table, th, td
{
border: 1px solid black;
}
table tr td {
width: 150px;
height: 100px;
}
table tr:nth-child(1){
height: 30px;
}
table tr td:nth-child(1){
width: 100px;
}
a{
color: #00ff00;
}
a:hover{
color: #ff0000;
}
tr>td:nth-child(4){
background: #ffffd0;
}
</style>
<script>
$(document).ready(function (){
$("#search").click(function (){
$.post({
url:"http://47.108.14.103:8001/getProduct",
data:{"name":$("#name").val()},
success: function (data){
var html = "";
html+="<table ><tr><td></td><td>品牌</td> <td>型号</td> <td>价格</td></tr>"
for(var i = 0;i<data.data.length;i++){
html+="<tr><td><img src='http://47.108.14.103:8001/img/"+data.data[i].image+"' width='100px' height='100px'></td><td>"+data.data[i].brand+"</td> <td><a href='http://47.108.14.103:8001/img/"+data.data[i].image+"' target='_blank'>"+data.data[i].model+"</a></td> <td>"+data.data[i].price+"</td></tr>";
}
html+="</table>"
$("#product").html(html);
}
})
})
})
</script>
</head>
<body>
<div>
<input type="text" id="name" placeholder="请输入产品名称">
<input type="button" id="search" value="搜索"></div>
<div id="product"></div>
</body>
</html>
|