十八 JQuery&Ajax&Json&Xstream
阿新 • • 發佈：2019-01-11
是什麽 轉成xml patch child username ext 下拉框 文本 encoding
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(接收的數據，狀態碼)
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