十八 JQuery&Ajax&Json&Xstream
Posted Island
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了十八 JQuery&Ajax&Json&Xstream相关的知识,希望对你有一定的参考价值。
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的主要内容,如果未能解决你的问题,请参考以下文章
第六十八天上课 jquery( josn )和( ajax )
程序ajax请求公共组件:app-jquery-http.js