1. 生成订单操作分析
先看下订单页面:
分析下订单表需要那些字段
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点击”结账”按钮开始
跳转到order.jsp(取出购物车里面商品信息及用户信息,还需自己录入收货信息)
点击提交订单,发送请求到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);
}
1. ajax介绍
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。
ajax作用:
AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
使用Javascript向服务器提出请求并处理响应而不阻塞用户!核心对象XMLHTTPRequest。通过这个对象,您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。
AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
AJAX 可使因特网应用程序更小、更快,更友好。
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 的核心是 JavaScript 对象 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请求需要在发送请求的时候对中文进行编码,如下:
服务器端处理方式和之前request的处理乱码方式一样.
4. 案例-验证用户名是否重复
5. 案例-商品信息模糊查询
a. 修改页面(menu_search.jsp),在这个页面的搜索栏添加ajax请求
给搜索框添加键盘弹起事件,发送ajax请求,将输入的值出给后台
b. 编写后台功能
接受ajax发送过来的值
查找数据库(dao使用ColumnListHandler)
生成响应信息
c. 效果如下
前台代码
//模糊匹配
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 类库(官网:http://json-lib.sourceforge.net/)可以实现如下功能:
•转换 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来完成商品信息模糊查询操作实现