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");
- });
- });
来源: http://www.bubuko.com/infodetail-2915714.html