版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wx5040257/article/details/83340192
开发环境: struts2.3 jquery UI1.10.4 jdk1.7
1 jQuery插件
1.1 什么是插件
插件是一种遵循一定应用程序接口规范编写出来的程序，是原有系统平台或应用软件平台功能的一种扩展和补充。但其只能在程序规定的系统平台下运行，而不能脱离指定平台单独运行。
本文中的JQuery插件是指基于JQuery脚本库开发出来的扩充函数库。目前基于JQuery脚本库开发出来的插件类别繁多，数量已达上万个，其中，JQuery的官方插件叫作JQuery UI。UI插件使用情况如表1.1所示。
表1-1UI插件使用情况
| 使用情况 |
接应用类型 |
按企业规模 |
| 多 |
用户较少的内部管理系统 |
中小型IT开发企业 |
| 少 |
用户较多的开放式Web网站 |
大型IT开发企业 |
1.2 查找插件和帮助
前面介绍了JQuery插件功能强大且数量非常丰富，下顽便提供几个获取JQuery插件的资源地址。
(1)http://jqueryui.com：JQuery UI官方网站，收录了所有官方提供的插件。可以在线演示插件效果和查看源码，并提供了所有示例和插件库的打包下载地址。
(2) http://plugins.jquery.com: jQuery官方网站的插件库。除了官方提供的插件外，还收录了很多其他个人或第三方提供的插件下载地址。
(3) http://api.jqueryui．com: JQuery U[官方网站提供的API文档。如果想对某个插件的具体用法进行详细了解，可以访问该网址。当然，如果遇到解决不了的问题，可以充分利用网络资源，在一些开源社区活跃着很多业内专业人员，他们或许能够帮你解决更多问题。
1.3 如何使用jQuery插件
要想使用JQuery插件进行开发，需要以下几个准备步骤。
(1)获取JQuery插件。
(2)将需要的JQuery插件及样式文件加入工程。
(3)在页面引入JQuery插件及样式文件。
二 对话框插件(dialog)的使用案例
对话框在网页中的使用频率非常高，所以JQuery UI提供了dialog插件。常用的对话框展现形式分为普通对话框和form对话框。其中，筒单对话框用于信息提示，form对话框用于构建提交表单。下面以一个无刷新登录为例来讲解对话框插件
工程目录如下:
页面代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<c:set var="scheme" value="${pageContext.request.scheme}"></c:set>
<c:set var="serverName" value="${pageContext.request.serverName}"></c:set>
<c:set var="serverPort" value="${pageContext.request.serverPort}"></c:set>
<c:set var="basePath" value="${scheme}://${serverName }:${serverPort }${path }/">
</c:set>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="${bathPath }">
<title>jquery 常用插件</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<!-- jQuery UI样式文件 -->
<link rel="stylesheet" type="text/css" href="jqueryUI/jquery-ui-1.10.4.custom.css">
<!--jQuery基础脚本库-->
<script src="jqueryUI/jquery-1.10.2.js"></script>
<!--jquery ui插件脚本库 -->
<script src="jqueryUI/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
$("#showDialog").dialog({
width:350, //宽度
//height:500, //高度
position:"center", //居中
autoOpen:false, //最开始不显示
modal:true, //表示模式对话框
title:'用户登录', //标题
buttons:{
"登录":function(){ //默认触发点击事件
//可以在这里发送ajax请求
var userStr=$("[name=userName]").val();
var passStr=$("[name=passWord]").val();
var data="userName="+userStr+"&passWord="+passStr;
$.post("Login.do",data,function(result){
if(result=='ok'){
$("#show").html("欢迎您:"+userStr
+" <a id='quit' href='javascript:void(0);'>退出</a>");
$("#showDialog").dialog("close"); //登录成功了关闭对话框
}else{
window.alert("登录失败");
}
});
},
"关闭":function(){ //默认触发点击事件
$(this).dialog("close");
}
}
});
/*
对于动态添加的节点无法处理事件问题的解决方案
用它的父标签使用on方法绑定事件
*/
$("body").on("click","#login",function(e){
$("#showDialog").dialog("open"); //打开对话框
});
$("body").on("click","#quit",function(e){
$.post("Quit.do","",function(result){
if(result=='ok'){
$("#show").html("<a id='login' href='javascript:void(0);'>请登录</a>");
}
});
});
});
</script>
</head>
<body>
<p id="show">
<c:choose>
<c:when test="${ not empty userName}">
欢迎您:${sessionScope.userName}
<a id="quit" href="javascript:void(0);">退出</a>
</c:when>
<c:otherwise>
<a id="login" href="javascript:void(0);">请登录</a>
</c:otherwise>
</c:choose>
</p>
<div id="showDialog">
<table>
<tr><td>请输入用户名:</td><td><input type="text" name="userName"/></td></tr>
<tr><td>请输入密码:</td><td><input type="password" name="passWord"/></td></tr>
</table>
</div>
<p><img src="images/aa.png"/></p>
</body>
</html>
登录的action代码
package com.accp.actions;
import java.io.ByteArrayInputStream;
import java.io.InputStream;
import java.util.Map;
import com.accp.dao.IUserDao;
import com.accp.dao.UserDaoImpl;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class LoginAction extends ActionSupport{
private String userName;
private String passWord;
private InputStream bis;
public InputStream getBis() {
return bis;
}
public String execute() throws Exception {
ActionContext ac=ActionContext.getContext();
Map session=ac.getSession();
String result="err";
IUserDao userDao=new UserDaoImpl();
if(userDao.isLoginSuccess(userName, passWord)){
session.put("userName", userName);
result="ok";
}
bis=new ByteArrayInputStream(result.getBytes());
System.out.println("action结果==>"+result);
return this.SUCCESS;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getPassWord() {
return passWord;
}
public void setPassWord(String passWord) {
this.passWord = passWord;
}
}
退出的action代码
package com.accp.actions;
import java.io.ByteArrayInputStream;
import java.io.InputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class QuitAction extends ActionSupport{
private InputStream bis;
public InputStream getBis() {
return bis;
}
public String execute() throws Exception {
HttpServletRequest request=ServletActionContext.getRequest();
HttpSession session=request.getSession(false);
if(session!=null){
System.out.println("真的退出了");
session.invalidate();
}
bis=new ByteArrayInputStream("ok".getBytes());
return this.SUCCESS;
}
}
struts配置文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"struts-2.3.dtd">
<struts>
<constant name="struts.action.extension" value="action,do,php"></constant>
<package name="user" extends="struts-default">
<action name="Login" class="com.accp.actions.LoginAction">
<result type="stream">
<param name="contentType">text/html</param>
<param name="inputName">bis</param>
</result>
</action>
<action name="Quit" class="com.accp.actions.QuitAction">
<result type="stream">
<param name="contentType">text/html</param>
<param name="inputName">bis</param>
</result>
</action>
</package>
</struts>运行结果如下:
发送ajax请求登录
