您的位置 首页 java

JavaWeb17-案例之ajax(Java真正的全栈开发)

JavaWeb17-案例之ajax(Java真正的全栈开发)

案例 & ajax

一. 案例

1. 生成订单操作分析

先看下订单页面:

JavaWeb17-案例之ajax(Java真正的全栈开发)

分析下订单表需要那些字段

id 收货人(receiverName) 收货地址(receiverAddress) 收货人电话(receiverPhone) 总计(totalPrice)

分析下表之间的关系

这里面涉及到三张表,分别是用户表,订单表,商品表.他们之间的关系为

用户表和订单表之间是一对多的关系

订单表和商品表之间是多对多的关系

表的设计:

在订单表中添加一个用户id,表示用户和订单的关系

添加一张中间表,表示订单和商品的关系

中间表的字段 订单oid 商品pid 购买商品数量buynum 商品小计littleprice

创建表

用户表

create table user(

id int primary key AUTO_INCREMENT,

username varchar(20),

password varchar(20)

);

订单表(添加一个外键)

create table orders(

id varchar(50) primary key,

receivername varchar(20),

receiveraddress varchar(100),

receiverphone varchar(20),

totalprice double,

user_id int

);

中间表(订单项表 orderitem)

create table orderitem(

oid varchar(50),

pid varchar(50),

buynum int,

littleprice double,

primary key(oid,pid)

);

生成订单的过程,

先把收货人信息及用户id存入订单表(receiver… 订单id 用户id 商品总价)

把购物车里的商品及数量放到订单项表中(订单id 商品id 购买数量 小计)

最后修改商品表中的数量

以上三个操作必须在一个事务控制范围内

2. 生成订单操作实现

保证用户登录

编写javabean(订单bean,订单项bean)

订单bean

private String id;

private String receiverName;

private String receiverAddress;

private String receiverPhone;

private Double totalPrice;

private User user;

private List<OrderItem> items;

订单项实体bean

private Order order;

private Product product;

private Integer buyNum;

private Double littlePrice;

用户实体:user

private Integer id;

private String username;

private String password;

订单生成

保证用户登录

从cart.jsp点击”结账”按钮开始

JavaWeb17-案例之ajax(Java真正的全栈开发)

跳转到order.jsp(取出购物车里面商品信息及用户信息,还需自己录入收货信息)

JavaWeb17-案例之ajax(Java真正的全栈开发)

点击提交订单,发送请求到createOrderSevlet(主要逻辑如下)

Order order=new Order();

try {

//封装收货人信息及订单总价

BeanUtils.populate(order, request .getParameterMap());

} catch (IllegalAccessException e) {

e.printStackTrace();

} catch (InvocationTargetException e) {

e.printStackTrace();

}

//手动设置订单id

order.setId(UUIDUtils.getId());

order.setUser((User)request.getSession().getAttribute(“user”));

//设置商品集合

List<OrderItem> list=new ArrayList<OrderItem>();

Map<Product,Integer> cart = (Map<Product, Integer>) request.getSession().getAttribute(“cart”);

for (Product p : cart.keySet()) {

list.add(new OrderItem(order, p, cart.get(p), p.getPrice()*cart.get(p)));

}

order.setItems(list);

注意:事务然后调用orderservice添加订单

public void addOrder(Order order) {

try {

DataSourceUtils.startTransaction();

//添加订单

orderDao orderDao = new orderDao();

orderDao.addOrder(order);

//添加订单项

OrderItemDao oiDao=new OrderItemDao();

oiDao.addOrderItem(order);

//修改商品表

ProductDao pDao=new ProductDao();

pDao.updateProductPnum(order);

} catch (SQLException e) {

e.printStackTrace();

try {

DataSourceUtils.rollback();

} catch (SQLException e1) {

e1.printStackTrace();

}

} finally{

try {

DataSourceUtils.commitAndRelease();

} catch (SQLException e) {

e.printStackTrace();

}

}

}

添加订单(orderDao)

public void addOrder(Order order) throws SQLException {

QueryRunner runner=new QueryRunner();

String sql=”insert into orders values (?,?,?,?,?,?);”;

runner.update(DataSourceUtils.getConnection(), sql, order.getId(),

order.getReceiverName(),order.getReceiverAddress(),

order.getReceiverPhone(),order.getTotalPrice(),

order.getUser().getId());

}

添加订单项(orderItemDao)

public void addOrderItem(Order order) throws SQLException {

QueryRunner runner=new QueryRunner();

String sql=”insert into orderitem values(?,?,?,?);”;

Object[][] params=new Object[order.getItems().size()][4];

for (int i = 0; i < order.getItems().size(); i++) {

OrderItem item = order.getItems().get(i);

params[i][0]=item.getOrder().getId();

params[i][1]=item.getProduct().getId();

params[i][2]=item.getBuyNum();

params[i][3]=item.getLittlePrice();

}

runner.batch(DataSourceUtils.getConnection(), sql, params);

}

修改商品数量(productDao)

public void updateProductPnum(Order order) throws SQLException {

//修改当前订单里的所含商品的数量

QueryRunner runner = new QueryRunner();

String sql=”update products set pnum = pnum – ? where id = ?”;

Object[][] params=new Object[order.getItems().size()][2];

for (int i = 0; i < order.getItems().size(); i++) {

OrderItem item = order.getItems().get(i);

params[i][0]=item.getBuyNum();

params[i][1]=item.getProduct().getId();

}

runner.batch(DataSourceUtils.getConnection(), sql, params);

}

二. ajax

1. ajax介绍

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

ajax作用:

AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

使用Javascript向服务器提出请求并处理响应而不阻塞用户!核心对象 xmlhttp Request。通过这个对象,您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。

AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。

AJAX 可使因特网应用程序更小、更快,更友好。

JavaWeb17-案例之ajax(Java真正的全栈开发)

2. ajax入门案例

获取XMLHttpRequest对象

对于不同的浏览器,获取方式有区别(从文档上粘过来)

function getXMLHttpRequest() {

var xmlhttp;

if ( window .XMLHttpRequest) {// code for all new browsers

xmlhttp = new XMLHttpRequest();

} else if (window.ActiveXObject) {// code for IE5 and IE6

xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);

}

return xmlhttp;

}

设置回调函数(onreadystatechange)

xmlHttp.onreadystatechange=function(){};

目的是服务器端响应完成后,浏览器端可以知道,并完成后续工作。

open 操作

xmlHttp.open(“GET”,”/day/ajax”);

设置访问的资源路径以及请求方式

send操作

xmlhttp.send(null);

发送请求

回调函数编写

在第二步的回调函数内完成操作。

3. XMLHttpRequest之API详解

Ajax 的核心是 Java Script 对象 XmlHttpRequest。该对象在 Internet Explorer 5 中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应,并且能够以文本或者一个 DOM 文档的形式返回内容。

onreadystatechange属性

当XMLHttpRequest对象的状态改变时会调用的一个函数.

readyState 属性

对于XMLHttpRequest对象,它有一个属性readyState,它有五个状态

0创建XMLHttpRequest对象.

1当open时

2当send时

3响应头已经返回,但响应正文没有完成,也就是响应没有完全完成.

4响应完成了

一般情况下,在回调的函数中,我们都是判断

if(xmlhttp.readyState==4&&xmlhttp.status==200)

来接收服务器端响应的信息.

status属性

由服务器返回的 HTTP 状态代码,如 200 表示成功,而 404 表示 “Not Found” 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。

responseText 属性

目前为止为服务器接收到的响应体(不包括头部),或者如果还没有接收到数据的话,就是空字符串。

如果 readyState 小于 3,这个属性就是一个空字符串。当 readyState 为 3,这个属性返回目前已经接收的响应部分。如果 readyState 为 4,这个属性保存了完整的响应体。

如果响应包含了为响应体指定字符编码的头部,就使用该编码。否则,假定使用 Unicode UTF-8。

responseXML 属性

对请求的响应,解析为 XML 并作为 Document 对象返回。

open方法

初始化 HTTP 请求参数,例如 URL 和 HTTP 方法,但是并不发送请求。

xmlhttp.open(请求方式,url);

请求方式: POST GET

路径:客户端路径 格式 /工程名/资源路径

如果是GET方式,想要向服务器发送请求,并且携带请求参数,可以直接在url后面连接。

如果是POST方式,想要向服务器发送请求,并且携带请求参数,我们需要在send时传递参数

send方法

发送 HTTP 请求,使用传递给 open() 方法的参数,以及传递给该方法的可选请求体。

如果请求方式是post,并且要携带参数,可以通过send的参数来传递

setRequestHeader 方法

向一个打开但未发送的请求设置或添加一个 HTTP 请求。

如果请求方式是POST,并且要携带参数,需要设置一个请求头.

setRequestHeader(“CONTENT-TYPE”,”application/x-www-form-urlencoded”);

中文乱码问题

get请求需要在发送请求的时候对中文进行编码,如下:

JavaWeb17-案例之ajax(Java真正的全栈开发)

服务器端处理方式和之前request的处理乱码方式一样.

4. 案例-验证用户名是否重复

5. 案例-商品信息模糊查询

a. 修改页面(menu_search.jsp),在这个页面的搜索栏添加ajax请求 JavaWeb17-案例之ajax(Java真正的全栈开发)

给搜索框添加键盘弹起事件,发送ajax请求,将输入的值出给后台

b. 编写后台功能

接受ajax发送过来的值

查找数据库(dao使用ColumnListHandler)

生成响应信息

c. 效果如下

JavaWeb17-案例之ajax(Java真正的全栈开发)

前台代码

//模糊匹配

function searchName(d){

var xmlhttp;

if (window.XMLHttpRequest) {// code for all new browsers

xmlhttp = new XMLHttpRequest();

} else if (window.ActiveXObject) {// code for IE5 and IE6

xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);

}

//回调函数

xmlhttp.onreadystatechange=function(){

if(xmlhttp.readyState==4 && xmlhttp.status == 200){

var data=xmlhttp.responseText;

if(data!=null && data!=””){

var arr=data.split(/s*,s*/);

var cDiv=document.getElementById(“content”);

cDiv.innerHTML=””;

for(var i=0;i<arr.length;i++){

cDiv.innerHTML+=(“<div onmouseover=’changeColor1(this)’ onmouseout=’changeColor2(this)’ onclick=’setName(this)’>”+arr[i]+”</div>”);

}

cDiv.style.display=”block”;

}

}

}

//open

xmlhttp.open(“GET”, “${pageContext.request.contextPath}/findProductByName?name=”+window.encodeURI(d.value));

//send

xmlhttp.send();

}

//放上去变色 为了展示效果好看 添加颜色

function changeColor1(d){

d.style.backgroundColor=”#fff”;

}

//离开之后恢复原色

function changeColor2(d){

d.style.backgroundColor=”#999″;

}

//将选中的值赋给文本框

function setName(d){

document.getElementById(“name”).value=d.innerHTML;

//设置完值之后将div隐藏

document.getElementById(“content”).style.display=”none”;

}

后台代码

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.setContentType(“text/html;charset=utf-8”);

//获取参数

String name = request.getParameter(“name”);

name=new String(name.getBytes(“iso8859-1″),”utf-8”);

if(name==null || name.trim().length()==0){

return;

}

//调用service

ProductService service=new ProductService();

List<Object> names=null;

try {

names = service.findProductByName(name);

} catch (SQLException e) {

e.printStackTrace();

}

if(names!=null && names.size()>0){

String names_ = names.toString();

response.getWriter().write(names_.substring(1,names_.length()-1));

}

}

6. json 介绍与入门

json介绍

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript(Standard ECMA-262 3rd Edition – December 1999)的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成(网络传输速度)。

json格式

JSON结构有两种结构

json简单说就是javascript中的对象和数组,所以这两种结构就是对象和数组两种结构,通过这两种结构可以表示各种复杂的结构

u 对象:对象在js中表示为“{}”括起来的内容,数据结构为 {key:value,key:value,…}的键值对的结构,在面向对象的语言中,key为对象的属性,value为对应的属性值,所以很容易理解,取值方法为 对象.key 获取属性值,这个属性值的类型可以是 数字、字符串、数组、对象几种。

u 数组:数组在js中是中括号“[]”括起来的内容,数据结构为 [“java”,”javascript”,”vb”,…],取值方式和所有语言中一样,使用索引获取,字段值的类型可以是 数字、字符串、数组、对象几种。

经过对象、数组2种结构就可以组合成复杂的数据结构了。

7. jsonlib插件介绍

jsonlib介绍

Json-lib 是一个 Java 类库(官网:)可以实现如下功能:

•转换 javabeans, maps, collections, java arrays 和 XML 成为 json 格式数据

•转换 json 格式数据成为 javabeans 对象

Json-lib 需要的 jar 包

•commons-beanutils-1.8.3.jar

•commons-collections-3.2.1.jar

•commons-lang-2.6.jar

•commons-logging-1.1.1.jar

•ezmorph-1.0.6.jar

•json-lib-2.4-jdk15.jar

jsonlib常用api

数组,Collection集合转换成json数据使用 JsonArray.fromObject(对象);

Map,javaBean转换成json数据使用 JsonObject.fromObject(对象);

如果不想让javaBean中的数据出现在json中.

JsonConfig jsonConfig = new JsonConfig();

jsonConfig.setExcludes(new String[]{“price”});

JSONObject jsonObject = JSONObject.fromObject(p1, jsonConfig);

System.out.println(jsonObject);

注意:

如果服务器端返回的数据格式是json格式,那么我们在浏览器端得到数据时

需要使用eval函数将字符串转换成json对象.

var msg=xmlhttp.responseText;

var obj=eval(msg);

有的时候通过eval转换时,得不到一个json对象,这时做以下操作

var obj=eval(“(“+msg+”)”);

8. 案例-使用json来完成商品信息模糊查询操作实现


精彩资源与分享,欢迎关注【Java帮帮】微信公众号与【Java帮帮】QQ空间

文章来源:智云一二三科技

文章标题:JavaWeb17-案例之ajax(Java真正的全栈开发)

文章地址:https://www.zhihuclub.com/186120.shtml

关于作者: 智云科技

热门文章

网站地图