jQuery学习笔记——Ajax篇

显示欢迎信息

Ajax的优点我们已经说过了,上个例子先!

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
<!--显示欢迎信息.html-->
<html>
<head>
<title>显示欢迎信息</title>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$("#submit").click(function(){
var name = $(".uname").val();
var data = "uname=" + name;
$.ajax({
type:"POST",
url:"http://demo.voidking.com/welcome.php",
data:data,
success: function(html){
$("#message").html(html);
}
});
return false;
});
});
</script>
</head>
<body>
<form>
<label>Enter your name</label>
<input type="text" name="uname" class="uname" /><br/>
<input type="submit" id="submit"/>
</form>
<div id="message">
</div>
</body>
</html>

1
2
3
4
5
<!--welcome.php-->
<?php
$name = $_POST['uname'];
echo "welcome ".$name;
?>

把ajax实例01.html、welcome.php、jquery-1.11.1.js上传到自己的服务器。打开浏览器访问“显示欢迎信息.html”,输入一个名字,就能看到效果了。

为什么要上传服务器,搞的这么麻烦?大哥,ajax主要就是用来和服务器交互的好不好?如果你觉得麻烦,可以直接访问我的服务器查看效果:VoidKing编程实例,接下来的例子也可以在这个网页找到。

当然,你也可以直接本地打开“显示欢迎信息.html”,但是提交数据没有反应,因为同源策略限制交互。怎么破?简单点,本地搭建一个php服务器!高大上点,自行百度,修改代码!

执行认证

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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ajax实例02</title>
<script src="jquery-1.11.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#submit').click(function () {
var name = $('.uname').val();
var pwd = $('.passwd').val();
var data='uname='+name+'&password='+pwd;
$.ajax({
type:"GET",
url:"logincheck.php",
data:data,
success:function(html) {
$("#message").html(html);
}
});
return false;
});
});
</script>
</head>
<body>
<p>用户名输入guest,密码输入jquery,会出现欢迎信息,否则显示未注册</p><br/>
<form>
<label>Enter your Name</label>
<input type="text" name="uname" class="uname"/> <br/>
<label>Enter your Password</label>
<input type="password" name="password" class="passwd"/> <br/>
<input type="submit" id="submit"/>
</form>
<div id="message"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
<!--logincheck.php-->
<?php
$name = trim($_GET['uname']);
$pswd = trim($_GET['password']);
if(($name=="guest") && ($pswd=="jquery"))
echo "Welcome ". $name;
else
echo "Sorry you are not authorized";
?>

验证用户名

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
<html>
<head>
<meta charset="UTF-8">
<title>验证用户名</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function() {
$('.error').hide();
$('#submit').click(function () {
var name = $('.uname').val();
var data='uname='+name;
$.ajax({
type:"POST",
url:"validateuser.php",
data:data,
success:function(html) {
$('.error').show();
$('.error').text(html);
}
});
return false;
});
});
</script>
</head>
<body>
<p>验证用户名,只能是数字、字母和下划线</p><br/>
<form>
<span class="label">Enter your Name</span>
<input type="text" name="uname" class="uname"/> <span class="error"> </span><br>
<input type="submit" id="submit"/>
</form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
<!--validateuser.php-->
<?php
$name = $_POST['uname'];
if (!eregi("^[a-zA-Z0-9_]+$", $name))
{
echo "Invalid User name!";
}
else
{
echo "Great user name!";
}
?>

使用自动完成

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
71
<html>
<head>
<meta charset="UTF-8">
<title>使用自动完成</title>

<style type="text/css">
.listbox {
position: relative;
left: 10px;
margin: 10px;
width: 200px;
background-color: #000;
color: #fff;
border: 2px solid #000;
}

.nameslist {
margin: 0px;
padding: 0px;
list-style:none;
}

.hover {
background-color: cyan;
color: blue;
}
</style>

<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function() {
$('.listbox').hide();
$('.userid').keyup(function () {
var uid = $('.userid').val();
var data='userid='+uid;
$.ajax({
type:"POST",
url:"autocomplete.php",
data:data,
success:function(html) {
$('.listbox').show();
$('.nameslist').html(html);
$('li').hover(function(){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
});
$('li').click(function(){
$('.userid').val($(this).text());
$('.listbox').hide();
});
}
});
return false;
});
});
</script>
</head>
<body>
<p>输入名字的第一个字符时,弹出建议框。</p><br/>
<form>
<span class="label">Enter user id</span>
<input type="text" name="userid" class="userid"/>
<div class="listbox">
<div class="nameslist">
</div>
</div>
</form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php   
$name = $_POST['userid'];
$connect = mysql_connect("localhost", "demo", "voidking") or die("Please, check your server connection.");
mysql_select_db("demo");
$query = "SELECT name from user where name like '$name%'";
$results = mysql_query($query) or die(mysql_error());
if($results)
{
while ($row = mysql_fetch_array($results)) {
extract($row);
echo '<li>' . $name. '</li>';
}
}
?>

导入HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--导入HTML-->
<html>
<head>
<meta charset="UTF-8">
<title>导入HTML</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function() {
$('.list').click(function () {
$('#message').load('namesinfo.html');
return false;
});
});
</script>
</head>
<body>
<p>单击超链接,从另一个文件中导入一些HTML内容到当前网页中。</p><br/>
<p>We are going to organize the Conference on IT on 2nd Feb 2010</p>
<a href="http://demo.voidking.com" class="list">Participants</a>
<div id="message"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
<!--namesinfo.html-->
<p>The list of the persons taking part in conference </p>
<ul>
<li>Jackub</li>
<li>Jenny</li>
<li>Jill</li>
<li>John</li>
</ul>
<p>We wish them All the Best</p>

取得JSON数据

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
<!--取得JSON数据-->
<html>
<head>
<meta charset="UTF-8">
<title>取得JSON数据</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function() {
$('#submit').click(function () {
$.ajax({
type:"GET",
url:"drinkinfo.json",
dataType:"json",
success: function (data) {
var drinks="<ul>";
$.each(data, function(i,n){
drinks+="<li>"+n["optiontext"]+"</li>";
});
drinks+="</ul>";
$('#message').append(drinks);
}
});
return false;
});
});
</script>
</head>
<body>
<p>从JSON文件中异步地导入信息到当前的网页中。</p><br/>
<p>For information from JSON file click the button given below :<br>
<input type="submit" id="submit"/>
<div id="message"></div>
</body>
</html>

drinkinfo.json文件内容如下:

1
2
3
4
5
[
{"optiontext" : "Tea", "optionvalue" : "Tea"},
{"optiontext" : "Coffee", "optionvalue" : "Coffee"},
{"optiontext" : "Juice", "optionvalue" : "Juice"}
]

矮油我靠,在服务器上打开浏览器,读取正常;在本地打开浏览器,居然无法读取,404错误!

经过测试,只要把文件名更改一下就好了。即把drinkinfo.json改成drinkinfo.txt。真是个奇葩问题,个人猜测是浏览器传输文件有格式限制。

取得XML数据

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
<html>
<head>
<meta charset="UTF-8">
<title>取得XML数据</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function () {
$.ajax({
type:"GET",
url:"student.xml",
dataType:"xml",
success: function (sturec) {
var stud="<ul>";
$(sturec).find('student').each(function(){
var name = $(this).find('first-name').text()
stud+="<li>"+name+"</li>";
});
stud+="</ul>";
$('#message').append(stud);
}
});
return false;
});
});
</script>
</head>
<body>
<p>从student.xml文件中异步导入信息到当前的网页中。</p><br/>
<p>To see the Names of the students extracted from XML file click the button given below :</p>
<input type="submit" id="submit"/>
<div id="message"></div>
</body>
</html>

student.xml文件内容如下:

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
<?xml version="1.0" encoding="utf-8" ?>
<school>
<student>
<roll>101</roll>
<name>
<first-name>Anil</first-name>
<last-name>Sharma</last-name>
</name>
<address>
<street>
22/10 Sri Nagar Road
</street>
<city>
Ajmer
</city>
<state>
Rajasthan
</state>
</address>
<marks>
85
</marks>
</student>
<student>
<roll>102</roll>
<name>
<first-name>Manoj</first-name>
<last-name>Arora</last-name>
</name>
<address>
<street>
H.No 11-B Alwar Gate
</street>
<city>
Ajmer
</city>
<state>
Rajasthan
</state>
</address>
<marks>
92
</marks>
</student>
</school>

结束语

以上例子,全部摘自《jQuery攻略》,不详解,看代码!

参考文档

李炎恢的jQuery视频教程
《jQuery攻略(作者B.M.Harwani)》
《jQuery实战(作者Bear Bibeault、Yehuda Katz)》
《jQuery高级编程(作者 Cesar Otero、Rob Larsen)》
《jQuery Javascript 与CSS开发入门经典(作者Richard York)》

0%