实验五 Ajax应用
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
实验五Ajax应用
【实验目的】
1、掌握jQuery对Ajax方法的支持；
2、掌握jQuery处理Ajax应用的常用方法；
3、掌握load、get、getJson、post等常用方法的应用。
【实验准备】
1、复习教材相关内容；
2、预习本次实验；
【实验内容】
1、实现用户注册时的用户名无刷新校验，效果如图5-1、5-2所示。
(说明：用.net 实现服务器端代码的提交jQuery代码和服务器端代码，用JSP实现的提交jQuery代码和servlet中的代码)
图5-1 图5-2
代码如下：
Register.java
package com.jgj.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;
@SuppressWarnings("serial")
public class Register extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("GB2312");
String uname = request.getParameter("uname");
PrintWriter out = response.getWriter();
if (uname.equals("jgj")) {// 仅起到测试作用
out.println("0");
} else {
out.println("1");
}
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
register.jsp
<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用户注册</title>
<style type="text/css">
.focus {
background-color: #FF66FF;
}
.importent {
color: #FF0000;
font-size: larger;
}
width: 140px;
height: 20px;
}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".input").focus(function() {
$(this).addClass("focus");
}).blur(function() {
$(this).removeClass("focus");
if ($(this).is("#uname")) {
if ($(this).val() == "") {
$(this).nextAll("label").text("用户名不能为空！");
} else {
$.post("register", {
uname : $(this).val()
}, function(msg) {
if (msg == 1) {
$("label:first").text("用户名可用！");
} else {
$("label:first").text("用户名已存在！");
}
});
}
}
if ($(this).is("#upass")) {
if ($(this).val() == "") {
$(this).nextAll("label").text("密码不能为空！");
}
}
if ($(this).is("#rupass")) {
if ($(this).val() == "") {
$(this).nextAll("label").text("重复不能为空！");
}
}
});
$("#reset").click(function() {
$(".input").val("");
$("label").text("");
});
});
</head>
<body>
<center>
<form method="post">
<table width="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100" align="right">
用户名：
</td>
<td width="300">
<input type="text" class="input" id="uname" name="uname" />
<span class="importent">*</span>
<label class="focus"></label>
</td>
</tr>
<tr>
<td align="right">
密码：
</td>
<td>
<input type="password" class="input" id="upass" />
<span class="importent">*</span>
<label class="focus"></label>
</td>
</tr>
<tr>
<td align="right">
重复密码：
</td>
<td>
<input type="password" class="input" id="rupass" />
<span class="importent">*</span>
<label class="focus"></label>
</td>
</tr>
</table>
<input type="submit" value="注册" />
<input type="button" id="reset" value="重置" />
</form>
</center>
</body>
2、实现二级联动的下拉列表框，其效果如图5-3所示。
(说明：用.net实现服务器端代码的提交jQuery代码和服务器端代码，用JSP实现的提交jQuery 代码和servlet中的代码)
图5-3
代码如下：
Street.java
package com.jgj.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Hashtable;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@SuppressWarnings("serial")
public class Street extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 模拟数据库
Hashtable<String, String[]> ht = new Hashtable<String, String[]>();
ht.put("1", new String[] { "清河区1", "清河区2", "清河区3", "清河区4" });
ht.put("2", new String[] { "清浦区1", "清浦区2", "清浦区3", "清浦区4" });
ht.put("3", new String[] { "淮阴区1", "淮阴区2", "淮阴区3", "淮阴区4" });
ht.put("4", new String[] { "开发区1", "开发区2", "开发区3", "开发区4" });
// 设置编码方式
response.setContentType("text/JSON;charset=utf-8");
response.setCharacterEncoding("utf-8");
response.setHeader("Cache-Control", "no-cache");
// out对象用于写JSON数据
PrintWriter out = response.getWriter();
// 接收页面传递过来的区县编号
String districtid = request.getParameter("qxid");System.out.println(11);
// 根据区县编号查询街道信息
String[] result = ht.get(districtid);
// 定义Stringbuffer类型的对象，创建JSON字符串
StringBuffer sb = new StringBuffer();
sb.append("[");
// 每一个street项
for (int i = 0; i < result.length; i++) {
sb.append("{");
sb.append("\"streetid\":" + (i + 1) + ",");
sb.append("\"streetname\":\"" + result[i] + "\"");
sb.append("}");
if (i < result.length - 1) {
sb.append(",");
}
}
sb.append("]");
// 将JSON数据写入到out对象中
out.print(sb.toString());
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
select.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("select:first").change(function() {
$.getJSON("street", {qxid: $(this).val()}, function(data) {
$('#streets').empty();
$('#streets').append("<option>请选择...</option>");
$.each(data, function(i, item) {
var streetid = item.streetid;
var streetname = item.streetname;
var tempoption = document.createElement("option");
tempoption.value = streetid;
tempoption.innerHTML = streetname;
$('#streets').append(tempoption);
});
});
});
});
</script>
</head>
<body>
<form name="form1" action="">
<label> 区县：</label>
<select name="districtid" id="districtid">
<option value="1">
清河区
</option>
<option value="2">
清浦区
</option>
<option value="3">
淮阴区
</option>
<option value="4">
开发区
</option>
</select>
<label> 街道：</label>
<select name="streets" id="streets">
<option selected>
请选择...
</option>
</select>
</form>
</body>
</html>
3、在下拉列表框中选择区县名称，查询结果在表格中显示出来。
整个过程中页面无刷新。
效果如图5-4所示。
(说明：用.net实现服务器端代码的提交jQuery 代码和服务器端代码，用JSP实现的提交jQuery代码和servlet中的代码)
图5-4
代码如下“
Data.jsp
package com.jgj.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Hashtable;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@SuppressWarnings("serial")
public class Data extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 模拟数据库
Hashtable<String, String[]> ht = new Hashtable<String, String[]>();
ht.put("1", new String[] { "清河区房屋", "清河区", "2室2厅", "2", "80", "60" });
ht.put("2", new String[] { "清浦区房屋", "清浦区", "2室2厅", "2", "80", "60" });
ht.put("3", new String[] { "淮阴区房屋", "淮阴区", "2室2厅", "2", "80", "60" });
ht.put("4", new String[] { "开发区房屋", "开发区", "2室2厅", "2", "80", "60" });
// 设置编码方式
response.setContentType("text/JSON;charset=utf-8");
response.setCharacterEncoding("utf-8");
response.setHeader("Cache-Control", "no-cache");
// out对象用于写JSON数据
PrintWriter out = response.getWriter();
// 接收页面传递过来的区县编号
String districtid = request.getParameter("qxid");
// 根据区县编号查询街道信息
String[] result = ht.get(districtid);
// 定义Stringbuffer类型的对象，创建HTML，以一条信息测试使用
StringBuffer sb = new StringBuffer();
sb
.append("<table><tr><td>房屋名称</td><td>所在区县</td><td>房型</td><td>楼层</td><td>面积</td><td>价格</td></tr>");
sb.append("<tr><td>" + result[0] + "</td>");
sb.append("<td>" + result[1] + "</td>");
sb.append("<td>" + result[2] + "</td>");
sb.append("<td>" + result[3] + "</td>");
sb.append("<td>" + result[4] + "</td>");
sb.append("<td>" + result[5] + "</td></tr>");
sb.append("</table>");
// 将JSON数据写入到out对象中
out.print(sb.toString());
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
search.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<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 src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#search").click(function(){
$.post("data",{qxid:$("#qxid").val()},function(data){
$("#result").empty();
$("#result").append(data);
})
});
});
</script>
</head>
<body>
<div align="center">
<form >
<label><p>选择房屋所在区县：</p>
<select id="qxid">
<option value="1">清河区</option>
<option value="2">清浦区</option>
<option value="3">淮阴区</option>
<option value="4">开发区</option>
</select>
</label>
<button id="search">开始查询</button>
</form>
</div>
<div id="result" align="center"></div>
</body>
</html>
【总结与体会】
通过本次实验掌握了jQuery对Ajax方法的支持、掌握了jQuery处理Ajax应用的常用方法、掌握了load、get、getJson、post等常用方法的应用，但是在操作的过程中也发现了很多的问题，在以后的学习中更加努力，争取早日做到得心应手的运用本次试验的内容。