您的位置:首页 > Web前端 > JavaScript

1.用AJAX(使用dwr)来判断用户名是否可用,利用json返回值

2011-10-25 21:51 483 查看
一、准备工作

1,下载dwr.jar添加到项目中

2,创建配置文件:/WEB-INF/dwr.xml

3,在web.xml中配置

<servlet>

<servlet-name>dwr</servlet-name>

<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>

<init-param>

<param-name>debug</param-name>

<param-value>true</param-value>

</init-param>

</servlet>

<servlet-mapping>

<servlet-name>dwr</servlet-name>

<url-pattern>/dwr/*</url-pattern>

</servlet-mapping>

二、在类中创建判断用户名是否已经用过的方法

public boolean checkName(String QqName){

List list = qdao.findByProperty("qqName(数据库里的name)",QqName);

if(list!=null && list.size()>0){

return true;

}

else

return false;

}

三、applicationContext.xml

<bean id="userBiz" class="包名.类名">

<property name="类中定义的对象名">

<ref bean="获取id"></ref>

</property>

</bean>

四、在/WEB-INF下创建dwr.xml

<?xml version="1.0" encoding="utf-8">

<dwr>

<allow>

<create creator="spring" javascript="JUserChecker">

<param name="beanName" value="userBiz(在spring配置中的id)"/>(业务类在spring配置的id)

<include method="方法名假设checkName">

</create>

</allow>

</dwr>

五、jsp页面代码

<script src='dwr/interface/JUserChecker.js'></script>(JUserChecker.js配写的js对象名)

<script src='dwr/engine.js'></script>(引入需要的脚本)

<script src='dwr/util.js'></script>

<script type="text/javascript">

function checkUserExists(){

var username = document.f1.qqName.value;

JUserChecker.checkName(username,show);

}

function show(msg)

{

if(msg==true)

alert("用户名重复");

else

alert("用户名可以使用");

}

</script>

<form name="f1" action="reg.do" method="post" onsubmit="return check()">

<table>

<tr><td>用户名</td><td><input type="text" name="qqName"/><a href="" onclick="return checkUserExists()"><font color="red">检查用户名是否可用</font></a></td></tr>

//在这里或者用失去焦点 <input type="text" name="qqName" onblue="return checkUserExists()"/>

</form>

----------------------------------------------------------------------------------json------------------------------------------------

1,导包jquery-1.6.4.min.js

2,js代码:

<script type="text/javascript" src="jquery-1.6.4.min.js"></script>

<script type="text/javascript">

function check(){

$.ajax({

type: "POST",

url: "userJson.action",

data:'name='+$('#name‘).val(),

dataType: 'json',

success: function(msg){

alert( "Data Saved: " + msg.msg +";"+msg.success);

}

});



}

</script>

3,jsp页面

用户名:<input type="text" name="name" id="name" onblur="return check()">

4,Action页面

HttpServletResponse response = ServletActionContext.getResponse();//得到response

response.setContentType("text/json");

PrintWriter out = response.getWriter();

if("admin".equals(name)){

out.print("{\"success\":true,\"msg\":\"Ok\"}");//json语句

out.flush();

out.close();

}else{

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: