jQuery实例(ajax通信和动态加载二级菜单)
16lz
2021-01-22
今天是复习jQuery的最后一天，基本常用技术已全部练习，以后遇到不会的可查文档。总的来说，jQuery的出现，在写前端代码时省事了好多。
one.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script>
<title>jQuery技术实例</title>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//jQuery-ajax的get方法是不能传递中文的参数，否则会乱码
var url="<c:url value='/Servlet1' />";
$.get(url,{"name":"AA中文","age":22},function(data,textStatus,xhr){
alert(data+","+textStatus);
});//格式：jQuery.get(url, [data], [callback], [type]) 最后一个参数为空
});
$("#btn2").click(function(){
//jQuery-ajax的普通post方法是可以传递中文参数
var url="<c:url value='/Servlet1' />";
$.post(url,{"name":"AAAA中文","age":22},function(data,textStatus,xhr){
alert(data+","+textStatus);//可正常显示后台发来的信息
});//格式：jQuery.post(url, [data], [callback], [type]) 最后一个参数为空
});
$("#btn3").click(function(){
//jQuery-ajax的post---xml方法通信
var url="<c:url value='/Servlet1' />";
$.post(url,{"name":"AAAA中文","age":22},function(data,textStatus,xhr){
//alert(data+","+textStatus);//object XMLDocument
//jQuery来解析xml格式的dom对象
//<users><user id='U001'><name>jack1</name><name>jack2</name></user><user id='U002'><name>Tom</name></user></users>"
$(data).find("user").each(function(){
//for循环遍历 获取当前user对象的id
var id=$(this).attr("id");
//alert(id);
//获取当前<user>的name
var name=$(this).find("name:eq(0)").text();//这种方式能实现一个user中有两个name，只显示一个name
alert(id+","+name);
});
},"xml");//post方法最后一个参数表示通信方式返回内容格式，xml, html, script, json, text, _default。
});
$("#btn4").click(function(){
//jQuery-ajax的post---json方法通信技术
var url="<c:url value='/JsonServlet3' />";
$.post(url,{"name":"AAAA中文","age":22},function(data,textStatus,xhr){
//alert(data); //json-object 有很多object(这里是user对象)
$(".d").empty();//先清空已经显示的内容
$.each(data,function(idx,val){
$(".d").append(idx+":"+val.id+","+val.name+","+val.age+"<br/>");
});
},"json");//指定json通信
});
});
</script>
</head>
<body>
<button id="btn1">jQuery-ajax的get方法技术</button><br/>
<button id="btn2">jQuery-ajax的post方法技术</button><br/>
<button id="btn3">jQuery-ajax的post---xml方法通信技术</button><br/>
<button id="btn4">jQuery-ajax的post---json方法通信技术</button><br/>
<div class="d"></div>
<br/><hr/>
<a href="<c:url value='/MenuServlet' />">点击进入动态(从数据库)加载二级菜单 jQuery中ajax.load()方法</a>
</body>
</html>
Servlet1.java
package cn.hncu.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/Servlet1")
public class Servlet1 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("get方式的请求来了....");//不支持中文
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("name:"+name+",age:"+age);
response.setContentType("text/html;charset=utf-8");
String str ="<users><user id='U001'><name>jack</name></user>"
+ "<user id='U002'><name>Tom</name></user></users>";
response.getWriter().print(str);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("post方式的请求来了....");
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("name:"+name+",age:"+age);
response.setContentType("text/html;charset=utf-8");
String str ="<users><user id='U001'><name>jack1</name><name>jack2</name></user>"
+ "<user id='U002'><name>Tom</name></user></users>";
response.getWriter().print(str);
}
}
JsonServlet3
package cn.hncu.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
import cn.hncu.domain.User;
@WebServlet("/JsonServlet3")
public class JsonServlet3 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("post-json方式的请求来了....");
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("name:"+name+",age:"+age);
//按理应该调用service、dao层并从数据库中把数据读取出来，这里模拟了...
List<User> users = new ArrayList<User>();
users.add( new User("U001","Jack",22));
users.add( new User("U010","张三",12));
users.add( new User("U002","Rose",23));
request.setAttribute("users", users);
//利用fastjson的工具为我们把后台的List<User>类型的数据封装成json格式串，发送前端
//json串格式: [{name:"Jack",id:"U001",age:22},{...},{...}]
//转List-json※※※
String json = JSON.toJSONString(users);
System.out.println("json:"+json);
//转Map-json
Map<String, Object> map = new HashMap<String, Object>();
map.put("addr", "湖南");
map.put("id", "P001");
map.put("sex", "男");
map.put("age", 20);
map.put("friend", new User("U001","Jack",22));
String str = JSON.toJSONString(map);
System.out.println(str);
//发给前端
response.setCharacterEncoding("utf-8");
response.getWriter().print(json);
}
}
这里是实现了ajax get和post通信，jQuery中有封装好的的ajax通信，直接调用方法即可，不再用写底层代码了。
MenuServlet.java
注：此处用到了C3p0和QueryRunner，它的配置文件和工具类这里就不再贴出了。以前的博客有详细介绍。
package cn.hncu.servlet;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import cn.hncu.domain.Menu;
import cn.hncu.utils.DataSourceUtils;
import cn.hncu.utils.QueryRunner;
@WebServlet("/MenuServlet")
public class MenuServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//查询出所有一级菜单
String sql="select * from menus where parent is null";
QueryRunner run=new QueryRunner(DataSourceUtils.getDataSource());
List<Menu> menus=run.query(sql, new BeanListHandler<Menu>(Menu.class));
System.out.println(menus);
request.setAttribute("menus", menus);
request.getRequestDispatcher("/three/two.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//加载主菜单下面的二级菜单
String id=request.getParameter("pid");
String sql="select * from menus where parent="+id;
QueryRunner run=new QueryRunner(DataSourceUtils.getDataSource());
List<Menu> menus=run.query(sql, new BeanListHandler<Menu>(Menu.class));
request.setAttribute("subMenus", menus);
request.getRequestDispatcher("/three/three.jsp").forward(request, response);
}
}
two.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#menu{
border: 1px solid red;
width: 40%;
background:gray;
margin:3px;
cursor:pointer;
}
.main{
height:60px;
background:gray;
border: 1px solid blue;
width: 20%;
margin:15px;
cursor: pointer;
}
.sub{
background:yellow;
width: 40%;
margin:3px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script>
<title>jQuery技术实例</title>
<script type="text/javascript">
$(function(){
$(".main").click(function(){
var sub=$(this).next(".sub");
if(sub.length>0){
sub.toggle();
}else{
var subDiv=$("<div class='sub' >AAAA</div>");//利用jQuery核心函数创建出一个jQuery对象，然后调用jQuery中的函数
var url="<c:url value='/MenuServlet' />";
var id=$(this).attr("id");
subDiv.load(url,{pid:id});//把通过load加载的内容放到subDiv中
$(this).after(subDiv);//加在主菜单后面----兄弟关系
}
});
});
</script>
</head>
<body>
<b>以下是菜单</b>
<div id="menu">
<c:forEach items="${menus}" var="menu">
<div class="main" id="${menu.id}">
<p align="center">${menu.name}</p>
</div>
</c:forEach>
</div>
</body>
</html>
three.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:forEach items="${subMenus}" var="menu">
<a href="<c:url value='${menu.url}'/>">${menu.name}</a> <br/>
</c:forEach>
sql记录
CREATE TABLE menus(
id INT PRIMARY KEY,
NAME VARCHAR(30),
parent INT,
url VARCHAR(100)
);
INSERT INTO menus VALUES(1,"管理员",NULL,NULL);
INSERT INTO menus VALUES(2,"一般管理员",NULL,NULL);
INSERT INTO menus VALUES(3,"管理用户",1,'/jsps/1.jsp');
INSERT INTO menus VALUES(4,"管理图书",1,'/BookSevlet');
INSERT INTO menus VALUES(5,"管理订单",2,'/BookSevlet');
INSERT INTO menus VALUES(6,"管理出货",2,'/BookSevlet');
这也算是一个小小的应用吧。可根据数据库中的记录来查找一级菜单和二级菜单。
更多相关文章
- Chosen 基于jquery的选择框插件使用方法
- jQuery $ajax 传中文数据到action乱码解决方法
- JQuery 的选取元素 和 方法
- jquery的function方法中each循环里面判断失败跳出function方法
- js/jquery常用方法------复制粘贴至剪切板
- Jquery ready和window.onload方法区别
- jQuery -> 获取后代元素的三种方法
- jquery手指触摸滑动放大图片的方法(比较靠谱的方法)
- jquery 阻止表单提交方法