实验五 AJAX应用
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
} } });
$("#reset").click(function() { $(".input").val(""); $("label").text("");
}); });
</script>Fra Baidu bibliotek</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"
</html>
2、实现二级联动的下拉列表框，其效果如图 5-3 所示。(说明：用.net 实 现服务器端代码的提交 jQuery 代码和服务器端代码，用 JSP 实现的提交 jQuery 代码和 servlet 中的代码)
图 5-3
代码如下： Street.java
package com.jgj.servlet;
$(this).addClass("focus"); }).blur(function() {
$(this).removeClass("focus"); if ($(this).is("#uname")) {
if ($(this).val() == "") { $(this).nextAll("label").text("用户名不能为空！");
request.setCharacterEncoding("GB2312"); String uname = request.getParameter("uname");
PrintWriter out = response.getWriter(); if (uname.equals("jgj")) {// 仅起到测试作用
/> <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>
@SuppressWarnings("serial") public class Register extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
.importent { color: #FF0000; font-size: larger;
}
.input { 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() {
图 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;
sb.append(","); } } sb.append("]"); // 将 JSON 数据写入到 out 对象中 out.print(sb.toString()); out.flush(); out.close(); }
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
out.println("0"); } else {
out.println("1"); } out.flush(); out.close(); }
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>用户注册</title> <style type="text/css">
.focus { background-color: #FF66FF;
实验五 Ajax 应用
【实验目的】 1、掌握 jQuery 对 Ajax 方法的支持； 2、掌握 jQuery 处理 Ajax 应用的常用方法； 3、掌握 load、get、getJson、post 等常用方法的应用。 【实验准备】 1、复习教材相关内容； 2、预习本次实验； 【实验内容】 1、实现用户注册时的用户名无刷新校验，效果如图 5-1、5-2 所示。(说明：用.net 实现服务器端代码的提交 jQuery 代码和服务器端代码，用 JSP 实现的提交 jQuery 代码和 servlet 中的代码)
// 模拟数据库 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");
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;
// 定义 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) {
+ request.getServerName() + ":" + request.getServerPort() + path + "/"; %>
<!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">
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);
@SuppressWarnings("serial") public class Street extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
} 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("重复不能为空！");
this.doGet(request, response); }
}
register.jsp
<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%> <%
String path = request.getContextPath(); String basePath = request.getScheme() + "://"
$("#reset").click(function() { $(".input").val(""); $("label").text("");
}); });
</script>Fra Baidu bibliotek</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"
</html>
2、实现二级联动的下拉列表框，其效果如图 5-3 所示。(说明：用.net 实 现服务器端代码的提交 jQuery 代码和服务器端代码，用 JSP 实现的提交 jQuery 代码和 servlet 中的代码)
图 5-3
代码如下： Street.java
package com.jgj.servlet;
$(this).addClass("focus"); }).blur(function() {
$(this).removeClass("focus"); if ($(this).is("#uname")) {
if ($(this).val() == "") { $(this).nextAll("label").text("用户名不能为空！");
request.setCharacterEncoding("GB2312"); String uname = request.getParameter("uname");
PrintWriter out = response.getWriter(); if (uname.equals("jgj")) {// 仅起到测试作用
/> <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>
@SuppressWarnings("serial") public class Register extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
.importent { color: #FF0000; font-size: larger;
}
.input { 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() {
图 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;
sb.append(","); } } sb.append("]"); // 将 JSON 数据写入到 out 对象中 out.print(sb.toString()); out.flush(); out.close(); }
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
out.println("0"); } else {
out.println("1"); } out.flush(); out.close(); }
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>用户注册</title> <style type="text/css">
.focus { background-color: #FF66FF;
实验五 Ajax 应用
【实验目的】 1、掌握 jQuery 对 Ajax 方法的支持； 2、掌握 jQuery 处理 Ajax 应用的常用方法； 3、掌握 load、get、getJson、post 等常用方法的应用。 【实验准备】 1、复习教材相关内容； 2、预习本次实验； 【实验内容】 1、实现用户注册时的用户名无刷新校验，效果如图 5-1、5-2 所示。(说明：用.net 实现服务器端代码的提交 jQuery 代码和服务器端代码，用 JSP 实现的提交 jQuery 代码和 servlet 中的代码)
// 模拟数据库 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");
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;
// 定义 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) {
+ request.getServerName() + ":" + request.getServerPort() + path + "/"; %>
<!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">
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);
@SuppressWarnings("serial") public class Street extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
} 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("重复不能为空！");
this.doGet(request, response); }
}
register.jsp
<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%> <%
String path = request.getContextPath(); String basePath = request.getScheme() + "://"