专栏首页Java帮帮-微信公众号-技术文章全总结JavaWeb17-案例之ajax(Java真正的全栈开发)

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

案例 & ajax

一.案例

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);
}

二.ajax

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来完成商品信息模糊查询操作实现

本文分享自微信公众号 - Java帮帮(javahelp)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-02-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • MySQL数据库备份与还原

    MySQL数据库备份与还原 今天就分享代码,大家回去看看研究下! import java.io.BufferedReader; import java.io....

    奋斗蒙
  • String中的null,以及String s;等区别详解

    1、判断一个引用类型数据是否null。 用==来判断。 2、释放内存,让一个非null的引用类型变量指向null。这样这个对象就不再被任何对象应用了。等待JVM...

    奋斗蒙
  • 研究微信即时通讯的服务端、朋友圈、红包、推送等方案

    推送:采用增量推送的方式,设置一个sequence,服务端一个客户端一个,每次同步时客户端将cur_seq发给服务端,获得增量数据同步到本地。每个seq都是lo...

    奋斗蒙
  • 详述 IntelliJ IDEA 中恢复代码的方法「进阶篇」

    在博文“ 详述 IntelliJ IDEA 中恢复代码的方法 ”中,咱们已经了解了如何将代码恢复至某一版本,但是通过Local History恢复代码有的时候并...

    CG国斌
  • python | 学习总结 urllib.request

    Number of Rows of Data =208 Number of Columns of Data =61

    努力在北京混出人样
  • Mathematica得一些小技巧~~~

    WolframChina
  • CentOS下利用mysqlbinlog恢复MySQL数据库

    老七Linux
  • Linux 基础入门

    腾讯云提供了开发者实验室帮助用户学习Linux 基础入门,教程内容如下,用户可以点击开发者实验室快速上机完成实验。

    小Q
  • SAP PP生产订单成本的计划、控制和结算

    SAP系统成本分析功能关注订单的成本,通过对计划成本和实际成本的比较分析,可以发现成本控制上的问题,以便及时解决问题。

    用户5495712
  • Hadoop学习5--配置本地开发环境(Windows+Eclipse)

    一、导入hadoop插件到eclipse 插件名称:hadoop-eclipse-plugin-2.7.0.jar 我是从网上下载的,还可以自己编译。 放到ec...

    小端

扫码关注云+社区

领取腾讯云代金券