AJax+springMVC+JQURY.GET--注册界面即时刷新用户名是否存在 -

317028929hxp

浏览: 26923 次
性别:

最近访客更多访客>>

learnmore

knuwecm3

492238453

nobfi0

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

AJax+springMVC+JQURY.GET--注册界面即时刷新用户名是否存在

博客分类：

AJax springMVC JQury

弄了两天，终于把ajax的一个小实例跑起来了

这个是我们的注册界面上需要即时刷新的检验用户名是否存在的一个小功能

1.编译环境

myeclipse8.6

内置Tomcat

2.依赖包

spring3.0.5

springMVC3.0.5

3.展示界面

4前台代码

test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
	<script type="text/javascript">
		function check()
		{
			$.ajax(
				{
					type:"GET",
					url:"/yonghu.do",
					data:"username="+$("#username").val(),
					dataType:"json",
					success:function(data)
					{
						if(data.result=="1")
						{
							alert("用户名可用");
							$("#spaName").html("<font color=green>可以使用</font>");
						}else if(data.result=="2")
						{
							alert("用户名不可用");
							$("#spaName").html("<font color=red>不可使用</font>");
						}
					},
					error:function()
					{
						alert("加载失败！");
					}
				});
					
		}
		function checkN(){
			$val = $("#username").attr("value");
			if($val == ""){
   			alert('用户名不能为空');
  	 		return false;
		}
			return true;
		}
	</script>
  </head>
  
  <body>
    <form name="checkUser" action="yonghu.do" onsubmit="checkN()">
    	用户名:<input type="text" id="username" name ="yonghu" onchange="check()" size="20" style="width:150px;height:17px;"/>
        <span id="spaName" onchange="check()"></span><br/><br/>
        <input type="submit" value="提交"/>
    </form>
  </body>
</html>

最关键的是ajax的url是/yonghu.do,因为这个yonghu.do是直接在工程的WebRoot包下

后台代码

UController.java

package com.hxex.controller;

import java.io.IOException;
import java.io.PrintWriter;

import org.junit.*;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.hxex.service.IUserService;
import com.hxex.table.User;

public class UController {
	@Autowired
	private IUserService user;
	private String json;    //JSON字符串,JS与Action传递数据的载体

    @RequestMapping(value="/yonghu.do",method=RequestMethod.GET)
	public void judgeyouxiang(HttpServletRequest request,HttpServletResponse response)throws Exception{
		
		String yonghu = request.getParameter("yonghu");
		System.out.println("获取到界面上传来的参数为"+yonghu);
		response.setCharacterEncoding("utf-8");
		//新建一个printWriter对象
		PrintWriter pw = null;
		System.out.println("获得的对象是"+user);
		//通过response 获取pw
		pw=response.getWriter();
		if(this.user.findUser(yonghu)==null){
			//用pw对象传递json
			pw.print("{\"result\":\"this name can be used!\"}");//该用户名可以使用
		}else{
			pw.print("{\"result\":\"this name has already exist!\"}");
		}
		pw.flush();
		pw.close();
	
	}
}

这种方法用printWriter可以直接打印在界面上，并没有传递JSON的数据。

配置文件

<?xml version="1.0" encoding="UTF-8"?>
<beans
	xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xmlns:p="http://www.springframework.org/schema/p"
	xsi:schemaLocation="http://www.springframework.org/schema/beans 
	http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
	http://www.springframework.org/schema/tx
	http://www.springframework.org/schema/tx/spring-tx.xsd
	http://www.springframework.org/schema/aop
	http://www.springframework.org/schema/aop/spring-aop.xsd">
<!-- 视图分析器-->
<bean id="viewResolver2" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
	<property name="prefix" value=""/>
	<property name="suffix" value=".jsp"/>
	<property name="order" value="1"/>
</bean>
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
	<property name="prefix" value="/Background/Web/"/>
	<property name="suffix" value=".jsp"/>
	<property name="order" value="1"/>
</bean>

<!-- 配置上传文件的bean -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" p:defaultEncoding="gbk"/>
<!-- 控制分析器 -->
<bean id="urlMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
	<property name="mappings">
		<props>
			<prop key="/Background/Web/goodFormadd.do">pcontrol</prop>
			<prop key="/insert.do">test</prop>
			<prop key="/test.do">usercontrol</prop>
			<prop key="/yonghu.do">usercontrol</prop>
			<prop key="/selectFirst.do">fcontrol</prop>
		</props>
	</property>
	
</bean>
<!--给UController文件别名 在上面的.do 配置-->
<bean id="usercontrol" class="com.hxex.controller.UController"/>