Ajax

一:删除记录或者注册(验证用户名)使用jQuery里面的Ajax与InputStream流相结合来实现局部书刷新技术(用Ajax时InputStream流比较有优势)

1:删除

【1】:JSP页面

<scripttype="text/javascript"src="js/jquery-1.8.3.min.js"></script>

<scripttype="text/javascript">

<!--jQuery删除实现Ajax-->

//jQuery页面加载事件

$(function(){

//获得通过class属性<a>标签的对象

$(".delEmp").click(function(){

//获得隐藏域的name属性的值为该条记录的name名称

varename=$(this).next().val();

//弹一个返回true或false的框框出来

varfalg=confirm("确定要删除"+ename+"的信息吗?");

//点击确定的操作

if(falg){

//删除,用ajax的方式

//当前对象的父节点的父节点也就是<td>

var$tr=$(this).parent().parent();

varurl=this.href;

$.post(url,function(date){

if(date=="1"){

alert("删除成功!");

$tr.remove();

}else{

alert("删除失败!");

}

});

}

//取消超链接行为

returnfalse;

});

});

</script>

<td><aclass="delEmp"href="delete?emp.eid=${eid}">删除</a>

<s:hiddenname="ename"></s:hidden></td>

*注:此处如果不是<a>标签,可以在varurl=这里赋href的属性

【2】:Struts2.xmlw文件配置

<actionname="delete"class="deleteEmp">

<resulttype="stream">

<paramname="contentType">text/html</param>

<paramname="inputName">inputStream</param>

</result>

</action>

*注:param:参数name:名称contentType:内容类型text/html:内容类型为text或html

inputName下载文件的来源流,对应着action类中某个类型为Inputstream的属性名,例如取值为inputStream的属性需要编写getInputStream()方法

【3】:Action类中

publicStringexecute(){

//删除对象

try{

System.out.println("员工编码为:"+emp.getEid());

Empemp1=empBiz.getEmp(emp.getEid());

empBiz.deleteEmp(emp1);

inputStream=newByteArrayInputStream("1".getBytes("utf-8"));

}catch(Exceptione){

try{

inputStream=newByteArrayInputStream("0".getBytes("utf-8"));

}catch(Exceptione1){

e1.printStackTrace();

}

e.printStackTrace();

}

returnSUCCESS;

}

*注:ByteArrayInputSteam类从内存中的字节数组中读取数据,因此它的数据源是一个字节数组。这个类的构造方法包括:

ByteArrayInputStream(byte[]buf)--------参数buf指定字节数组类型的数据源。

2:注册(验证用户名是否已存在、还有另外一个好理解一点的见CRMSys项目/CRMSys/WebContent/pages/~user/role_add.jsp)

【1】:JSP页面

<scripttype="text/javascript"src="scripts/jquery-1.9.1.min.js"></script>

<scripttype="text/javascript">

$(function(){

$("input[name=ename]").change(function(){

varval=$(this).val();

val=$.trim(val);

var$this=$(this);

if(val!=""){

//把当前节点后面的所有font兄弟节点删除

$this.nextAll("font").remove();

varurl="emp-validateLastName";

varargs={"lastName":val};

$.post(url,args,function(data){

//表示可用

if(data=="1"){

//在每个匹配的元素之后插入内容。

$this.after("<fontcolor='green'>LastName可用!</font>");

}

//不可用

elseif(data=="0"){

$this.after("<fontcolor='red'>LastName不可用!</font>");

}

//服务器错误

else{

alert("服务器错误!");

}

});

}else{

alert("lastName不能为空");

$(this).val("");

$this.focus();

}

});

})

</script>

*注:$("input[name=ename]")表示<s:textfieldname="ename"label="LastName"></s:textfield>的对象

【2】:Struts2.xml配置文件

<actionname="emp-validateLastName"class="empAction"method="validateLastName">

<resulttype="stream"name="ajax-success">

<paramname="contentType">text/html</param>

<paramname="inputName">inputStream</param>

</result>

</action>

【3】:Action页面

//lastName为页面的键值对键的值

privateStringlastName;

publicvoidsetLastName(StringlastName){

this.lastName=lastName;

}

publicStringgetLastName(){

returnlastName;

}

publicStringvalidateLastName()throwsUnsupportedEncodingException{

//JSP页面键值对传参varargs={"lastName":val};getEmployeeByName(Stringname);返回boolean类型的值

if(empBiz.getEmployeeByName(lastName)){

inputStream=newByteArrayInputStream("1".getBytes("UTF-8"));

}else{

inputStream=newByteArrayInputStream("0".getBytes("UTF-8"));

}

return"ajax-success";

}

二:删除记录或者注册(验证用户名)使用jQuery里面的Ajax与JSON相结合来实现局部书刷新技术(用Ajax时JSON是不可取的,有劣势,两个jar包,后期耦合度高,配置文件也比上面有缺点)

《json-lib-2.3-jdk15.jar、struts2-json-plugin-2.3.4.1.jar》导入两个包

1:注册(验证用户)

【1】:JSP页面

<scripttype="text/javascript"src="js/jquery-1.8.3.js"></script>

<scripttype="text/javascript">

//员工名称验证

$("#ename").blur(function(){

varename=$(this).val();

var$info=$("#ename_info");

$info.css("color","red");

if(ename==""||ename==null){

$info.html("员工姓名不能为空");

//$info.css("color","red");

}else{

$.ajax({

url:"checkName",

type:"get",

//数据类型为json

data:{

"ename":ename

},

dataType:"json",

success:function(data){

if(data.flag==true){

$info.html("员工名已有");

}else{

$info.html("员工名可用");

}

},

error:function(data){

alert("请求失败");

}

});

}

});

});

</script>

<td>员工编号</td>

<td><inputtype="text"id="eid"name="emp.eid"

readonly="readonly">

</td>

【2】:Struts2.xml配置文件

<packagename="check"namespace="/"extends="json-default">

<actionname="checkName"class="checkAction">

<resulttype="json"></result>

</action>

</package>

【3】:Action类

privateStringename;

privatebooleanflag;

publicStringgetEname(){

returnename;

}

publicvoidsetEname(Stringename){

this.ename=ename;

}

publicbooleanisFlag(){

returnflag;

}

publicvoidsetFlag(booleanflag){

this.flag=flag;

}

@Override

publicStringexecute()throwsException{

System.out.println(ename);

ApplicationContextac=newClassPathXmlApplicationContext("beans.xml");

EmpServiceed=(EmpService)ac.getBean("empService");

try{

Empemp=ed.getEmpByName(ename);

if(emp==null){

flag=false;

}else{

flag=true;

}

System.out.println(flag);

}catch(Exceptione){

e.printStackTrace();

}

returnSUCCESS;

}

三:使用JavaScript实现Ajax技术

【1】:jsp

<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>

<%

Stringpath=request.getContextPath();

StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

<html>

<head>

<basehref="<%=basePath%>">

<title>MyJSP'index.jsp'startingpage</title>

<metahttp-equiv="pragma"content="no-cache">

<metahttp-equiv="cache-control"content="no-cache">

<metahttp-equiv="expires"content="0">

<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">

<metahttp-equiv="description"content="Thisismypage">

<!--

<linkrel="stylesheet"type="text/css"href="styles.css">

-->

<scripttype="text/javascript">

functioncheck(){

//先得到名字

varname=document.getElementById("uname").value;

varmess=document.getElementById("mess");

if(name==""){

mess.innerHTML="用户名不能为空";

}else{

//表示用户名不为空

varxml;

try{

//针对IE7以上创建的XMLHttpRequest对象

xml=newActiveXObject("Msxml2.XMLHTTP");

}catch(e){

//针对于其他浏览器创建的XMLHttpRequest对象

xml=newXMLHttpRequest();

}

if(xml!=null){

//设置请求的连接

xml.open("get","FindNameServlet?uname="+name,true);

//发送请求

xml.send(null);

//根据回调函数来得到响应结果

xml.onreadystatechange=function(){

//判断状态码来判断服务器有没有完全响应

if(xml.readyState==4&&xml.status==200){

varresult=xml.responseText;//得到响应的结果是一个普通文本

if(result=='true'){

mess.innerHTML='用户名已经存在';

}else{

mess.innerHTML='用户名可用';

}

}

}

}

}

}

</script>

</head>

<body>

用户名:<inputtype="text"id="uname"onblur="check()"/><spanid="mess"style="color:red"></span>

</body>

</html>

二:Servlet类

publicclassFindNameServletextendsHttpServlet{

//其他部分略

publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)

throwsServletException,IOException{

response.setContentType("text/html;charset=utf-8");

Stringname=request.getParameter("uname");

FindDaofd=newFindDao();

//调用底层的方法

booleanflag=fd.getNameByName(name);

PrintWriterout=response.getWriter();

out.print(flag);

out.flush();

out.close();

}

}

三:web.xml

<servlet>

<description>ThisisthedescriptionofmyJ2EEcomponent</description>

<display-name>ThisisthedisplaynameofmyJ2EEcomponent</display-name>

<servlet-name>FindNameServlet</servlet-name>

<servlet-class>com.bdqn.test.FindNameServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>FindNameServlet</servlet-name>

<url-pattern>/FindNameServlet</url-pattern>

</servlet-mapping>

相关推荐