黑马程序员技术交流社区

标题: 【郑州校区】JavaWeb15-HTML篇笔记（三） [打印本页]

作者: 谷粒姐姐 时间: 2018-6-1 11:19
标题: 【郑州校区】JavaWeb15-HTML篇笔记（三）
1.1 案例三：使用JQuery完成仿百度的信息提示:1.1.1 需求:

在一个搜索页面中,键盘输入一些信息,在文本框下面给出一些提示信息(需要从服务器端进行查询的).

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)

);

设计一个页面：

为文本框绑定事件:编写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 需求:

完成省市联动的效果.市的信息从后台服务器端获得.通过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>

</city>

...

</list>

使用XStream工具:将Java对象转成XML.

【XStream的概述】

Xstream是一种OXMapping 技术，是用来处理XML文件序列化的框架,在将javaBean序列化，或将XML文件反序列化的时候，不需要其它辅助类和映射文件，使得XML序列化不再繁琐。

【XStream的入门】

引入xstream需要的jar包:

入门:

@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>

</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 需求:

完成省市联动的效果.市的信息从后台服务器端获得.通过AJAX使用这样的功能!!!

1.3.2 分析:1.3.2.1 技术分析:

【JSON的概述】

JSON的概念:

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 代码实现：

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2