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>
相关推荐
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo