目录
一、ajax
1. 概念
2. 实现方式
(1)原生的JS实现方式(了解)
(2) JQeury实现方式
二、axios
1. axios 介绍
2. axios特点
3. 官方文档
4. axios使用
(1) axios的基本使用(发送get/post请求)
(2)axios基本使用-获取数据
(3)axios基本使用-传参
(4)axios基本使用-发布书籍
(5)axios基本使用-全局配置
(6)axios验证用户名称是否存在
三、json
1. 概念
2. 语法
(1) 基本规则
(2)获取数据
3. JSON数据和Java对象的相互转换
(1)JSON转为Java对象(jackson)
(2) Java对象转换JSON(jackson)
(3)fastjson用法
一、ajax
Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。
参考 原生ajax:AJAX 简介 | 菜鸟教程
1. 概念
ASynchronous JavaScript And XML 异步的JavaScript 和 XML
同步和异步:客户端和服务器端相互通信的基础上
* 同步:客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
* 异步:客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
提升用户的体验
2. 实现方式
(1)原生的JS实现方式(了解)
//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2. 建立连接
/*
参数:
1. 请求方式:GET、POST
* get方式,请求参数在URL后边拼接。send方法为空参
* post方式,请求参数在send方法中定义
2. 请求的URL:
3. 同步或异步请求:true(异步)或 false(同步)
*/
xmlhttp.open("GET","ajaxServlet?username=tom",true);
//3.发送请求
xmlhttp.send();
//4.接受并处理来自服务器的响应结果
//获取方式 :xmlhttp.responseText
//什么时候获取?当服务器响应成功后再获取
//当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange。
xmlhttp.onreadystatechange=function()
{
//判断readyState就绪状态是否为4,判断status响应状态码是否为200
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//获取服务器的响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
(2) JQeury实现方式
a. $.ajax()
* 语法:$.ajax({键值对});
//使用$.ajax()发送异步请求
$.ajax({
url:"ajaxServlet1111" , // 请求路径
type:"POST" , //请求方式
//data: "username=jack&age=23",//请求参数
data:{"username":"jack","age":23},
success:function (data) {
alert(data);
},//响应成功后的回调函数
error:function () {
alert("出错啦...")
},//表示如果请求响应出现错误,会执行的回调函数
dataType:"text"//设置接受到的响应数据的格式
});
b. $.get():发送get请求
* 语法:$.get(url, [data], [callback], [type])
* 参数:
* url:请求路径
* data:请求参数
* callback:回调函数
* type:响应结果的类型
c. $.post():发送post请求
* 语法:$.post(url, [data], [callback], [type])
* 参数:
* url:请求路径
* data:请求参数
* callback:回调函数
* type:响应结果的类型
二、axios
1. axios 介绍
(1)axios 是一个专注于网络请求的库,核心负责发请求和拿数据
(2)axios,是一个基于promise的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。
2. axios特点
-
支持客户端发送Ajax请求
-
支持服务端Node.js发送请求
-
支持Promise相关用法
-
支持请求和响应的拦截器功能
-
自动转换JSON数据
-
axios 底层还是原生js实现, 内部通过Promise封装的
3. 官方文档
axios文档http://www.axios-js.com/
Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js
4. axios使用
(1) axios的基本使用(发送get/post请求)
引入: 下载axios, 引入后才能使用
页面引入axios cdn依赖
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios({
method: '请求方式', // get post
url: '请求地址',
data: { // 拼接到请求体的参数, post请求的参数
xxx: xxx,
},
params: { // 拼接到请求行的参数, get请求的参数
xxx: xxx
}
}).then(res => {
console.log(res.data) // 后台返回的结果
}).catch(err => {
console.log(err) // 后台报错返回
})
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>axios</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function mayiktAxios() {
// 1. 调用 axios 方法得到的返回值是 Promise 对象
axios({
// 请求方式
method: 'GET',
// 请求的地址
url: 'http://localhost:8080/${pageContext.request.contextPath}/axiosServlet',
// URL 中的查询参数
params: {
name: "mayikt",
age: 22
}
}).then(function (result) {
alert(result.data);
})
}
</script>
</head>
<body>
<input type="button" value="发送ajax" onclick="mayiktAxios()"/>
</body>
</html>
@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
PrintWriter writer = resp.getWriter();
String name = req.getParameter("name");
String age = req.getParameter("age");
writer.print("mayikt,name:" + name + ",age:" + age);
writer.close();
}
}
(2)axios基本使用-获取数据
<template>
<div>
<p>1. 获取所有图书信息</p>
<button @click="getAllFn">点击-查看控制台</button>
</div>
</template>
<script>
// 目标1: 获取所有图书信息
// 1. 下载axios
// 2. 引入axios
// 3. 发起axios请求
import axios from "axios";
export default {
methods: {
getAllFn() {
axios({
url: "http://123.57.109.30:3006/api/getbooks",
method: "GET", // 默认就是GET方式请求, 可以省略不写
}).then((res) => {
console.log(res);
});
// axios()-原地得到Promise对象
},
}
};
</script>
(3)axios基本使用-传参
<template>
<div>
<p>2. 查询某本书籍信息</p>
<input type="text" placeholder="请输入要查询 的书名" v-model="bName" />
<button @click="findFn">查询</button>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
bName: ""
};
},
methods: {
// ...省略了查询所有的代码
findFn() {
axios({
url: "/api/getbooks",
method: "GET",
params: { // 都会axios最终拼接到url?后面
bookname: this.bName
}
}).then(res => {
console.log(res);
})
}
},
};
</script>
(4)axios基本使用-发布书籍
目标: 完成发布书籍功能
功能: 点击新增按钮, 把用户输入的书籍信息, 传递给后台 – 把结果打印在控制台
<template>
<div>
<p>3. 新增图书信息</p>
<div>
<input type="text" placeholder="书名" v-model="bookObj.bookname">
</div>
<div>
<input type="text" placeholder="作者" v-model="bookObj.author">
</div>
<div>
<input type="text" placeholder="出版社" v-model="bookObj.publisher">
</div>
<button @click="sendFn">发布</button>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
bName: "",
bookObj: { // 参数名提前和后台的参数名对上-发送请求就不用再次对接了
bookname: "",
author: "",
publisher: ""
}
};
},
methods: {
// ...省略了其他代码
sendFn(){
axios({
url: "/api/addbook",
method: "POST",
data: {
appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a",
...this.bookObj
// 等同于下面
// bookname: this.bookObj.bookname,
// author: this.bookObj.author,
// publisher: this.bookObj.publisher
}
})
}
},
};
</script>
(5)axios基本使用-全局配置
目标: 避免前缀基地址, 暴露在逻辑页面里, 统一设置
axios.defaults.baseURL = "http://123.57.109.30:3006"
// 所有请求的url前置可以去掉, 请求时, axios会自动拼接baseURL的地址在前面
getAllFn() {
axios({
url: "/api/getbooks",
method: "GET", // 默认就是GET方式请求, 可以省略不写
}).then((res) => {
console.log(res);
});
// axios()-原地得到Promise对象
},
(6)axios验证用户名称是否存在
需求:当我们用户输入用户名称之后(会使用ajax验证用户名称是否已经存在 如果存在的话 则提示 该用户名称是已经存在的)
onkeyup---监听用户输入完内容 走监听方法
@WebServlet("/exUserNameServlet")
public class ExUserNameServlet extends HttpServlet {
private MayikUsertService mayikUsertService = new MayikUsertService();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
//1.获取到用户输入的userName参数值
String userName = req.getParameter("userName");
//2.调用数据库根据userName查询用户名称是否存在
MayiktUserEntity mayiktUserEntity = mayikUsertService.findByUserName(userName);
PrintWriter writer = resp.getWriter();
if (mayiktUserEntity != null) {
writer.print("该用户" + userName + "已经存在的 无法注册!");
}
writer.close();
}
}
<%--
Created by IntelliJ IDEA.
User: mayikt
Date: 2022/6/6
Time: 17:12
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<form action="/mayikt_session_war_exploded/register" method="post">
<label>用户名: </label><input type="text" name="userName" onkeyup="mayiktAxios(this)"/><br>
<label>密   码: </label><input type="password" name="userPwd"/><br>
<label>验证码: </label><input type="text" name="code"/><img id="exchangecode" src="VerifycodeServlet">
<a id="ecode" href="#">看不清?换一张图片</a><br>
<span id="error" style="color: red">${errorMsg}</span>
<input type="submit" value="注册"/>
</form>
<script type="text/javascript">
window.onload = function () {
//获取img标签的对象
img = document.getElementById("exchangecode");
img.onclick = function () {
//加时间戳,避免浏览器缓存
var date = new Date().getTime()
img.src = "VerifycodeServlet?" + date;
}
//获取a标签的对象
ec = document.getElementById("ecode");
ec.onclick = function () {
//加时间戳
var date = new Date().getTime()
img.src = "VerifycodeServlet?" + date;
}
}
</script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function mayiktAxios(object) {
// 1.接受用户输入的userName
var userName = object.value;
// 2.使用Axios 发送ajax请求验证 userName是否存在的
axios({
// 请求方式
method: 'GET',
// 请求的地址
url: 'http://localhost:8080${pageContext.request.contextPath}/exUserNameServlet',
// URL 中的查询参数
params: {
userName: userName,
}
}).then(function (result) {
//定位 span id 名称 error 修改
document.getElementById("error").innerText = result.data;
})
}
</script>
</head>
</html>
三、json
1. 概念
JavaScript Object Notation JavaScript对象表示法
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
var p = {"name":"张三","age":23,"gender":"男"};
* json现在多用于存储和交换文本信息的语法
* 进行数据的传输
* JSON 比 XML 更小、更快,更易解析。
2. 语法
(1) 基本规则
* 数据在名称/值对中:json数据是由键值对构成的
* 键用引号(单双都行)引起来,也可以不使用引号
* 值得取值类型:
1. 数字(整数或浮点数)
2. 字符串(在双引号中)
3. 逻辑值(true 或 false)
4. 数组(在方括号中) {"persons":[{},{}]}
5. 对象(在花括号中) {"address":{"province":"陕西"....}}
6. null
* 数据由逗号分隔:多个键值对由逗号分隔
* 花括号保存对象:使用{}定义json 格式
* 方括号保存数组:[]
(2)获取数据
a. json对象.键名
b. json对象["键名"]
c. 数组对象[索引]
d. 遍历
//1.定义基本格式
var person = {"name": "张三", age: 23, 'gender': true};
var ps = [{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}];
//获取ps中的所有值
for (var i = 0; i < ps.length; i++) {
var p = ps[i];
for(var key in p){
alert(key+":"+p[key]);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonDemo</title>
<script>
// 1.定义json
var json1 = {name: "mayikt", age: 22, isFlag: true};
alert(json1.name);
alert(json1.age);
alert(json1.isFlag);
// 2.定义json数组
var jsonArr = {code: 200, data: [{name: "mayikt", age: 22}, {name: "meite", age: 22}]};
alert(jsonArr.code);
alert(jsonArr.data[0].name);
var userArr = jsonArr.data;
for (var i = 0; i < userArr.length; i++) {
alert(userArr[i].name + "," + userArr[i].age);
}
</script>
</head>
<body>
</body>
</html>
3. JSON数据和Java对象的相互转换
* JSON解析器:
* 常见的解析器:Jsonlib,Gson,jackson , fastjson
(1)JSON转为Java对象(jackson)
(1) 导入jackson的相关jar包
(2)创建Jackson核心对象 ObjectMapper
(3)调用ObjectMapper的相关方法进行转换
readValue(json字符串数据,Class)
(2) Java对象转换JSON(jackson)
使用步骤:
a. 导入jackson的相关jar包
b. 创建Jackson核心对象 ObjectMapper
c. 调用ObjectMapper的相关方法进行转换
(a) 转换方法:
(1) mapper.writeValueAsString(obj):将对象转为json字符串
(2) mapper.writeValue(参数1,obj):
参数1:
File:将obj对象转换为JSON字符串,并保存到指定的文件中
Writer:将obj对象转换为JSON字符串,并将json数据填充到字符输出流中
OutputStream:将obj对象转换为JSON字符串,并将json数据填充到字节输出流中
(b)注解:
@JsonIgnore:排除属性。
@JsonFormat:属性值得格式化
@JsonIgnore:转换后直接不显示
@JsonFormat(pattern = "yyyy-MM-dd")
(c)复杂java对象转换
List:数组
Map:对象格式一致
(3)fastjson用法
文档:javaweb开发相关资料下载.notea
链接:有道云笔记文章来源:https://www.toymoban.com/news/detail-611471.html
文章来源地址https://www.toymoban.com/news/detail-611471.html
public class Test01 {
public static void main(String[] args) {
//1.将数据对象变成json(字符串类型)
MayiktUserEntity user1 = new MayiktUserEntity(1, "mayikt", "mayikt");
MayiktUserEntity user2 = new MayiktUserEntity(1, "mayikt", "mayikt");
String json1 = JSONObject.toJSONString(user1);
System.out.println(json1);
//2.嵌套json
JSONObject jsonObject = new JSONObject();
jsonObject.put("code", 200);
jsonObject.put("msg", "ok");
//data值 数组类型
ArrayList<MayiktUserEntity> mayiktUserEntities = new ArrayList<>();
mayiktUserEntities.add(user1);
mayiktUserEntities.add(user2);
jsonObject.put("data", mayiktUserEntities);
System.out.println(jsonObject.toJSONString());
}
}
public class Test02 {
public static void main(String[] args) {
String jsonStr = "{\"msg\":\"ok\",\"code\":200,\"data\":[{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"},{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"}]}";
// string类型-----jsonobject----jsonobject
JSONObject jsonObject = JSONObject.parseObject(jsonStr);
// Integer code = (Integer) jsonObject.get("code");
Integer code = jsonObject.getInteger("code");
String msg = jsonObject.getString("msg");
System.out.println(code + "," + msg);
JSONArray data = jsonObject.getJSONArray("data");
for (int i = 0; i < data.size(); i++) {
JSONObject object = (JSONObject) data.get(i);
Integer id = object.getInteger("id");
String userName = object.getString("userName");
String userPwd = object.getString("userPwd");
MayiktUserEntity mayiktUserEntity = new MayiktUserEntity(id, userName, userPwd);
System.out.println(mayiktUserEntity);
}
}
}
public class Test03 {
public static void main(String[] args) {
String jsonStr = "{\"msg\":\"ok\",\"code\":200,\"data\":[{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"},{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"}]}";
JSONObject jsonObject = JSONObject.parseObject(jsonStr);
Result result = JSONObject.parseObject(jsonStr, Result.class);
// java序列化技术 将 json变成对象
System.out.println(result);
}
}
public class Result {
private Integer code;
private String msg;
private List<MayiktUserEntity> data;
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public List<MayiktUserEntity> getData() {
return data;
}
public void setData(List<MayiktUserEntity> data) {
this.data = data;
}
@Override
public String toString() {
return "Result{" +
"code=" + code +
", msg='" + msg + '\'' +
", data=" + data +
'}';
}
}
axios({
method: "post",
url: "${pageContext.request.contextPath}/user/addUser",
data: JSON.stringify(userList),
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
}).then(resp => {
})
到了这里,关于ajax & axios & json的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!