jsp中ajax按条件查询数据库JavaWeb17案例之ajaxJava真正的全栈开辟

先看下订单页面:

剖析下订单表须要那些字段

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

jsp中ajax按条件查询数据库JavaWeb17案例之ajaxJava真正的全栈开辟 Vue.js

剖析下表之间的关系

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

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

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

表的设计:

在订单表中添加一个用户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