JQuery
1 是什么？有什么用?
- JavaScript的代码类库
- 简化代码，提高效率。write less do more
1 JQuery与Servlet数据交互，load方式(少用)
语法：$("#元素id").load(url地址，callback); callback:回调的函数
???function load() { ???????$("#text01").load("/8AjaxAndJquery/DemoServlet02", ???????????????function(responseTxt, statusTxt, xhr) { ???????????????????alert("结果：" + responseTxt); ???????????????????//拿到id为text01的标签，将其value设置为服务器传过来的responseTxt ???????????????????$("#text01").val(responseTxt); ???????????????} ???????); ???}2 JQuery与Servlet数据交互， Get方式
语法：$.get(URL,callback);
??function get() { ????//function(接收的数据，状态码) ????$.get("/8AjaxAndJquery/DemoServlet02" , function(data,status){ ????????//给div添加内容,可以使用.html或者.text ????????$("#div01").html(data);//可添加<font>// ?????????$("#div01").text("da:"+data); ?????????}); ??}3 JQuery与Servlet数据交互，Post方式
语法：$.post(URL,data,callback);
<script type="text/javascript"> ????function post() { ???????//$.post(url,页面向Servlet发送的数json格式的数据,function(接收的数据，状态码) ????????$.post("/8AjaxAndJquery/DemoServlet02",{name:"zhangsan" , age:18},function(data,status){ ???????????alert("页面接收的数据:"+data); ???????????$("#div01").html(data); ???????}); ???};</script>4 JQuery实现用户名校验
<script type="text/javascript"> ???????function checkUserName() { ???????//获取输入框的内容 ???????var name = $("#name").val(); ???????//发送请求,$.post(URL，JSON，function(接收的数据，状态码)) ???????$.post("/8AjaxAndJquery/CheckUserNameServlet" ,{name:name}, function(data,status){ ???????????if(data == 1){ ???????????????$("#span01").html("<font color=‘red‘>对不起！用户名已存在</font>"); ???????????}else{ ???????????????$("#span01").html("<font color=‘red‘>恭喜！用户名可用</font>"); ???????????} ???????}); ???????????}</script>5 JQuery实现百度下拉框功能
1 前端JQ代码：键盘弹起事件keyup
//1捕捉键盘弹起事件//在文档准备就绪的时候，对某一个元素进行onkeyup监听//$(document).ready(function(){});$(function() { ???$("#word").keyup(function() { ???????//2获取输入框的值 ???????var word = $(this).val(); ???????if (word == "") { ???????????$("#div01").hide(); ???????} else { ???????????//3请求数据 ???????????$.post("/8BDSearch/FindWordsServlet", { ???????????????word : word ???????????}, function(data, status) { ???????????????$("#div01").show(); ???????????????$("#div01").html(data); ???????????}); ???????} ???})});2 Servlet，交互查询关键字，将下拉框内容用jsp页面转发出去
rotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ???????request.setCharacterEncoding("utf-8"); ???????response.setContentType("text/html;charset=UTF-8"); ?????// 1 获取参数 ???????String word = request.getParameter("word"); ?????// 2 dao查询 ???????WordDao dao = new WordDaoImpl(); ???????List<WordsBean> list ?= ?dao.findWords(word); ?????// 3 ?返回数据// ???????response.getWriter().write("数据是："+word); ???????request.setAttribute("list", list); ???????//将list.jsp里面的内容返回给页面 ???????request.getRequestDispatcher("list.jsp").forward(request, response); ???}
3 list.jsp，下拉框内容
<%@ page language="java" contentType="text/html; charset=UTF-8" ???pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" ?prefix="c" %><body> ??<table style="width: 600px ; height: 200px"> ??<c:forEach items="${list }" var="wordsBean" > ??<tr> ???<td>${wordsBean.words }</td> ???</tr> ??</c:forEach> ??</table></body>6 JQuery实现省市联动，XML方式：
1 Servlet: 拿到客户端的pid，调用业务层获得城市list , 将其封装成xml对象发送给客户端
???protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ?????try { ?????????request.setCharacterEncoding("utf-8"); ?????????//1 获取参数 ?????????int pid = Integer.parseInt(request.getParameter("pid")); ?????????//2 找出所有城市 ?????????CityDao dao = new CityDaoImpl(); ?????????List<CityBean> list = dao.findCity(pid); ???????????????????//3 返回数据--->使用XStream将对象转成xml,传输数据：xml或者JSON ?????????XStream xStream = new XStream(); ?????????//想把id做成属性// ?????????xStream.useAttributeFor(CityBean.class, "id"); ??????????????//设置别名 ?????????xStream.alias("city", CityBean.class); ?????????//转换一个对象成xml字符串 ?????????String xml = ?xStream.toXML(list);// ?????????System.out.println(xml); ?????????//代表返回的是文本类型的xml数据 ???????????????????response.setContentType("text/xml;charset=UTF-8"); ?????????response.getWriter().write(xml); ???}2 前段JSP，页面整体骨架：
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script><script type="text/javascript" src="js/city.js" charset="utf-8"></script><body>省份：<select name="province" id="province"> ???<option value="">-请选择- ???<option value="1">广东 ???<option value="2">湖南 ???<option value="3">四川</select>城市：<select name="city" id="city"> ???<option value="">-请选择-</select></body>
3 JS，实现省市联动功能
$(function(){ ????// 1 找到省份元素 ???$("#province").change(function(){ ???????//2 ?一旦里面的值发生改变，发送请求 ???????var pid = $(this).val(); ???????/*<list> ?????????<city> ???????????<id>1</id> ???????????<cname>深圳</cname> ???????????<pid>1</pid> ?????????</city> ???????</list> ???????*/ ???????$.post("/8BDSearch/CityServlet",{pid:pid},function(data,status){ ???????????//先清空以前的值： ???????????$("#city").html("<option value=‘‘>--请选择") ???????????//遍历:find方法获得当前每个元素的后代，each方法进行迭代，从data数据里面拿到所有的city,遍历一次city执行一次function方法 ???????????$(data).find("city").each(function(){ ???????????????//this代表当前的city,取出他们的孩子，id，cname ???????????????var id = $(this).children("id").text(); ???????????????var cname = $(this).children("cname").text(); ???????????????//给city元素赋值 ???????????????$("#city").append("<option value=‘"+id+"‘>"+cname) ???????????}); ???????}); ???});});7 JQuery实现省市联动，JSON方式：
JSON和xml比较：
- xml:臃肿
- json:阅读性更好、容量更小(推荐使用)
常用对象：
- JSONArray --->变成数组，集合[]
- JSONObject --->变成简单的数据{name:zhangsan , age:18}
1 Servlet: 拿到客户端的pid，调用业务层获得城市list , 将其封装成JSON对象发送给客户端
???protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ?????try { ?????????request.setCharacterEncoding("utf-8"); ?????????response.setContentType("text/html;charset=UTF-8"); ?????????//1 获取参数 ?????????int pid = Integer.parseInt(request.getParameter("pid")); ?????????//2 找出所有城市 ?????????CityDao dao = new CityDaoImpl(); ?????????List<CityBean> list = dao.findCity(pid); ???????????????????//3 把list集合转JSON数据// ?????????JSONArray ?--->变成数组，集合[]// ?????????JSONObject --->变成简单的数据 ???{name:zhangsan , age:18} ?????????JSONArray jsonArray = JSONArray.fromObject(list); ?????????String json = jsonArray.toString(); ?????????System.out.println("json="+json); ?????????response.getWriter().write(json); ???}2 前端JSP，页面整体骨架：
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script><script type="text/javascript" src="js/json.js" charset="utf-8"></script><!-- <script type="text/javascript" src="js/city.js" charset="utf-8"></script> --><body>省份：<select name="province" id="province"> ???<option value="">-请选择- ???<option value="1">广东 ???<option value="2">湖南 ???<option value="3">四川</select>城市：<select name="city" id="city"> ???<option value="">-请选择-</select>
3 JS，实现省市联动功能
$(function(){ ????// 1 找到省份元素 ???$("#province").change(function(){ ???????//2 ?一旦里面的值发生改变，发送请求 ???????var pid = $(this).val(); ???????/*json=[ ???????????????{"cname":"深圳","id":1,"pid":1}, ???????????????{"cname":"东莞","id":2,"pid":1} ????????????????... ???????????????]*/ ???????$.post("/8BDSearch/CityServlet02",{pid:pid},function(data,status){// ????????清空以前的数据 ???????????$("#city").html("<option value=‘‘>---请选择"); ?????????//遍历 ?????????$(data).each(function(index , c) {// ???????????alert(c.cname); ????????????$("#city").append("<option value=‘"+c.id+"‘>"+c.cname); ????????}); ???????},"json"); ???});});十八 JQuery&Ajax&Json&Xstream
原文地址：https://www.cnblogs.com/ltfxy/p/10252628.html