A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

1.1 案例三:使用JQuery完成仿百度的信息提示:1.1.1 需求:
在一个搜索页面中,键盘输入一些信息,在文本框下面给出一些提示信息(需要从服务器端进行查询的).
图片5.png
1.1.2 分析:1.1.2.1 步骤分析:
Ø 创建一个数据库和表:
Ø 设计一个页面
Ø 文本框绑定一个事件.keyup
Ø 在keyup所触发函数中:
n 获得文本框的值.
n 将这个值异步提交到服务器.$.post();
n 提交到Servlet:
u 接收参数:
u 调用业务层--调用DAO: select * from .. Where xx like ?;
u 查询之后页面跳转把数据显示到一个表格中.
1.1.3 代码实现:
创建数据库和表:
CREATE TABLE words(
id INT PRIMARY KEY AUTO_INCREMENT,
word VARCHAR(20)
);
设计一个页面:
<center><h1>黑马一下</h1></center>
<center><input type="text" name="word" id="word" style="width:300px"/><input type="button" value="黑马一下"><center>
<div id="d1" style="display:none;position:absolute;top:110px;left:494px;border:1px solid blue;width:300px;height:200px;"></div>
为文本框绑定事件:编写jquery代码
$(function(){
        // 为文本框绑定事件:
        $("#word").keyup(function(){
                // 获得文本框的值:
                var val = $(this).val();
                if(val != ""){
                        // 异步将这个值提交给服务器:
                        $.post("/WEB15/ServletDemo5",{"val":val},function(data){
                                $("#d1").show();
                                $("#d1").html(data);
                        });
                }else{
                        $("#d1").hide();
                }
        });
});
1.2 使用JQuery完成一个省市联动的案例:使用XML作为响应内容:1.2.1 需求:
图片6.png
完成省市联动的效果.市的信息从后台服务器端获得.通过AJAX使用这样的功能!!!
1.2.2 分析:1.2.2.1 技术分析:
【XML作为响应文本】
List<City> list = new ArrayList<City>();
list.add(new City(1,”哈尔滨”));
list.add(new City(2,”齐齐哈尔”));
list.add(new City(3,”牡丹江”));
将list集合转出XML:
<list>
   <city>
      <name>哈尔滨</name>
   </city>
   ...
</list>
使用XStream工具:将Java对象转成XML.
【XStream的概述】
Xstream是一种OXMapping 技术,是用来处理XML文件序列化的框架,在将javaBean序列化,或将XML文件反序列化的时候,不需要其它辅助类和映射文件,使得XML序列化不再繁琐。
【XStream的入门】
引入xstream需要的jar包:
图片7.png
入门:
        @Test
        public void demo1(){
                List<City> list = new ArrayList<City>();
                list.add(new City(1,"哈尔滨"));
                list.add(new City(2,"齐齐哈尔"));
                list.add(new City(3,"牡丹江"));
               
                XStream stream = new XStream();
               
                // 设置标签的别名:
                stream.alias("city", City.class);
               
                // 设置子标签作为属性进行显示:
                stream.useAttributeFor(City.class, "id");
               
                String xml = stream.toXML(list);
               
                System.out.println(xml);
        }
1.2.2.2 步骤分析:
Ø 设计页面:
Ø 为第一个下拉列表绑定事件:change
Ø 在change事件触发的函数中:提交数据到Servlet.
Ø 在Servlet中:
n 接收数据:接收提交的省份的信息.
n Map<String,List<City>>
n 将集合转成XML,将XML写回到浏览器.
Ø 在回调函数中获得XML中的市的信息.
Ø 生成一个option元素,将option元素添加到第二个下拉列表中。
1.2.3 代码实现:
设计一个页面:
<h1>省市联动的案例</h1>
<select id="province">
        <option value="">--请选择--</option>
        <option value="黑龙江">黑龙江</option>
        <option value="吉林">吉林</option>
        <option value="辽宁">辽宁</option>
</select>
<select id="city">
        <option value="">--请选择--</option>
</select>
为第一个列表绑定事件:
$(function(){
        // 为第一个列表绑定事件:
        $("#province").change(function(){
                // 获得下拉列表选中的值
                var val = $(this).val();
                // alert(val);
                $.post("/WEB15/ServletDemo6",{"province":val},function(data){
                        // alert(data);
                        $("#city").html("<option>--请选择--</option>");
                       
                        $(data).find("city").each(function(){
                                var id = $(this).children("id").text();
                                var name = $(this).children("name").text();
                                // alert(name);
                                var op = "<option>"+name+"</option>";
                                $("#city").append(op);
                        });
                });
        });
});
1.3 使用Jquery完成省市联动的案例:使用JSON作为响应数据:1.3.1 需求:
图片8.png
完成省市联动的效果.市的信息从后台服务器端获得.通过AJAX使用这样的功能!!!
1.3.2 分析:1.3.2.1 技术分析:
【JSON的概述】
JSON的概念:
图片9.png
JSON的案例:
* {key:value,key:value}
   * {id:1,name:aaa}
* [{key:value,key:value},{key:value,key:value}]
   * [{id:1,name:aaa},{id:2,name:bbb}]
将对象转成JSON:
使用JSONLIB将Java中对象或集合转成JSON.
* JSONArray                :将数组或List集合转成JSON的.
* JSONObject        :将对象或Map集合转成JSON的.
1.3.3 代码实现:

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马