豫ICP备17040950号-2

jQuery学习笔记——Ajax篇

设计开发
文章目录
  1. 1. 显示欢迎信息
  2. 2. 执行认证
  3. 3. 验证用户名
  4. 4. 使用自动完成
  5. 5. 导入HTML
  6. 6. 取得JSON数据
  7. 7. 取得XML数据
  8. 8. 结束语
  9. 9. 参考文档

显示欢迎信息

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）》