16-JSON、AJAX、书城项目第九阶段、i18n
2024-05-09 14:11:55
16-JSON、AJAX、书城项目第九阶段、i18n
- 准备
- 1、什么是JSON?
- 1.1、JSON在JavaScript中的使用。
- 1.1.1、json的定义
- 1.1.2、json的访问
- 1.1.3、json的两个常用方法
- 演示
- 新建web/script/复制JQuery.js
- 新建web/json.html
- 1.2、JSON在java中的使用
- 导包gson.jar于WEB-INF/lib，并Add as Library
- 1.2.1. javaBean和json的互转
- 1.2.2. list和json的互转
- 1.2.3. map 和json的互转
- 演示
- 新建src/com.pojo/Person
- 新建com/json/PersonListType
- 新建com/json/PersonMapType
- 新建com/json/JsonTest
- 2、AJAX请求
- 2.1、什么是AJAX请求
- 2.2、原生的Ajax请求的实例
- api
- 演示
- 新建web/ajax.html
- 创建com/servlet/BaseServlet 导入servlet-api.jar
- 创建servlet/AjaxServlet
- 配置web.xml
- 2.3、jQuery中的AJAX请求
- 演示
- 修改 AjaxServlet
- 新建 web/Jquery_Ajax_request.html
- 3、书城项目第九阶段
- 3.1、使用AJAX 验证用户名是否可用
- 修改 regist.jsp
- 修改 UserServlet
- 3.2、使用AJAX修改把商品添加到购物车
- 修改 CartServlet
- 修改 BaseServlet
- 修改 page/client/index.jsp
- 3、i18n
- 有兴趣的了解一下
准备
新建模块16_json_ajax_i18n，并创建Tomcat实例
1、什么是JSON?
JSON (JavaScript object Notation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON 采用完全独立于语言的文本格式，而且很多语言都提供了对json的支持(包括C,2++,C,Java, JavaSeript, Perl, Python 等)。这样就使得JSON成为理想的数据交换格式。
json是一种轻量级的数据交换格式。
轻量级指的是跟xml做比较。
数据交换指的是客户端和服务器之间业务数据的传递格式 ;
1.1、JSON在JavaScript中的使用。
1.1.1、json的定义
json是由键值对组成，并且由花括号(大括号)包围。每个键由引号引起来，键和值之间使用冒号进行分隔, 多组键值对之间进行逗号进行分隔。
1.1.2、json的访问
json本身是一个对象。
json中的key我们可以理解为是对象中的一个属性。
json中的key访问就跟访问对象的属性一样;json对象.key
1.1.3、json的两个常用方法
json的存在有两种形式
一种是，对象的形式存在，我们叫它json对象。
一种是，字符串的形式存在，我们叫它json字符串。
一般我们要操作json中的数据的时候，需要json对象的格式。
一般我们要在客户端和服务器之间进行数据交换的时候，使用json字符串。
JSON.stringify()
把json对象转换成为json字符串
JSON.parse()
把json字符串转换成为json对象
演示
新建web/script/复制JQuery.js
新建web/json.html
<!DoCTYPE html PUBLIC "-//w3c//DTD HTML 4.@1 Transitional//en" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="pragma" content="no-cache"/><meta http-equiv="cache-control" content="no-cache"/><meta http-equiv="Expires" content="e"/><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">//json的定义var jsonObj={"key1":12,"key2":"abc","key3":true,"key4":[11,"arr",false],"key5":{"key5_1":551,"key5_2":"key5_2_value",},"key6":[{"key6_1_1":6611,"key6_1_2":"key6_1_2_value",},{"key6_2_1":6621,"key6_2_2":"key6_2_2_value",}]};//json的访问// alert(typeof (jsonObj));// object json就是一个对象// alert(jsonObj.key1);//12// alert(jsonObj.key2);// alert(jsonObj.key3);// alert(jsonObj.key4);//得到数组//json中数组值的遍历// for (var i=0;i<jsonObj.key4.length;i++){// alert(jsonObj.key4[i]);// }// alert(jsonObj.key5.key5_1);//551// alert(jsonObj.key5.key5_2);//key5_2_value// alert(jsonObj.key6);//得到JSON数组//取出来的每一个元素都是JSON对象// var jsonItem=jsonObj.key6[0];// alert(jsonItem.key6_1_1);//6611// alert(jsonItem.key6_1_2);//key6_1_2_value//json对象转字符串// alert(jsonObj);//objectvar jsonObjString=JSON.stringify(jsonObj);//特别像Java中对象的toString// alert(jsonObjString);//{"key1":12,"key2":"abc","key3":true,"key4":[11,"arr",false],// "key5":{"key5_1":551,"key5_2":"key5_2_value"},"key6":[{"key6_1_1":6611,"key6_1_2":"key6_1_2_value"},// {"key6_2_1":6621,"key6_2_2":"key6_2_2_value"}]}// json字符串转json对象var jsonObj2=JSON.parse(jsonObjString);alert(jsonObj2.key1);//12alert(jsonObj2.key2);//abc</script></head><body></body>
</html>
1.2、JSON在java中的使用
导包gson.jar于WEB-INF/lib，并Add as Library
gson-2.2.4.jar免费下载
1.2.1. javaBean和json的互转
1.2.2. list和json的互转
1.2.3. map 和json的互转
演示
新建src/com.pojo/Person
package com.pojo;public class Person {private Integer id;private String name;public Person() {}public Person(Integer id, String name) {this.id = id;this.name = name;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}@Overridepublic String toString() {return "Person{" +"id=" + id +", name='" + name + '\'' +'}';}
}新建com/json/PersonListType
package com.json;import com.google.gson.reflect.TypeToken;
import com.pojo.Person;import java.util.ArrayList;public class PersonListType extends TypeToken<ArrayList<Person>> {}新建com/json/PersonMapType
package com.json;import com.google.gson.reflect.TypeToken;
import com.pojo.Person;import java.util.HashMap;public class PersonMapType extends TypeToken<HashMap<Integer,Person>> {}新建com/json/JsonTest
package com.json;import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import com.pojo.Person;
import org.junit.Test;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;public class JsonTest {// 1.2.1. javaBean和json的互转@Testpublic void test1(){Person person=new Person(1,"我好帅");//创建Gson对象实例Gson gson=new Gson();//toJson方法可以把java对象转换成为JSON字符串String personJsonString = gson.toJson(person);System.out.println(personJsonString);//{"id":1,"name":"我好帅"}//fromJson方法可以把JSON字符串转回java对象//第一个参数是JSON字符串//第二个参数是转换回去的java对象类型Person person1 = gson.fromJson(personJsonString, Person.class);System.out.println(person1);//Person{id=1, name='我好帅'}}// 1.2.2.list和json的互转@Testpublic void test2(){List<Person> personList=new ArrayList<>();personList.add(new Person(1,"国哥"));personList.add(new Person(2,"康师傅"));Gson gson=new Gson();//把List转换为JSON字符串String personListJsonString = gson.toJson(personList);System.out.println(personListJsonString);//[{"id":1,"name":"国哥"},{"id":2,"name":"康师傅"}]//错误的
// List<Person> list = gson.fromJson(personListJsonString, personList.getClass());
// System.out.println(list);//[{id=1.0, name=国哥}, {id=2.0, name=康师傅}]
// Person person = list.get(0);//ClassCastException
// System.out.println(person);List<Person> list = gson.fromJson(personListJsonString,new PersonListType().getType());System.out.println(list);//[{id=1.0, name=国哥}, {id=2.0, name=康师傅}]Person person = list.get(0);System.out.println(person);//Person{id=1, name='国哥'}}
// 1.2.3，map 和json的互转@Testpublic void test3(){Map<Integer,Person> personMap=new HashMap<>();personMap.put(1,new Person(1,"我好帅"));personMap.put(2,new Person(2,"你也好帅"));Gson gson=new Gson();String personMapJsonString = gson.toJson(personMap);System.out.println(personMapJsonString);//{"1":{"id":1,"name":"我好帅"},"2":{"id":2,"name":"你也好帅"}}// Map<Integer,Person> personMap2 =gson.fromJson(personMapJsonString, new PersonMapType().getType());Map<Integer,Person> personMap2 =gson.fromJson(personMapJsonString, new TypeToken<HashMap<Integer,Person>>(){}.getType());//匿名内部类对象System.out.println(personMap2);//{1=Person{id=1, name='我好帅'}, 2=Person{id=2, name='你也好帅'}}Person person = personMap2.get(1);System.out.println(person);//Person{id=1, name='我好帅'}}}2、AJAX请求
2.1、什么是AJAX请求
AJAX即“Asynchronous Javascript And XML"(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。
ajax是一种浏览器通过js异步发起请求。局部更新页面的技术。
Ajax 请求的局部更新，浏览器地址栏不会改变
局部更新不会舍弃原来页面的内容
异步就是自己进行自己的，不要等其他执行
2.2、原生的Ajax请求的实例
api
演示
新建web/ajax.html
<!DOCTYPE html PUBLIC "-//W3c//DTD HTML 4.01 Transitional//eN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="pragma" content="no-cache"/><meta http-equiv="cache-control" content="no-cache"/><meta http-equiv="Expires" content="e"/><meta http-equiv="Content-Type" content="text/html; charset=UtF-8"><title>Insert title here</title><script type="text/javascript">//在这里使用JavaScript语言发起Ajax请求，访问服务器AjaxServlet中JavaScriptAjaxfunction ajaxRequest() {// 1，我们首先要创建XMLHttpRequestvar xmlhttprequest=new XMLHttpRequest();// 2，调用open方法设置请求参数xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true)// 4，在send方法前绑定onreadystatechange事件，处理请求完成后的操作。xmlhttprequest.onreadystatechange=function (){if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200){// alert(xmlhttprequest.responseText);var jsonObj=JSON.parse(xmlhttprequest.responseText);//把响应的数据显示在页面上// document.getElementById("div01").innerHTML=xmlhttprequest.responseText;document.getElementById("div01").innerHTML="编号："+jsonObj.id+",姓名："+jsonObj.name;}}// 3，调用send方法发送请求xmlhttprequest.send();}</script></head><body><button onclick="ajaxRequest()">ajax.Request</button><div id="div01"></div></body>
</html>
创建com/servlet/BaseServlet 导入servlet-api.jar
package com.servlet;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.Method;public abstract class BaseServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req,resp);}protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//解决post请求中文乱码问题//一定在获取请求参数之前调用才有效req.setCharacterEncoding("UTF-8");//解决响应乱码resp.setContentType("text/html;charset=UTF-8");String action=req.getParameter("action");
// System.out.println(action);//action的value和调用的方法名是统一的
// if ("login".equals(action)){ System.out.println("处理登录的需求");
// login(req,resp);
// }else if ("regist".equals(action)){ System.out.println("处理注册的需求");
// regist(req,resp);
// }//反射try {//获取action业务鉴别字符串，获取相应的业务方法 反射对象Method method = this.getClass().getDeclaredMethod(action,HttpServletRequest.class,HttpServletResponse.class);//调用目标业务方法method.invoke(this,req,resp);} catch (Exception e) {e.printStackTrace();throw new RuntimeException(e);//把异常抛给Filter过滤器}}}创建servlet/AjaxServlet
package com.servlet;import com.google.gson.Gson;
import com.pojo.Person;import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;public class AjaxServlet extends BaseServlet{protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("Ajax请求过来了");Person person=new Person(1,"国哥");//json格式的字符串Gson gson=new Gson();String personJsonString = gson.toJson(person);resp.getWriter().write(personJsonString);}
}配置web.xml
<servlet><servlet-name>AjaxServlet</servlet-name><servlet-class>com.servlet.AjaxServlet</servlet-class></servlet><servlet-mapping><servlet-name>AjaxServlet</servlet-name><url-pattern>/ajaxServlet</url-pattern></servlet-mapping>
2.3、jQuery中的AJAX请求
$.ajax方法url 表示请求的地址type 表示请求的类型GET或POST请求data 表示发送给服务器的数据格式有两种:一:name=value&name=value 二:{key:value}success 请求成功，响应的回调函数dataType 响应的数据类型常用的数据类型：text 表示纯文本xml 表示xml数据json 表示json对象
$.get方法和$.post方法(比$.ajax少了个type)url 请求的url地址data 发送的数据callback 成功的回调函数type 返回的数据类型$.getJSON 方法url 请求的url地址data 发送的数据callback 成功的回调函数表单序列化serialize()
serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=value的形式进行拼接。
演示
修改 AjaxServlet
package com.servlet;import com.google.gson.Gson;
import com.pojo.Person;import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;public class AjaxServlet extends BaseServlet{protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("Ajax请求过来了");Person person=new Person(1,"国哥");//json格式的字符串Gson gson=new Gson();String personJsonString = gson.toJson(person);resp.getWriter().write(personJsonString);}protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("jQueryAjax == 方法调用了");Person person=new Person(1,"国哥");//json格式的字符串Gson gson=new Gson();String personJsonString = gson.toJson(person);resp.getWriter().write(personJsonString);}protected void jQueryGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("jQueryGet == 方法调用了");Person person=new Person(1,"国哥");//json格式的字符串Gson gson=new Gson();String personJsonString = gson.toJson(person);resp.getWriter().write(personJsonString);}protected void jQueryPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("jQueryPost == 方法调用了");Person person=new Person(1,"国哥");//json格式的字符串Gson gson=new Gson();String personJsonString = gson.toJson(person);resp.getWriter().write(personJsonString);}protected void jQueryGetJSON(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("jQueryGetJSON == 方法调用了");Person person=new Person(1,"国哥");//json格式的字符串Gson gson=new Gson();String personJsonString = gson.toJson(person);resp.getWriter().write(personJsonString);}protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("jQuerySerialize == 方法调用了");System.out.println("用户名："+req.getParameter("username"));System.out.println("密码："+req.getParameter("password"));Person person=new Person(1,"国哥");//json格式的字符串Gson gson=new Gson();String personJsonString = gson.toJson(person);resp.getWriter().write(personJsonString);}
}新建 web/Jquery_Ajax_request.html
<!DOCTYPE html PUBLIE "-//w3c//DTD HTML 4.O1 Transitional//EN" "http://www.w3.org/TR/htm14">
<html><head><meta http-equiv="pragma" content="no-cache" /><meta http-equiv="cache-control" content="no-cache" /><meta http-equiv="Expires" content="0"/><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="script/jquery.js"></script><script type="text/javascript">$(function() {//ajax请求$("#ajaxBtn").click(function () {$.ajax({url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",// data:"action=jQueryAjax",data:{action:"jQueryAjax"},type:"GET",success:function (data) {//参数一定要有// alert("服务器返回的数据是"+data);// var jsonObj=JSON.parse(data)// $("#msg").html("编号："+jsonObj.id+",性名；"+jsonObj.name);$("#msg").html("ajax 编号："+data.id+",性名；"+data.name);},// dataType:"text"dataType:"json"});});//ajax--get请求$("#getBtn").click(function () {url="http://localhost:8080/16_json_ajax_i18n/ajaxServlet";data="action=jQueryGet";callback=function (data) {$("#msg").html("get 编号："+data.id+",性名；"+data.name);};type="json";$.get(url,data,callback,type);});//ajax--post请求$("#postBtn").click(function () {$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data) {$("#msg").html("post 编号："+data.id+",性名；"+data.name);},"json");});//ajax--jQueryGetJSON请求$("#getJSONBtn").click(function () {$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function (data) {$("#msg").html("getJSON 编号："+data.id+",性名；"+data.name);});});//ajax请求$("#submit").click(function (){//把参数序列化// alert($("#form01").serialize());$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&"+$("#form01").serialize(),function (data) {$("#msg").html("Serialize 编号："+data.id+",性名；"+data.name);})});});</script></head>
<body><div><button id="ajaxBtn">$.ajax请求</button><button id="getBtn">$.get请求</button><button id="postBtn">$.post请求</button><button id="getJSONBtn">$.getJSoN请求</button></div><div id="msg"></div><br/><br/><form id="form01" >用户名:<input name="username" type="text" /><br/>密码:<input name="password" type="password" /><br/>下拉单选:<select name="single"><option value="Single">Single</option><option value="Single2">Single2</option></select><br/>下拉多选:<select name="multiple"><option selected="selected" value="Multiple1">Multiple1</option><option value="Multiple2">Multiple2</option><option selected="selected" value="Multiple3">Multiple3</option></select><br/>复选:<input type="checkbox" name= "check" value="check1"/> check1<input type="checkbox" name="check" value="check2" checked="checked"/>check2<br/>单选:<input type="radio" name="radio" value="radio1" checked="checked"/> radio1<input type="radio" name="radio" value="radio2"/>radio2<br/></form><button id="submit">提交--serialize()</button></body>
</html>
3、书城项目第九阶段
导入gson-2.2.4.jar包
3.1、使用AJAX 验证用户名是否可用
修改 regist.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>尚硅谷会员注册页面</title><%--静态包含 base标签，css样式，jquery文件 --%><%@ include file="/pages/common/head.jsp"%><script type="text/javascript">//页面加载完成之后$(function () {$("#username").blur(function (){//1 获取用户名var username=this.value;$.getJSON("http://localhost:8080/book/userServlet","action=ajaxExistsUsername&username="+username,function (data){// console.log(data);if (data.existsUsername){$("span.errorMsg").text("用户名已存在!");}else {$("span.errorMsg").text("用户名可用!");}});});//给验证码的图片，绑定单击事件$("#code_img").click(function (){//在事件响应的function函数中有一个this对象。这个this对象，是当前正在响应事件的dom对象//src表示验证码img标签的图片路径。它可读可写。// alert(this.src);this.src="${basePath}kaptcha.jpg?d="+new Date();});//给注册绑定单击事件$("#sub_btn").click(function () {//验证用户名:必须由字母，数字下划线组成，并且长度为5到12位//1获取用户名输入框里的内容var usernameText=$("#username").val();//2创建正则表达式对象var usernamePatt=/^\w{5,12}$/;//3使test方法验证if(!usernamePatt.test(usernameText)){//4提示用户结果$("span.errorMsg").text("用户名不合法!");return false;}//验证密码:必须由字母，数字下划线组成，并且长度为5到12位//1获取用户名输入框里的内容var passwordText=$("#password").val();//2创建正则表达式对象var passwordPatt=/^\w{5,12}$/;//3使test方法验证if(!passwordPatt.test(passwordText)){//4提示用户结果$("span.errorMsg").text("密码不合法!");return false;}//验证确认密码:和密码相同//1获取确认密码内容var repwdText=$("#repwd").val();//2和密码相比较if (repwdText!=passwordText){//3提示用户$("span.errorMsg").text("确认密码和密码不一致!");return false;}//邮箱验证:xxxxx@xxx.com//1获取邮箱里的内容var emailText=$("#email").val();//2创建正则表达式对象var emailPatt=/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;//3使test方法验证if(!emailPatt.test(emailText)){//4提示用户结果$("span.errorMsg").text("邮箱格式不合法!");return false;}//验证码现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。var codeText=$("#code").val();//去掉验证码前后空格alert("去空格前["+codeText+"]");codeText=$.trim(codeText);alert("去空格后["+codeText+"]");if (codeText==null||codeText==""){//提示用户结果$("span.errorMsg").text("验证码不能为空");return false;}$("span.errorMsg").text("");});});</script><style type="text/css">.login_form {height: 420px;margin-top: 25px;}</style></head><body><div id="login_header"><img class="logo_img" alt="" src="static/img/logo.gif">
</div><div class="login_banner"><div id="l_content"><span class="login_word">欢迎注册</span></div><div id="content"><div class="login_form"><div class="login_box"><div class="tit"><h1>注册尚硅谷会员</h1><span class="errorMsg">
<%-- <%=request.getAttribute("msg")==null?"":request.getAttribute("msg")%>--%>${requestScope.msg}</span></div><div class="form"><form action="userServlet" method="post"><input type="hidden" name="action" value="regist"/><label>用户名称:</label><input class="itxt" type="text" placeholder="请输入用户名"
<%-- value="<%=request.getAttribute("username")==null?"":request.getAttribute("username")%>"--%>value="${requestScope.username}"autocomplete="off" tabindex="1" name="username" id="username"/><br/><br/><label>用户密码:</label><input class="itxt" type="password" placeholder="请输入密码"autocomplete="off" tabindex="1" name="password" id="password"/><br/><br/><label>确认密码:</label><input class="itxt" type="password" placeholder="确认密码"autocomplete="off" tabindex="1" name="repwd" id="repwd"/><br/><br/><label>电子邮件:</label><input class="itxt" type="text" placeholder="请输入邮箱地址"
<%-- value="<%=request.getAttribute("email")==null?"":request.getAttribute("email")%>"--%>value="${requestScope.email}"autocomplete="off" tabindex="1" name="email" id="email"/><br/><br/><label>验证码:</label><input class="itxt" type="text" name="code" style="width: 80px;" id="code"/>
<%-- <img alt="" src="kaptcha.jpg" style="float: right;margin-right: 40px;width: 100px;height: 28px;">--%><img id="code_img" alt="" src="kaptcha.jpg" style="width: 110px;height: 30px;"><br/><br/><input type="submit" value="注册" id="sub_btn"/></form></div></div></div></div>
</div><%--静态包含页脚内容--%>
<%@include file="/pages/common/footer.jsp"%></body></html>
修改 UserServlet
package com.atguigu.web;import com.atguigu.pojo.User;
import com.atguigu.service.UserService;
import com.atguigu.service.impl.UserServiceImpl;
import com.atguigu.utils.WebUtils;
import com.google.gson.Gson;import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;import static com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY;public class UserServlet extends BaseServlet {private UserService userService = new UserServiceImpl();/*** 登出（注销）* @param req* @param resp* @throws ServletException* @throws IOException*/protected void logout(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 1、销毁Session中用户登录的信息(或者销毁Session)req.getSession().invalidate();
// 2、重定向到首页（或登录页面)。resp.sendRedirect(req.getContextPath());}/*** 处理登录的功能* @param req* @param resp* @throws ServletException* @throws IOException*/protected void login(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//1、获取请求的参数String username = req.getParameter("username");String password = req.getParameter("password");//2、调用XxxService.xxx()处理业务User loginUser = userService.login(new User(null, username, password, null));//如果等于null，说明登录失败if (loginUser==null){// 把错误信息，和回显的表单项信息，保存到Request域中req.setAttribute("msg","用户名或密码错误！");req.setAttribute("username",username);// 跳回登录页面req.getRequestDispatcher("/pages/user/login.jsp").forward(req,resp);}else {// 成功//保存用户登录的信息req.getSession().setAttribute("user",loginUser);// 跳到成功页面login_success.jspreq.getRequestDispatcher("/pages/user/login_success.jsp").forward(req,resp);}}/*** 处理注册的功能* @param req* @param resp* @throws ServletException* @throws IOException*/protected void regist(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//获取Session中的验证码String token = (String) req.getSession().getAttribute(KAPTCHA_SESSION_KEY);//删除Session中的验证码req.getSession().removeAttribute(KAPTCHA_SESSION_KEY);// 1、获取请求的参数String username = req.getParameter("username");String password = req.getParameter("password");String email = req.getParameter("email");String code = req.getParameter("code");// Map<String, String[]> parameterMap = req.getParameterMap();
// for (Map.Entry<String, String[]> entry:parameterMap.entrySet()) {// System.out.println(entry.getKey()+"="+ Arrays.asList(entry.getValue()));
// }// User user=new User();
// WebUtils.copyParamToBean(req,user);//注入赋值，与User类中setXxx对应User user = WebUtils.copyParamToBean(req.getParameterMap(),new User());//注入赋值，与User类中setXxx对应// 2、检查验证码是否正确 ===写死，要求验证码为：abcdeif (token!=null&&token.equalsIgnoreCase(code)){// 3、检查用户名是否可用if (userService.existsUsername(username)){System.out.println("用户名["+username+"]已存在！");// 把回显信息保存到Request域中req.setAttribute("msg","用户名已存在！！");req.setAttribute("username",username);req.setAttribute("email",email);
// 跳回注册页面req.getRequestDispatcher("/pages/user/regist.jsp").forward(req,resp);}else {// 可用 调用Service保存到数据库userService.registUser(new User(null,username,password,email));
// 跳到注册成功束面regist_success.jspreq.getRequestDispatcher("/pages/user/regist_success.jsp").forward(req,resp);}}else {// 把回显信息保存到Request域中req.setAttribute("msg","验证码错误！！");req.setAttribute("username",username);req.setAttribute("email",email);System.out.println("验证码["+code+"]错误，");req.getRequestDispatcher("/pages/user/regist.jsp").forward(req,resp);}}protected void ajaxExistsUsername(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//获取请求的参数usernameString username=req.getParameter("username");//调用userService.existsUsername();boolean existsUsername = userService.existsUsername(username);//这里重命名一下原来的existUsername--》existsUsername//把返回的结果封装为map对象Map<String,Object> resultMap=new HashMap<>();resultMap.put("existsUsername",existsUsername);Gson gson=new Gson();String json = gson.toJson(resultMap);resp.getWriter().write(json);}}3.2、使用AJAX修改把商品添加到购物车
修改 CartServlet
package com.atguigu.web;import com.atguigu.pojo.Book;
import com.atguigu.pojo.Cart;
import com.atguigu.pojo.CartItem;
import com.atguigu.service.BookService;
import com.atguigu.service.impl.BookServiceImpl;
import com.atguigu.utils.WebUtils;
import com.google.gson.Gson;import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;public class CartServlet extends BaseServlet{private BookService bookService=new BookServiceImpl();/*** 加入购物车* @param req* @param resp* @throws ServletException* @throws IOException*/protected void addItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// System.out.println("加入购物车");
// System.out.println("商品编号："+req.getParameter("id"));//获取请求的参数 商品编号int id= WebUtils.parseInt(req.getParameter("id"),0);//调用bookService.queryBookById(id):Book 得到图书的信息Book book=bookService.queryBookById(id);//把图书信息，转换成为CartItem商品项CartItem cartItem=new CartItem(book.getId(), book.getName(), 1,book.getPrice(),book.getPrice());//调用Cart.addItem(CartItem):添加商品项Cart cart= (Cart) req.getSession().getAttribute("cart");if (cart==null){cart=new Cart();req.getSession().setAttribute("cart",cart);}cart.addItem(cartItem);
// System.out.println(cart);//重定向回商品列表页面
// resp.sendRedirect(req.getContextPath());// System.out.println("请求头Referer的值："+req.getHeader("Referer"));//最后一个添加商品的名称req.getSession().setAttribute("lastName",cartItem.getName());//重定向回原来商品所在地址页面resp.sendRedirect(req.getHeader("Referer"));}protected void ajaxAddItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//获取请求的参数 商品编号int id= WebUtils.parseInt(req.getParameter("id"),0);//调用bookService.queryBookById(id):Book 得到图书的信息Book book=bookService.queryBookById(id);//把图书信息，转换成为CartItem商品项CartItem cartItem=new CartItem(book.getId(), book.getName(), 1,book.getPrice(),book.getPrice());//调用Cart.addItem(CartItem):添加商品项Cart cart= (Cart) req.getSession().getAttribute("cart");if (cart==null){cart=new Cart();req.getSession().setAttribute("cart",cart);}cart.addItem(cartItem);//最后一个添加商品的名称req.getSession().setAttribute("lastName",cartItem.getName());// 6、返回购物车总的商品数量和最后一个添加的商品名称Map<String,Object> resultMap=new HashMap<>();resultMap.put("totalCount",cart.getTotalCount());resultMap.put("lastName",cartItem.getName());Gson gson=new Gson();String resultMapJosnString =gson.toJson(resultMap);resp.getWriter().write(resultMapJosnString);}/*** 删除商品项* @param req* @param resp* @throws ServletException* @throws IOException*/protected void deleteItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//获取请求的参数 商品编号int id= WebUtils.parseInt(req.getParameter("id"),0);//获取购物车对象Cart cart= (Cart) req.getSession().getAttribute("cart");if (cart!=null){//删除了购物车商品项cart.deleteItem(id);//重定向回原来商品所在地址页面resp.sendRedirect(req.getHeader("Referer"));}}/*** 清空购物车* @param req* @param resp* @throws ServletException* @throws IOException*/protected void clear(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//获取购物车对象Cart cart= (Cart) req.getSession().getAttribute("cart");if (cart!=null){//清空购物车cart.clear();//重定向回原来商品所在地址页面resp.sendRedirect(req.getHeader("Referer"));}}/*** 修改商品数量* @param req* @param resp* @throws ServletException* @throws IOException*/protected void updateCount(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//获取请求的参数 商品编号 ，商品数量int id=WebUtils.parseInt(req.getParameter("id"),0);int count=WebUtils.parseInt(req.getParameter("count"),1);//获取Cart购物车对象Cart cart= (Cart) req.getSession().getAttribute("cart");if (cart!=null){//修改商品数量cart.updateCount(id,count);//重定向回原来商品所在地址页面resp.sendRedirect(req.getHeader("Referer"));}}
}修改 BaseServlet
package com.atguigu.web;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.Method;public abstract class BaseServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req,resp);}protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//解决post请求中文乱码问题//一定要在获取请求参数之前调有才有效req.setCharacterEncoding("UTf-8");//解决响应中文乱码resp.setContentType("text/html;charset=UTF-8");String action=req.getParameter("action");
// System.out.println(action);//action的value和调用的方法名是统一的
// if ("login".equals(action)){ System.out.println("处理登录的需求");
// login(req,resp);
// }else if ("regist".equals(action)){ System.out.println("处理注册的需求");
// regist(req,resp);
// }//反射try {//获取action业务鉴别字符串，获取相应的业务方法 反射对象Method method = this.getClass().getDeclaredMethod(action,HttpServletRequest.class,HttpServletResponse.class);//调用目标业务方法method.invoke(this,req,resp);} catch (Exception e) {e.printStackTrace();throw new RuntimeException(e);//把异常抛给Filter过滤器}}}修改 page/client/index.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>书城首页</title><%--静态包含 base标签，css样式，jquery文件 --%><%@ include file="/pages/common/head.jsp"%><script type="text/javascript">$(function (){//给加入购物车按钮绑定单击事件$("button.addToCart").click(function (){/*** 在事件响应的function函数中，有一个this对象，这个this对象，是当前正在响应事件的dom对象* @type {*|jQuery}*/var bookId= $(this).attr("bookId");// location.href="http://localhost:8080/book/cartServlet?action=addItem&id="+bookId;//发AJAX请求，添加商品到购物车$.getJSON("http://localhost:8080/book/cartServlet","action=ajaxAddItem&id="+bookId,function (data){// console.log(data);$("#cartTotalCount").text("您的购物车中有"+data.totalCount+"件商品");$("#cartLastName").text(data.lastName);});});});</script></head>
<body><div id="header"><img class="logo_ing" alt="" src="static/img/logo.gif"><span class= "wel_word">网上书城</span><div><%-- 如果用户还没有登录，显示【登录和注册的菜单】--%><c:if test="${empty sessionScope.user}"><a href="pages/user/login.jsp">登录</a><a href="pages/user/regist.jsp">注册</a></c:if><%-- 如果已经登录，显示登录之后的用户信息--%><c:if test="${not empty sessionScope.user}"><span>欢迎<span class="um_span">${sessionScope.user.username}</span>光临尚硅谷书城</span><a href="pages/order/order.jsp">我的订单</a><a href="userServlet?action=logout">注销</a></c:if><a href="pages/cart/cart.jsp">购物车</a><a href="pages/manager/manager.jsp">后台管理</a></div><div id="main"><div id="book"><div class="book_cond"><form action="client/bookServlet" method="get"><input type="hidden" name="action" value="pageByPrice">价格:<input id="min" type="text" name="min" value="${param.min}">元 -<input id="max" type="text" name="max" value="${param.max}">元<input type="submit" value="查询"/></form></div><div style="..."><c:if test="${empty sessionScope.cart.items}"><%-- 购物车为空的输出 --%><span id="cartTotalCount"></span><div><span style="..." id="cartLastName">当前购物车为空</span></div></c:if><c:if test="${not empty sessionScope.cart.items}"><%-- 购物车非空的输出 --%><span id="cartTotalCount">您的购物车中有${sessionScope.cart.totalCount}件商品</span><div>您刚刚将<span style="..." id="cartLastName">${sessionScope.lastName}</span>加入到了购物车中</div></c:if></div><div><c:forEach items="${requestScope.page.items}" var="book"><div class="b_list"><div class="img_div"><img class="book_img" alt="${book.imgPath}"/></div><div class="book_info"><div class="book_name"><span class="sp1">书名:</span><span class="sp2">${book.name}</span></div><div class="book_author"><span class="sp1">作者:</span><span class="sp2">${book.author}</span></div><div class= "book_price"><span class="sp1">价格:</span><span class="sp2">￥${book.price}</span></div><div class="book_sales"><span class="sp1">销量:</span><span class="sp2">${book.sales}</span></div><div class="book_amount"><span class="sp1">库存:</span><span class="sp2">${book.stock}</span></div><div class="book_add"><button bookId="${book.id}" class="addToCart">加入购物车:</button></div></div></div></c:forEach></div></div><%-- 静态包含分页条 --%><%@include file="/pages/common/page_nav.jsp"%></div></div><%--静态包含页脚内容--%><%@include file="/pages/common/footer.jsp"%></body>
</html>
3、i18n
有兴趣的了解一下
视频
16-JSON、AJAX、书城项目第九阶段、i18n相关推荐
- 基于JavaWeb实现的书城项目：阶段五至阶段六
第五阶段 分页模型 分页实现 根据上图所述流程,首先需要创建一个Page对象,保存以下几个页面属性: pageNo 当前页码 pageTotal 总页码 pageTotalCount 总记录数 pag ...
- JavaWeb 尚硅谷书城项目
书城项目第一阶段:表单验证 需求: 验证用户名:必须由字母,数字下划线组成,并且长度为 5 到 12 位 验证密码:必须由字母,数字下划线组成,并且长度为 5 到 12 ...
- 网上书城项目——前三阶段（Java实现）
网上书城项目 第一阶段:使用JavaScript对register.html页面实现表单验证 需求 代码实现 第二阶段 :实现用户的注册和登录 需求1:用户注册 需求2:用户登陆 需要提前掌握的知识 ...
- day09 书城项目第三阶段
day09 书城项目第三阶段 1. 项目准备工作 1.1 创建Module 1.2 拷贝jar包 数据库jar包 Thymeleaf的jar包 1.3 从V2版本项目迁移代码 1.3.1 迁移src目 ...
- 书城项目第六、七阶段
书城项目第六.七阶段 1. 项目第六阶段:购物车 页面样式 购物车 我的订单 结算 1.1 购物车模块分析 1.2.购物车实现 1.2.1 购物车模型 1.2.2 购物车的测试 创建 pojo/Car ...
- day10 会话书城项目第四阶段
day10 会话&书城项目第四阶段 1.会话 1.1 为什么需要会话控制 保持用户登录状态,就是当用户在登录之后,会在服务器中保存该用户的登录状态,当该用户后续访问该项目中的其它动态资源(Se ...
- JavaWeb书城项目
尚硅谷书城项目:自己整理的笔记以及全部实现过程,原理. 链接: 点击获取资源 提取码: ih2c 再次感谢尚硅谷,我爱尚硅谷!!!! 目录 第一阶段:对注册页面的信息进行验证: 第二阶段:用户管理模块 ...
- JavaWeb书城项目（一）
书城项目(一) 1.表单验证的实现 代码 2.用户注册和登陆 JavaEE 项目的三层架构 2.1.数据库层 2.1.1.创建数据库 2.1.2.定义 JavaBean 类 2.1.3.编写工具类 J ...
- day07 书城项目第二阶段
day07 书城项目第二阶段 第一章 不带数据库的注册登录 1. 实现步骤 创建动态Web工程 将第一版书城的静态资源拷贝到web文件夹中 统一页面的基础访问路径 使用静态数据进行登录校验 使用完成注 ...
最新文章
- mysql的worker 线程_MySQL线程
- 闭运算—lhMorpClose
- Flex AdvancedDataGrid 数据展示异常
- 听说你想去大厂看妹子，带你看看字节跳动实习算法岗面试长啥样？
- eShopOnContainers 知多少[9]：Ocelot gateways
- java对List的优雅排序
- [转]Postgres-XL 10r1英文文档
- java判断题及答案_Java面试题及解析（判断题）
- poj 2186(强连通分量)
- 新手教学--（常用的存储过程）
- 0-简单工厂模式类图
- Android WebView 详细介绍
- docker容器的时间问题
- WPS使用格式刷复制样式之后重新排序
- 【AIOT】HumanCenteredSensing
- 关于double和float类型的转换
- 设计模式之命令模式（C语言）
- APP热潮来临 图解九种商业模式
- 手把手教你写一个安卓app
- java微信jssdk开发