弄了两天,终于把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" οnsubmit="checkN()"> 用户名:<input type="text" id="username" name ="yonghu" οnchange="check()" size="20" style="width:150px;height:17px;"/> <span id="spaName" οnchange="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"/>