下載jquery地址：http://www.jq22.com/jquery-info122
下載完成後copy到WebRoot目錄下
把Ajax（一）轉爲Ajax
userValidate.java文件不變，複製index.jsp文件命名爲indexAjax.jsp
indexAjax.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function userNameValidate(){
var userName = document.getElementById("userName").value;
$.ajax({
url:"UserValidate",
data:"userName=" + userName,
dataType:"text",
success:function (data){
$("#nameValidateReturn").html(data);
},
error:function (){
alert("出錯了！");
}
});
}
function userPasswordValidate(){
var userPassword = document.getElementById("userPassword").value;
$.ajax({
url:"UserValidate",
data:"userPassword=" + userPassword,
dataType:"text",
success:function (data){
$("#passwordValidateReturn").html(data);
},
error:function (){
alert("出錯了！");
}
});
}
function userIsNull(){
var userName = document.getElementById("userName").value;
var userPassword = document.getElementById("userPassword").value;
if(userName == ""){
alert("請輸入用戶名！");
return false;
}
if(userPassword == ""){
alert("請輸入密碼！");
return false;
}
var nameValidateReturn = document.getElementById("nameValidateReturn").innerHTML;
var passwordValidateReturn = document.getElementById("passwordValidateReturn").innerHTML;
if(nameValidateReturn == "ok"){
if(passwordValidateReturn =="ok"){
alert("登陸成功！");
return true;
}else{
alert(passwordValidateReturn);
return false;
}
}else{
alert(nameValidateReturn);
return false;
}
}
</script>
</head>
<body>
<form action="#" method="post" onsubmit="return userIsNull();">
<table cellspacing="15">
<tr>
<td>用戶名：</td>
<td><input type="text" id="userName" onblur="userNameValidate()" /></td>
<td><span id="nameValidateReturn" style="color:#EE7621;"></span></td>
</tr>
<tr>
<td align="right">密碼：</td>
<td><input id="userPassword" type="password" onblur="userPasswordValidate()"></td>
<td><span id="passwordValidateReturn" style="color:#EE7621;"></span></td>
</tr>
<tr>
<td align="center" colspan="2">
<input id="login" value="登陸" type="submit" class="login_btn">
</td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
智能補全搜索
search.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'search.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function searchList(){
var searchInfo = document.getElementById("searchInfo").value;
$.ajax({
url:"SearchListInfo",
data:"searchInfo=" + searchInfo,
datatype:"text",
success:function (data){
var searchReturnInfo = data.split(",");
var searchReturnHtml = "<ul>";
for(var i = 0; i < searchReturnInfo.length; i ++){
searchReturnHtml += "<li>" + searchReturnInfo[i] +"</li>";
}
searchReturnHtml += "</ul>";
$("#searchReturn").html(searchReturnHtml);
},
error:function (){
alert("出錯了！");
}
});
}
</script>
</head>
<body>
<input type="text" id="searchInfo" onkeyup="searchList()">
<div id="searchReturn"></div>
</body>
</html>
SearchListInfo.java
package com.doris.ajax.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class SearchListInfo extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
// 獲取搜索信息
String searchInfo = req.getParameter("searchInfo");
if(searchInfo != null && searchInfo.length() > 0){
// 中文亂碼
searchInfo=new String(searchInfo.getBytes("ISO-8859-1"),"GBK");
System.out.println(searchInfo);
// 設置數據信息
String info = "android,java,sql,ajax,orcl,sdk,http,servlet,spring,struts,struts2," +
"mvc,javascript,css,html,html5,cocos2dx,unity,ios,c,php,es6";
String[] listInfo = info.split(",");
String temp = "";
for(String item : listInfo){
if(item.contains(searchInfo)){
temp += "," + item;
}
}
if(temp.length() > 1){
temp=temp.substring(1);
}
// 將服務器的處理信息 輸出給客服端
resp.setContentType("text/html;charset=utf-8");
PrintWriter out=resp.getWriter();
out.write(temp);
out.flush();
out.close();
}
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req, resp);
}
}