AJAX——异步请求传递参数

最新推荐文章于 2023-11-15 20:51:09 发布

爪哇天河

最新推荐文章于 2023-11-15 20:51:09 发布

阅读量587

点赞数

分类专栏： web 文章标签： AJAX 传参数

本文链接：https://blog.csdn.net/ps_zhanglei/article/details/42458971

版权

web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

txtHint.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/clienthint.js"></script>
</head>
<body>
	<form> 
		First Name:<input type="text" id="txt1" οnkeyup="showHint(this.value)" />
	</form>

	<p>Suggestions: <span id="txtHint"></span></p> 
</body>
</html>

js文件如下：

var xmlHttp;

function showHint(str) {

	if (str.length == 0) {
		document.getElementById("txtHint").innerHTML = "";
		return;
	}

	xmlHttp = GetXmlHttpObject();

	if (xmlHttp == null) {
		alert("您的浏览器不支持AJAX！");
		return;
	}

	var url = "jsp/gethint.jsp";
	url = url + "?q=" + str;
	url = url + "&sid=" + Math.random();
	xmlHttp.onreadystatechange = stateChanged;
	xmlHttp.open("GET", url, true);
	xmlHttp.send(null);
}

function stateChanged() {
	if (xmlHttp.readyState == 4) {
		document.getElementById("txtHint").innerHTML = xmlHttp.responseText;
	}
}

function GetXmlHttpObject() {
	var xmlHttp = null;
	try {
		// Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();
	} catch (e) {
		// Internet Explorer
		try {
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	return xmlHttp;
}

处理的jsp文件如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%
		String [] a = new String [30];

		//'用名字为数组赋值
		a[0]="Vicky";
		a[1]="Anna";
		a[2]="Brittany";
		a[3]="Cinderella";
		a[4]="Diana";
		a[5]="Eva";
		a[6]="Fiona";
		a[7]="Gunda";
		a[8]="Hege";
		a[9]="Inga";
		a[10]="Johanna";
		a[11]="Kitty";
		a[12]="Linda";
		a[13]="Nina";
		a[14]="Ophelia";
		a[15]="Petunia";
		a[16]="Amanda";
		a[17]="Raquel";
		a[18]="Cindy";
		a[19]="Doris";
		a[20]="Eve";
		a[21]="Evita";
		a[22]="Sunniva";
		a[23]="Tove";
		a[24]="Unni";
		a[25]="Violet";
		a[26]="Liza";
		a[27]="Elizabeth";
		a[28]="Ellen";
		a[29]="Wenche";
		

		//'从URL取得参数q
		String q=request.getParameter("q");
		String hint="";
		//'如果q的长度大于0，则查找所有的hint
		if(q.length()>0){
 			 for (int i = 0;i<30;i++){
 				if(a[i].contains(q)){
 					 if("".equals(hint)){
 						hint = a[i];
 					 }else{
 						hint= hint+" , "+a[i];
 					 }
 				} 
 			 }
		}

		//'如果找不到hint，则输出"no suggestion"
		//'或者输出正确的值
	if("".equals(hint)){
		out.write("no suggestion");
	}else{
		out.write(hint);
	}
%>
</body>
</html>

爪哇天河

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX——异步请求传递参数

txtHint.html：Insert title here First Name: Suggestions: js文件如下：var xmlHttp;function showHint(str) { if (str.length == 0) { document.getElementById("txtHint").innerHTML = "
复制链接

扫一扫