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相关推荐

  1. 基于JavaWeb实现的书城项目：阶段五至阶段六

    第五阶段 分页模型 分页实现 根据上图所述流程,首先需要创建一个Page对象,保存以下几个页面属性: pageNo 当前页码 pageTotal 总页码 pageTotalCount 总记录数 pag ...

  2. JavaWeb 尚硅谷书城项目

    书城项目第一阶段:表单验证 需求:         验证用户名:必须由字母,数字下划线组成,并且长度为 5 到 12 位         验证密码:必须由字母,数字下划线组成,并且长度为 5 到 12 ...

  3. 网上书城项目——前三阶段（Java实现）

    网上书城项目 第一阶段:使用JavaScript对register.html页面实现表单验证 需求 代码实现 第二阶段 :实现用户的注册和登录 需求1:用户注册 需求2:用户登陆 需要提前掌握的知识 ...

  4. day09 书城项目第三阶段

    day09 书城项目第三阶段 1. 项目准备工作 1.1 创建Module 1.2 拷贝jar包 数据库jar包 Thymeleaf的jar包 1.3 从V2版本项目迁移代码 1.3.1 迁移src目 ...

  5. 书城项目第六、七阶段

    书城项目第六.七阶段 1. 项目第六阶段:购物车 页面样式 购物车 我的订单 结算 1.1 购物车模块分析 1.2.购物车实现 1.2.1 购物车模型 1.2.2 购物车的测试 创建 pojo/Car ...

  6. day10 会话书城项目第四阶段

    day10 会话&书城项目第四阶段 1.会话 1.1 为什么需要会话控制 保持用户登录状态,就是当用户在登录之后,会在服务器中保存该用户的登录状态,当该用户后续访问该项目中的其它动态资源(Se ...

  7. JavaWeb书城项目

    尚硅谷书城项目:自己整理的笔记以及全部实现过程,原理. 链接: 点击获取资源 提取码: ih2c 再次感谢尚硅谷,我爱尚硅谷!!!! 目录 第一阶段:对注册页面的信息进行验证: 第二阶段:用户管理模块 ...

  8. JavaWeb书城项目（一）

    书城项目(一) 1.表单验证的实现 代码 2.用户注册和登陆 JavaEE 项目的三层架构 2.1.数据库层 2.1.1.创建数据库 2.1.2.定义 JavaBean 类 2.1.3.编写工具类 J ...

  9. day07 书城项目第二阶段

    day07 书城项目第二阶段 第一章 不带数据库的注册登录 1. 实现步骤 创建动态Web工程 将第一版书城的静态资源拷贝到web文件夹中 统一页面的基础访问路径 使用静态数据进行登录校验 使用完成注 ...

最新文章

  1. Strategy_Requirement1
  2. 基于 OpenCV 的图像阴影去除
  3. 知乎热议！一个博士生接受怎样的训练是完整的科研训练？
  4. MySQL like 通配符是_MySql模糊查询like通配符使用详细介绍
  5. touch: cannot touch /usr/local/tomcat/logs/catalina.out: Permission denied解决方法
  6. Android Touch系统简介（二）:实例详解onInterceptTouchEvent与onT
  7. mysql消息队列的原理_PHP和MySQL实现消息队列
  8. go java性能_服务端I/O性能大比拼：Node、PHP、Java和Go
  9. 05-BIO,NIO,AIO几种通讯模式的比较
  10. WSL配置C/D盘大小写敏感
  11. 程序设计: 猫大叫一声，所有的老鼠都开始逃跑，主人被惊醒。(C#语言)
  12. mysql报错:Host ***.***.***.*** is not allowed to connect to this MySQL server
  13. C# RabbitMQ（一）介绍
  14. 为何腾讯一直在推广“低配版”的QQ
  15. stm32F4方向+脉冲发生器
  16. VMware ESXI 5.5 注册码
  17. 金鳞岂是池中物IT评论博客正式成立
  18. 怎樣制作线段动画_线条动画 怎么制作随意运动的线条动画？线条动态视频如何制作？线条动画制作教程...
  19. op 圣诞节活动_圣诞节到了–这是我们精选的IT饼干笑话
  20. 阿里云ECS训练营Class6

热门文章

  1. 【HTB系列】Bastard
  2. 关于mac地址广播的问题
  3. Windows基本信息收集
  4. Duilib HandleMessage与MessageHandler区别
  5. w ndows 10画图,网友“羞辱”Windows 10界面设计:用画图 10分钟搞定!
  6. 【华为OD机试 2023】 最差产品奖（C++ Java JavaScript Python 100%）
  7. 软件测试金融银行项目如何测？从业务到测试实战，超细总结整理...
  8. java爬虫编写步骤_JAVA爬虫--编写第一个网络爬虫程序
  9. 女性的成功会伤害男性的自尊
  10. 阵列天线副瓣电平matlab,MATLAB阵列天线之切比雪夫低副瓣阵列设计