Ajax&Xstream
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方式：语法：$.post(URL,data,callback，"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"); }); });
