【JavaWeb学习笔记】16 - JSon和Ajax
2023-12-26 18:42:27
项目代码
https://github.com/yinhai1114/JavaWeb_LearningCode/tree/main/json
https://github.com/yinhai1114/JavaWeb_LearningCode/tree/main/ajax
目录
1.案例?验证用户名是否存在?使用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对象->string
var 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对象, 并不会影响原来string
var 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.reflect
public 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基础 泛型+匿名内部类 =>API
A a = new A<String>(){};
//A a1 = new A(""){}; //如果有默认的构造器 则不能用匿名内部类访问，因为子类也无法访问到默认权限的构造器
System.out.println(a.getClass());//Test$1
}
}二、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 () { //页面加载后执行function
var checkButton = document.getElementById("checkButton");
//给checkButton绑定onclick
checkButton.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 () {
//如果请求已完成，且响应已就绪, 并且状态码是200
if (xhr.readyState == 4 && xhr.status == 200) {
//把返回的jon数据,显示在div
document.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对象，否则，返回的是null
User 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需要重新再复习一遍
文章来源:https://blog.csdn.net/qq_41891655/article/details/135186425
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！