实验五 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 + "/";
%>
.focus {
background-color: #FF66FF;
}
.importent {
color: #FF0000;
font-size: larger;
}
width: 140px;
height: 20px;
}
$(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("");
});
});