项目代码
https://github.com/yinhai1114/JavaWeb_LearningCode/tree/main/json
https://github.com/yinhai1114/JavaWeb_LearningCode/tree/main/ajax
目录
〇、官方文档
一、JSon
1.JSon介绍
2.JSon快速入门
3.JSON对象和字符串对象转换
1.应用案例
2.注意事项和细节
4.JSon在Java中的使用
1.说明
2.JSON在Java中应用场景
二、Ajax
1.Ajax基本介绍
1.Ajax是什么
2.Ajax经典应用场景
2.Ajax原理示意图
1.传统的WEB引用
2.使用Ajax的通讯方式
3.JavaScript原生Ajax请求
1.案例 验证用户名是否存在 使用Ajax 对页面进行局部刷新
2.本节作业
3.原生Ajax请求问题分析
4.jQuery的Ajax请求
1.$.ajax方法
2.$.get请求和$.post请求常用参数
3.$.getJSON常用参数
4.应用实例
5.本章作业
〇、官方文档
JSON 简介
AJAX 简介
一、JSon
1.JSon介绍
1. JSON指的是JavaScript对象表示法(JavaScript Object Notation )
2. JSON是轻量级的文本数据交换格式 (前后端数据交换)
3. JSON独立于语言[即java、php、asp.net等都可以使用JSON]
4. JSON具有自我描述性，更易理解
2.JSon快速入门
1.JSON的定义格式
1)映射(元素/属性)用冒号:表示，"名称":值，注意名称是字符串，因此要用双引号引起来
2)并列的数据之间用逗号，分隔。"名称1":值,"名称2":值
3)映射的集合(对象)用大括号{}表示。{"名称1":值,"名称2":值}
4)并列数据的集合(数组)用方括号[]表示。[{"名称1":值,"名称2":值}, {"名称1":值,"名称2":值}]
5)元素值类型: string, number, object, array, true, false, null
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JSON对象和字符串对象转换</title><script type="text/javascript">window.onload = function () {//解读JSON//1.JSON 是一个js的内置对象(build-in)，可以直接使用// console.log("JSON=", JSON);//演示如何将以json对象->stringvar jsonPerson = {"name": "jack","age": 20}console.log("jsonPerson=" , jsonPerson);var strPerson = JSON.stringify(jsonPerson);console.log("strPerson= ", strPerson, " strPerson类型= ", typeof strPerson);//string->json//注意要转成json对象的string 格式必须满足json格式var strDog = "{\"name\":\"小黄狗\", \"age\":2}";var jsonDog = JSON.parse(strDog);console.log("jsonDog= ", jsonDog);}</script>
</head>
<body>
<h1>JSON对象和字符串对象转换</h1></body>
</html>3.JSON对象和字符串对象转换
1.应用案例
1. JSON.stringify(json)功能:将一个json对象转换成为json字符串[简单说名字来源.] Serialize
2. JSON.parse(jsonString )功能:将一个json字符串转换成为json对象
2.注意事项和细节
1、JSON .springiiy(json对象)会返回对应string,并不会影响原来json对象
2、JSON.parse(string)函数会返回对应的json对象,并不会影响原来string
3、在定义Json对象时，可以使用 ' ' 表示字符串，前面的key也可以不用" " 或者 ' '
比如var json_person = {"name": "jack", "age": 100};
也可以写成var json_person = {'name': 'jack', 'age': 100};
4、但是在把原生字符串转成json对象时,必须使用"",否则会报错比如:
var str_dog = "{'name':'小黄狗', 'age': 4}";转json就会报错
5、JSON.springify(json对象)返回的字符串,都是" "表示的字符串,所以在语法格式正确的情况下，是可以重新转成json对象的. [演示案例]
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>json和字符串转换的注意事项和细节</title><script type="text/javascript">window.onload = function () {var jsonPerson = {"name": "jack","age": 20}//1. JSON.springify(json对象) 会返回对应string, 并不会影响原来json对象// 可以这样理解 java基础 int n = 10; double n2 = (double)n;var strPerson = JSON.stringify(jsonPerson);console.log("jsonPerson=", jsonPerson);//2. JSON.parse(string) 函数会返回对应的json对象, 并不会影响原来stringvar strDog = "{\"name\":\"小黄狗\", \"age\":2}";var jsonDog = JSON.parse(strDog);console.log("strDog=", strDog, " 类型= ", typeof strDog);//3. 在定义Json对象时, 可以使用 ' ' 表示字符串// 前面的key 可以不用" " 或者 ' 'var jsonPerson2 = {name: 'jack',age: 20}console.log("jsonPerson2=", jsonPerson2);//4. 但是在把原生字符串转成 json对象时, 必须使用 "", 否则会报错 比如// 工作时，非常容易错var strdog3 = "{\"name\":\"小黄狗~\", \"age\": 4}";JSON.parse(strdog3);//5. JSON.springify(json对象) 返回的字符串, 都是 "" 表示的字符串var strPerson2 = JSON.stringify(jsonPerson2);var parse = JSON.parse(strPerson2);console.log("parse=", parse);}</script>
</head>
<body></body>
</html>4.JSon在Java中的使用
1.说明
1. java中使用json,需要引入到第3方的包gson.jar
2. Gson是Google提供的用来在Java对象和JSON数据之间进行映射的Java类库。
3.可以对JSON字符串和Java对象相互转换
2.JSON在Java中应用场景
1. Javabean对象和json字符串的转换
2. List对象和json字符串的转换
3. map对象和json字符串的转换
public class JavaJSon {public static void main(String[] args) {//创建一个gson对象，做为一个工具对象使用Gson gson = new Gson();//演示javabean 和 json字符串的转换Book book = new Book(100, "韩顺平零基础学Java");//1. 演示把javebean -> json字符串String strBook = gson.toJson(book);System.out.println("strBook=" + strBook);//2. json字符串->javabean//(1) strBook 就是 json字符串//(2) Book.class 指定将 json字符串转成 Book对象//(3) 底层是反射机制Book book2 = gson.fromJson(strBook, Book.class);System.out.println("book2=" + book2);//3. 演示把list对象 -> json字符串List<Book> bookList = new ArrayList<>();bookList.add(new Book(200, "天龙八部"));bookList.add(new Book(300, "三国演义"));//因为把对象,集合转成字符串, 相对比较简单//底层只需要遍历, 按照json格式拼接返回即可String strBookList = gson.toJson(bookList);System.out.println("strBookList= " + strBookList);//4. 演示把json字符串 -> list对象//(1) 如果需要把json字符串 转成 集合这样复杂的类型, 需要使用gson提供的一个类//(2) TypeToken , 是一个自定义泛型类, 然后通过TypeToken来指定我们需要转换成的类型/*com.google.gson.reflectpublic class TypeToken<T> {final Class<? super T> rawType;final Type type;final int hashCode;protected TypeToken() {this.type = getSuperclassTypeParameter(this.getClass());this.rawType = Types.getRawType(this.type);this.hashCode = this.type.hashCode();}*///(1) 返回类型的完整路径java.util.List<com.hspedu.json.Book>//(2) gson的设计者，需要得到类型的完整路径，然后进行底层反射//(3) 所以gson 设计者就提供TypeToken, 来搞定.//二说 TypeToken , 为甚要加 {}//(1) 如果我们 new TypeToken<List<Book>>() 提示// 'TypeToken()' has protected access in 'com.google.gson.reflect.TypeToken'//(2) 因为TypeToken 的无参构造器是protected ， 而 new TypeToken<List<Book>>() 就是调用其无参构造器//(3) 根据java基础, 如果一个方法是protected ,而且不在同一个包， 是不能直接访问的, 因此报错//(4) 为什么 new TypeToken<List<Book>>(){} 使用就可以，这里就涉及到匿名内部类的知识.//(5) 当 new TypeToken<List<Book>>(){} 其实这个类型就是不是 TypeToken 而是一个匿名内部类(子类)//(6) 而且这个匿名内部类是有自己的无参构造器(隐式), 根据java基础规则 当执行子类的无参构造器时, 默认super();//三说 TypeToken->举一个例子.[对java基础回顾.]Type type = new TypeToken<List<Book>>() {}.getType();List<Book> bookList2 = gson.fromJson(strBookList, type);System.out.println("bookList2= " + bookList2);//5, 把map对象->json字符串Map<String, Book> bookMap = new HashMap<>();bookMap.put("k1", new Book(400, "射雕英雄传"));bookMap.put("k2", new Book(500, "西游记"));String strBookMap = gson.toJson(bookMap);System.out.println("strBookMap=" + strBookMap);//6. 把json字符串 -> map对象// new TypeToken<Map<String, Book>>() {}.getType()=> java.util.Map<java....String,com.yinhai.json.Book>Map<String, Book> bookMap2 = gson.fromJson(strBookMap,new TypeToken<Map<String, Book>>() {}.getType());System.out.println("bookMap2=" + bookMap2);}
}
注意 在该TypeToken类型 创建需要使用匿名内部类，然后获取对应的type返回type，为什么是匿名内部类？ 举例子，走的是受保护的匿名内部类的子类的默认的super
public class A<T> {protected A() {System.out.println("A的protected A()被调用...");}A(String str){System.out.println("A的默认A被调用 只在本类可用");}
}
package com.yinhai.t2;import com.yinhai.t1.A;public class Test {public static void main(String[] args) {//'A()' has protected access in 'com.yinhai.t1.A'//1. 因为A类和Test类不在同一个包//2. 就不能访问A类的protected 方法, 包括构造器//3. A<String>(){} 就是一个匿名内部类， 可以理解成是A类子类//4. A<String>(){} 匿名内部类, 有一个隐式的无参构造器, 根据java基础 无参构造器 有默认super()//5. 当你执行 new A<String>(){} 会调用到A类的无参的protected 构造器//6. 如果还不明白, 就回去看java基础 泛型+匿名内部类 =>APIA a = new A<String>(){};//A a1 = new A(""){}; //如果有默认的构造器 则不能用匿名内部类访问，因为子类也无法访问到默认权限的构造器System.out.println(a.getClass());//Test$1}
}二、Ajax
官方文档
AJAX 简介
1.Ajax基本介绍
1.Ajax是什么
1. AJAX即"Asynchronous Javascript And XML"(异步JavaiScript和XML)
2.Ajax是一种浏览器异步发起请求（指定发哪些数据），局部更新页面的技术
2.Ajax经典应用场景
1.搜索引擎根据用户输入关键字，自动提示检索关键字
2.动态加载数据，按需取得数据[树形菜单、联动菜单...]
3.改善用户体验。[ 输入内容前提示、带进度条文件上传...]
4.电子商务应用。[ 购物车、邮件订阅...]
5.访问第三方服务。[ 访问搜索服务、rss阅读器]
6.页面局部刷新, https://piaofang. maoyan.com/dashboard
2.Ajax原理示意图
1.传统的WEB引用
2.使用Ajax的通讯方式
3.JavaScript原生Ajax请求
1.案例 验证用户名是否存在 使用Ajax 对页面进行局部刷新
需要引入两个包用于支撑 gson和servlet
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户注册</title><script type="text/javascript">window.onload = function () { //页面加载后执行functionvar checkButton = document.getElementById("checkButton");//给checkButton绑定onclickcheckButton.onclick = function () {//1. 创建XMLHttpRequest对象(!!!) [ajax引擎对象]var xhr = new XMLHttpRequest();// 获取用户填写的用户名var uname = document.getElementById("uname").value;//2. 准备发送指定数据 open, send//(1)"GET" 请求方式可以 GET/POST//(2)"/ajax/checkServlet?username=" + uname 就是 url//(3)true , 表示异步发送xhr.open("GET", "/ajax/checkServlet?uname=" + uname, true);//老师说明，在send函数调用前，给XMLHttpRequest 绑定一个事件onreadystatechange//该事件表示，可以去指定一个函数，当数据变化，会触发onreadystatechange// 每当 xhr对象readyState 改变时，就会触发 onreadystatechange 事件xhr.onreadystatechange = function () {//如果请求已完成，且响应已就绪, 并且状态码是200if (xhr.readyState == 4 && xhr.status == 200) {//把返回的jon数据,显示在divdocument.getElementById("div1").innerHTML = xhr.responseText;//console.log("xhr=", xhr)var responseText = xhr.responseText;//console.log("返回的信息=" + responseText);if (responseText != "") {document.getElementById("myres").value = "用户名不可用"} else {document.getElementById("myres").value = "用户名可用"}}}//3. 真正的发送ajax请求[http请求]// 再说明如果你POST 请求，使用send("发送的数据")xhr.send();}}</script>
</head>
<body>
<h1>用户注册~</h1>
<form action="/ajax/checkServlet" method="GET">用户名字:<input type="text" name="username" id="uname"><input type="button" id="checkButton" value="验证用户名"><input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>用户密码:<input type="password" name="password"><br/><br/>电子邮件:<input type="text" name="email"><br/><br/><input type="submit" value="用户注册">
</form>
<h1>返回的json数据</h1>
<div id="div1"></div>
</body>
</html>package com.yinhai.servlet;import com.google.gson.Gson;
import com.yinhai.bean.User;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;/*** @author 银小海* @version 1.0* @email yinhai14@qq.com*/
@WebServlet(name = "CheckServlet",urlPatterns = "/checkServlet")
public class CheckServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//假定用户名为 king , 就不可用, 其它用户名可以if("king".equals(uname)) {//不能使用king用户名//后面这个信息，是从DB获取User king = new User(100, "king", "666", "king@sohu.com");//把 king 转成 json字符串String strKing = new Gson().toJson(king);//返回response.getWriter().write(strKing);} else {//如果用户名可以用，返回""response.getWriter().write("");}}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}
}
2.本节作业
需求分析:到数据库去验证用户名是否可用
1)点击验证用户名,到数据库中验证用户名是否可用
2)创建数据库ajaxdb，创建表user表自己设计(自己试试)
3)使用ajax方式，服务端验证该用户名是否已经占用了,如果该用户已经占用,以json格式返回该用户信息
4)对页面进行局部刷新，显示返回信息
5)只需要再前面的应用实例中，进行升级,接入DB
创建DB表 以及插入默认数据
注意 引入依赖库但在out可能不会拷贝该lib过去 所以需要手动拷贝
servlet
package com.yinhai.servlet;import com.google.gson.Gson;
import com.yinhai.bean.User;
import com.yinhai.service.UserService;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;/*** @author 银小海* @version 1.0* @email yinhai14@qq.com*/
@WebServlet(name = "CheckServlet",urlPatterns = "/checkServlet")
public class CheckServlet extends HttpServlet {//定义一个UserService属性private UserService userService = new UserService();protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//System.out.println("CheckUserServlet 被调用....");//接收ajax提交的数据String uname = request.getParameter("username");String pwd = request.getParameter("password");String email = request.getParameter("email");System.out.println("uname= " + uname + pwd + email);response.setContentType("text/html;charset=utf-8");// 到DB查询// 如果有就返回user对象，否则，返回的是nullUser user = userService.getUserByName(uname);// String user = "";if (user != null) {//说明用户名存在..,返回该user的json格式数据字符串Gson gson = new Gson();String strUser = gson.toJson(user);response.getWriter().write(strUser);} else {response.getWriter().write("");}// // 假定用户名为 king , 就不可用, 其它用户名可以// if("king".equals(uname)) {//不能使用king用户名// //后面这个信息，是从DB获取// User king = new User(100, "king", "666", "king@sohu.com");// //把 king 转成 json字符串// String strKing = new Gson().toJson(king);// //返回// response.getWriter().write(strKing);// } else {// //如果用户名可以用，返回""// response.getWriter().write("");//// }}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}
}
service
package com.yinhai.service;import com.yinhai.bean.User;
import com.yinhai.dao.UserDAO;/*** @author 银小海* @version 1.0* @email yinhai14@qq.com*/
//提供业务方法 比如获得User
public class UserService {private UserDAO userDAO = new UserDAO();public User getUserByName(String username){return userDAO.querySingle("select * from `user` where username=?",User.class,username);}public void insertUserName(String username,String pwd,String email){userDAO.dml("INSERT INTO `user`(?,?,?,?)",null,username,pwd,email);}
}
以前编写的DAO类
package com.yinhai.dao;import com.yinhai.util.JDBCUtilsByDruid;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;import javax.xml.ws.handler.Handler;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.List;/*** @author 银小海* @version 1.0* @email yinhai14@qq.com* 开发BasicDAO是其他DAO的父类*/
public class BasicDAO<T> {private QueryRunner qr = new QueryRunner();//开发通用的增删改查方法public int dml(String sql , Object... parameters){Connection connection = null;try {connection = JDBCUtilsByDruid.getConnection();int update = qr.update(connection, sql, parameters);return update;} catch (SQLException e) {//将编译异常 -> 运行异常 抛出throw new RuntimeException(e);}finally {JDBCUtilsByDruid.close(null,null,connection);}}//返回多个对象(即查询的结果是多行)，针对任意表/**** @param sql sql 语句，可以有 ?* @param clazz 传入一个类的Class对象 比如 Actor.class* @param parameters 传入 ? 的具体的值，可以是多个* @return 根据Actor.class 返回对应的 ArrayList 集合*/public List<T> queryMulti(String sql,Class<T> clazz,Object... parameters){Connection connection = null;try {connection = JDBCUtilsByDruid.getConnection();return qr.query(connection, sql, new BeanListHandler<T>(clazz),parameters);} catch (SQLException e) {//将编译异常 -> 运行异常 抛出throw new RuntimeException(e);}finally {JDBCUtilsByDruid.close(null,null,connection);}}//查询单行结果 的通用方法public T querySingle(String sql,Class<T> clazz,Object... parameters){Connection connection = null;try {connection = JDBCUtilsByDruid.getConnection();return qr.query(connection, sql, new BeanHandler<T>(clazz),parameters);} catch (SQLException e) {//将编译异常 -> 运行异常 抛出throw new RuntimeException(e);}finally {JDBCUtilsByDruid.close(null,null,connection);}}//查询单行单列 即返回单值的方法public Object queryScalar(String sql,Object... parameters){Connection connection = null;try {connection = JDBCUtilsByDruid.getConnection();return qr.query(connection, sql, new ScalarHandler(),parameters);} catch (SQLException e) {//将编译异常 -> 运行异常 抛出throw new RuntimeException(e);}finally {JDBCUtilsByDruid.close(null,null,connection);}}
}
JAVAbean对象
package com.yinhai.bean;/*** @author 银小海* @version 1.0* @email yinhai14@qq.com*/
public class User {private Integer id;private String username;private String pwd;private String email;//反射必须提供无参构造器public User(){}public User(Integer id, String username, String pwd, String email) {this.id = id;this.username = username;this.pwd = pwd;this.email = email;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPwd() {return pwd;}public void setPwd(String pwd) {this.pwd = pwd;}public String getEmail() {return email;}public void setEmail(String email) {this.email = email;}
}
一个JDBC类
package com.yinhai.util;import com.alibaba.druid.pool.DruidDataSourceFactory;import javax.sql.DataSource;
import java.io.FileInputStream;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;/*** @author 银小海* @version 1.0* @email yinhai14@qq.com*/
public class JDBCUtilsByDruid {private static DataSource ds;// 测试连接// public static void main(String[] args) throws SQLException {// Connection connection = JDBCUtilsByDruid.getConnection();// System.out.println(connection);// }// 在静态代码块完成 ds初始化static {Properties properties = new Properties();try {//目前是Java方式启动//所以我们要获取src目录下的文件需要使用 类加载器//原先是JavaSe方式获取 现在是JavaWeb方式// InputStream resourceAsStream = JDBCUtilsByDruid.class.getClassLoader().getResourceAsStream("druid.properties");properties.load(JDBCUtilsByDruid.class.getClassLoader().getResourceAsStream("druid.properties"));//properties.load(new FileInputStream("ajax/src/druid.properties"));ds = DruidDataSourceFactory.createDataSource(properties);} catch (Exception e) {e.printStackTrace();}}//编写getConnection方法public static Connection getConnection() throws SQLException {return ds.getConnection();}//关闭连接, 再次强调： 在数据库连接池技术中，close 不是真的断掉连接//而是把使用的Connection对象放回连接池public static void close(ResultSet resultSet, Statement statement, Connection connection) {try {if (resultSet != null) {resultSet.close();}if (statement != null) {statement.close();}if (connection != null) {connection.close();}} catch (SQLException e) {throw new RuntimeException(e);}}
}
3.原生Ajax请求问题分析
1.编写原生的Ajax要写很多的代码，还要考虑浏览器兼容问题，使用不方便。
2.在实际工作中，一般使用 JavaScript的框架(比如Jquery)发送Ajax请求，从而解决这个问题
4.jQuery的Ajax请求
1.$.ajax方法
url:请求的地址
type :请求的方式get或post
data :发送到服务器的数据。将自动转换为请求字符串格式
success:成功的回调(某个Ajax事件来触发的)函数
dataType:返回的数据类型常用json或text
2.$.get请求和$.post请求常用参数
url;请求的URL地址
data:请求发送到服务器的数据:
success:成功时回调函数
type:返回内容格式， xmI, html, script, json, text
3.$.getJSON常用参数
url:请求发送的哪个URL
data:请求发送到服务器的数据
success:请求成功时运行的函数
4.应用实例
需要设置对应的格式 即不报错
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户注册</title><!-- 引入jquery--><script type="text/javascript" src="./script/jquery-3.7.1.min.js"></script><script type="text/javascript">$(function () {//绑定事件$("#btn1").click(function () {alert("ok!")//发出ajax/*** 1. 指定参数时，需要在{}* 2. 给参数时，前面需要指定参数名* 3. dataType: "json" 要求服务器返回的数据格式是json*///1.$.ajax()方法// $.ajax({// url: "/ajax/checkServletJq",// type: "POST",// data: { //这里我们直接给json, 为啥我要传日期, 为了浏览器缓存// username: $("#uname").val(),// date: new Date()// },// error: function () { //失败后的回调函数// console.log("失败~")// },// success: function (data, status, xhr) {// console.log("成功");// console.log("data=", data);// console.log("status=", status);// console.log("xhr=", xhr);// //data是json对象 如果需要显示需要转成json的字符串// $("#div1").html(JSON.stringify(data));// //对返回的结果进行处理// if ("" == data.username) {// $("#myres").val("该用户名可用");// } else {// $("#myres").val("该用户名不可用");// }// },// dataType: "json"// })//2.$.get请求和$.post请求常用参数说明//1.$.get() 默认是get请求，不需要指定 请求方式//2.不需要指定参数名//3.填写的实参，是顺序 url, data, success回调函数, 返回的数据格式//讲解.get() 使用// $.get(// "/ajax/checkServletJq",// {// username: $("#uname").val(),// date: new Date()// },// function (data, status, xhr) {// console.log("$.get() 成功");// console.log("data=", data);// console.log("status=", status);// console.log("xhr=", xhr);// //data是json对象-> 显示转成json的字符串// $("#div1").html(JSON.stringify(data));// //对返回的结果进行处理// if ("" == data.username) {// $("#myres").val("该用户名可用");// } else {// $("#myres").val("该用户名不可用");// }// },// "json"// )//老师说明$.post() 和 $.get() 的方式一样//只是这时，是按照post方式发送ajax请求// $.post(// "/ajax/checkServletJq",// {// username: $("#uname").val(),// date: new Date()// },// function (data, status, xhr) {// console.log("$.post() 成功");// console.log("data=", data);// console.log("status=", status);// console.log("xhr=", xhr);// //data是json对象-> 显示转成json的字符串// $("#div1").html(JSON.stringify(data));// //对返回的结果进行处理// if ("" == data.username) {// $("#myres").val("该用户名可用");// } else {// $("#myres").val("该用户名不可用");// }// },// "json"// )//1. 如果你通过jquery发出的ajax请求是get 并且 返回的数据格式是json//2. 可以直接使用getJSON() 函数，就很简洁// $.getJSON(// "/ajax/checkServletJq",// {// username: $("#uname").val(),// date: new Date()// },// function (data, status, xhr) {//成功后的回调函数// console.log("$.getJSON 成功");// console.log("data=", data);// console.log("status=", status);// console.log("xhr=", xhr);// //data是json对象-> 显示转成json的字符串// $("#div1").html(JSON.stringify(data));// //对返回的结果进行处理// if ("" == data.username) {// $("#myres").val("该用户名可用");// } else {// $("#myres").val("该用户名不可用");// }// }// )})})</script>
</head>
<body>
<h1>用户注册-Jquery+Ajax</h1>
<form action="/ajax/checkServletJq" method="post">用户名字:<input type="text" name="username" id="uname"><input type="button" id="btn1" value="验证用户名"><input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>用户密码:<input type="password" name="password"><br/><br/>电子邮件:<input type="text" name="email"><br/><br/><input type="submit" id="submit" value="用户注册">
</form>
<h1>返回的json数据</h1>
<div id="div1"></div>
</body>
</html>usercheckservlet
package com.yinhai.servlet;import com.google.gson.Gson;
import com.yinhai.bean.User;
import com.yinhai.service.UserService;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;/*** @author 银小海* @version 1.0* @email yinhai14@qq.com*/
@WebServlet(name = "CheckServlet_jquery",urlPatterns = "/checkServletJq")
public class CheckServlet_jquery extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println("be invoked.....");String username = request.getParameter("username");System.out.println("ajax Jquery =" + username);Gson gson = new Gson();//验证业务接入到DB// User dbusername = new UserService().getUserByName("king");response.setContentType("text/json;charset=utf-8");//接受jquery发送的ajax数据if ("king".equals(username)) {User user = new User(100, "king", "abc", "king@sohu.com");response.getWriter().write(gson.toJson(user));// response.getWriter().write(gson.toJson(dbusername));} else {//返回一个不存在的User=> 这里老师是有设计User user = new User(-1, "", "", "");response.getWriter().write(gson.toJson(user));}}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request,response);}
}
5.本章作业
只要调用即可，麻烦的是JDBC需要重新再复习一遍
