Ajax初体验--Sturts2+Ajax

一直久闻大名，没有用过，觉得很神秘，做毕业设计刚好要用到这个家伙，查了半天资料，总算搞定。。。。原理不是特别明白，不过能实现需求。。。

会骑车就行，管他车是怎么组装的，哪天要我组装车，我再来整

说下我实现的功能：

PS。。。在公司不能传图片，功能很简单，一个用户名文本框，用户输入用户名，焦点离开，判断用户名是否在数据库里存在。。。

我用到了一个struts2的json插件，下载地址：http://code.google.com/p/jsonplugin/downloads/list

直接上代码

Action类 LoginJson

package com.lk.action;



public class LoginJson {
	private String un;
	
	public String getUn() {
		return un;
	}

	public void setUn(String un) {
		this.un = un;
	}
	
	public String execute() throws Exception {
			/**
			 * 连接数据库的代码
			 * 我这里用到的sql语句
			 * executeQuery("select * from admin where admId='"+un+"'")
			 */   
		   if(查询结果存在){
			   un="用户名存在";
		   }else{
			   un="用户名不存在";
		   }
		return "success";
	}
}

Struts.xml配置

 <package name="Struts2_AJAX_DEMO" extends="json-default"> 
        <action name="JsonPlugin2" class="com.lk.action.LoginJson">
            <result type="json" />
        </action>            
    </package>

注意package后面的extends

jsp的内容

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'MyJsp.jsp' starting page</title>
    
	<Meta http-equiv="pragma" content="no-cache">
	<Meta http-equiv="cache-control" content="no-cache">
	<Meta http-equiv="expires" content="0">    
	<Meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<Meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript">
		function isExists(str)
		{
		var xmlhttp;    
		if (str=="")
		  {
		  document.getElementById("txtHint").innerHTML="";
		  return;
		  }
		if (window.XMLHttpRequest)
		  {// code for IE7+,Firefox,Chrome,Opera,Safari
		  xmlhttp=new XMLHttpRequest();
		  }
		else
		  {// code for IE6,IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		  }
		xmlhttp.onreadystatechange=function()
		  {
		  if (xmlhttp.readyState==4 && xmlhttp.status==200)
		    {
		   var result = eval('(' + xmlhttp.responseText + ')');
		    
		    var isexists = result.un;
		    document.getElementById("txtHint").innerHTML=isexists;
	    }
		  }
		xmlhttp.open("GET","JsonPlugin2?un="+str+"&random=" + new Date().getMilliseconds(),true);
		xmlhttp.send();
	}
</script>

	
  </head>
  
  <body>
	    
		
		<input type="text" name="un" onblur="isExists(this.value)"/>
		<div id="txtHint">判断输入的是否存在</div>
	

  </body>
</html>

大家不要被上面的JS吓住了，其实重点也就是下面的一部分，其他的无非就是判断浏览器啦生成相应的对象(xmlhttp)啦，不用多在意，基本是死的

做到这里就ok了，发布部署，输入http://localhost:8080/AjaxDemo/MyJsp3.jsp就哦了

输入用户名焦点移开后台就进行判断用户是否存在啦~

大家自由发挥吧。。。有问题可以邮箱我或者留言~

Ajax初体验--Sturts2+Ajax

猜你在找的Ajax相关文章