JQ下的ajax读取xml内容

最新推荐文章于 2021-08-06 09:20:52 发布

萧萧可乐

最新推荐文章于 2021-08-06 09:20:52 发布

阅读量2.9k

点赞数

分类专栏： JQuery 文章标签： xml ajax function 游戏体育 xhtml

本文链接：https://blog.csdn.net/NIHAOX1/article/details/7452306

版权

JQuery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

XML内容：

<?xml version="1.0" encoding="utf-8"?>
<info>
<user>
	<name>王小虎</name>
	<sex>男</sex>
	<habit>电脑游戏</habit>
</user>
<user>
	<name>张小凡</name>
	<sex>男</sex>
	<habit>体育游戏</habit>
</user>
<user>
	<name>卓不凡</name>
	<sex>男</sex>
	<habit>网球游戏</habit>
</user>
</info>

html内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="JS/JQ.js"></script>
<script type="text/javascript" src="JS/JQ008.js"></script>
</head>

<body>
<p>改变输入框的内容（王、张、卓中任意）</p>
<input type="text" style="width:325px; height:25px;" />
</div>
</body>
</html>

JS内容：

$(document).ready(function(e) {
    $(":text").change(function(){
		try{
			$.ajax({
				type:"GET",
				url:"xml.xml",
				success:function(xml){
					$(xml).find("user").each(function(i) {
                        var name=$(this).children("name");
						var name_value=$(this).children("name").text();
						var sex_value=$(this).children("sex").text();
						var habit_value=$(this).children("habit").text();
						var text=$(":text").val();
						if($(this).children("name:contains('"+text+"')").length>0){
							alert("姓名："+name_value+",性别："+sex_value+",爱好："+habit_value);
						}
                    });
				}
			});	
		}catch(e){
			alert(e);	
		}
	});
});

后面想写一个类似baidu搜索时输入一个字符会出现后面字符的效果后面会放在下面

仿baidu搜索输入字符出现提示字

XML部分：

<?xml version="1.0" encoding="utf-8"?>
<info>
<user>
	<name>王小虎</name>
	<sex>男</sex>
	<habit>电脑游戏</habit>
</user>
<user>
	<name>王二虎</name>
	<sex>男</sex>
	<habit>电脑游戏</habit>
</user>
<user>
	<name>王三虎</name>
	<sex>男</sex>
	<habit>电脑游戏</habit>
</user>
<user>
	<name>王小丫</name>
	<sex>男</sex>
	<habit>电脑游戏</habit>
</user>
<user>
	<name>张小凡</name>
	<sex>男</sex>
	<habit>体育游戏</habit>
</user>
<user>
	<name>张二凡</name>
	<sex>男</sex>
	<habit>体育游戏</habit>
</user>
<user>
	<name>张三凡</name>
	<sex>男</sex>
	<habit>体育游戏</habit>
</user>
<user>
	<name>张无忌</name>
	<sex>男</sex>
	<habit>体育游戏</habit>
</user>
<user>
	<name>卓不凡</name>
	<sex>男</sex>
	<habit>网球游戏</habit>
</user>
<user>
	<name>卓一凡</name>
	<sex>男</sex>
	<habit>网球游戏</habit>
</user>
<user>
	<name>卓二凡</name>
	<sex>男</sex>
	<habit>网球游戏</habit>
</user>
<user>
	<name>卓天凡</name>
	<sex>男</sex>
	<habit>网球游戏</habit>
</user>
</info>

HTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="JS/JQ.js"></script>
<script type="text/javascript" src="JS/JQ008.js"></script>
</head>
<style>
.small{ width:325px; height:14px; font-family:"微软雅黑";float:left; margin:5px;}
</style>
<body>
<input type="text" style="width:325px; height:25px;" />
<div id="show" style="width:315px; border:1px solid #CCC; height:auto; position:absolute; top:40px; margin:0px; padding:0px;">
	<div class="small"></div>
</div>
</body>
</html>

JS部分：

$(document).ready(function(e) {
    $(":text").keyup
	(function(){
		try{
			$("#show").html("");
			$.ajax({
				type:"GET",
				url:"xml.xml",
				success:function(xml){
					$(xml).find("user").each(function(i) {
                        var name=$(this).children("name");
						var name_value=$(this).children("name").text();
						var sex_value=$(this).children("sex").text();
						var habit_value=$(this).children("habit").text();
						var text=$(":text").val();
						if($(this).children("name:contains('"+text+"')").length>0){
							$("#show").append("<div class='small'>" +name_value+"</div>");
						}
                    });
					$("#show").append("<div class='small'></div>");
				}
			});	
		}catch(e){
			alert(e);	
		}
	});
});