您的位置：首页 > Web前端 > JQuery

JQuery+AJAX异步刷新的一个基础应用（检验用户名是否已存在）

2014-01-06 11:19 756 查看

JSP页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%
String path = request.getContextPath();
%>
<!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>ajax例子</title>
<script type="text/javascript" src="<%=path %>/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

$("#username").blur(function(){ //id为username组件的失焦事件，$("#username")等同于JavaScript的document.getElementById("username")

var val = $("#username").val();//获取id为username元素的值
if(val == null || val == undefined || val.length == 0 ){
$("#usernameTip").html("<font color='red'>*请输入用户名</font>");
$("#username").focus();
return;
}else{
$("#usernameTip").html("");
$.ajax({
type: "POST",
url: "<%=path%>/simple/ajax", //使用struts.xml配置的action路径
data: "username="+val,//传递进action使用的方法里的参数
success: function(msg){
if(msg=="0"){
$("#usernameTip").html("<font color='red'>*请输入用户名</font>");
$("#username").focus();
}else if(msg == "1"){
$("#usernameTip").html("<font color='red'>*输入用户名已经被使用</font>");
$("#username").focus();
}else{
$("#usernameTip").html("<font color='greed'>*用户名合法</font>");
}
}
});
return;
}

});
});

</script>
</head>
<body>
用户名:<input type="text" name="username" id="username"/><span id="usernameTip"></span>
</body>
</html>

struts.xml配置的action：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>

<!-- 动态方法应用，设置为false -->
<constant name="struts.enable.DynamicMethodInvocation" value="false" />
<!-- struts开发模式：开发时候设置为true，上线的时候设置为false -->
<constant name="struts.devMode" value="true" />

<!-- 定义包，通常情况下相同功能的会配置在相同的包里面
namespace是指这个包的基础路径，用户请求的路径既是package的namespace+action的name
package必须继承于一个包的，其中struts-default既是struts提供的一个基础的package的name
-->
<package name="simple" namespace="/simple" extends="struts-default">
<!-- 下列的配置是struts的最基本的配置，也是最简单的配置
其中resule的name如果不写的话，默认是name="sucess"
这里特别要注意的是result的type配置，这里涉及到服务端跳转跟客户端跳转
-->
<action name="ajax" class="com.eiei.teach.struts.action.SimpleAction" method="ajax">
</action>
</package>
</struts>

Java类的方法：

package com.eiei.teach.struts.action;

import java.io.IOException;
import java.util.Date;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

public class SimpleAction extends ActionSupport{

private String username;//名字要和Jsp页面传过来的参数一样，必需getter和setter方法
public String getUsername() {
return username;
}

public void setUsername(String username) {
this.username = username;
}

//所使用的方法

public void ajax() throws IOException{
ActionContext context = ActionContext.getContext();
HttpServletResponse response = (HttpServletResponse) context.get(ServletActionContext.HTTP_RESPONSE);
System.out.println("username="+username);

if(username == null || username.trim().length()==0){
response.getWriter().print("0");
return ;
}

//可根据需要改为与数据库资料进行对比
if(username.equals("eiei")){
response.getWriter().print("1");
return ;
}else{
response.getWriter().print("2");
return ;
}
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JQuery AJAX 异步刷新检验用户名

相关文章推荐

新的分享

章节导航