Ajax即Asynchronous?Javascript?And?XML（異步JavaScript和XML）在 2005年被Jesse James Garrett提出的新術(shù)語，用來描述一種使用現(xiàn)有技術(shù)集合的‘新’方法，包括:?或?XHTML, CSS,?JavaScript,?DOM, XML,?XSLT, 以及最重要的XMLHttpRequest。?[3]??使用Ajax技術(shù)網(wǎng)頁應(yīng)用能夠快速地將增量更新呈現(xiàn)在用戶界面上，而不需要重載（刷新）整個(gè)頁面，這使得程序能夠更快地回應(yīng)用戶的操作。?[3]
jQuery AJAX API
$.ajax({
url: "",
type: "",
data: {
name: "yhc",
id: 5321
},
success: function(res) {
console.log(res)
}
})<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2022/8/20 0020
Time: 15:49
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#username").blur(function() {
$.ajax({
type: "get",
url: "RegController?username=" + $("#username").val(),
success: function(data){
$("#loading").remove() ;
//$("#msg").html(msg);
alert(data.msg) ;
},
beforeSend: function() {
$("body").append($("<img>").attr({"src":"image/loading.gif","id":"loading"})) ;
}
});
$.get("RegController",function(msg){
$(msg.hello).each(function(index,d){
$("#msg").html(d.borndate + ":" + d.studentNO) ;
}) ;
}) ;
}) ;
}) ;
</script>
</head>
<body>
<input type="text" name="username" id="username" />
<span id="msg"></span>
</body>
</html>
get/post方法
get 與post區(qū)別
- 安全性：get方式請求參數(shù)會(huì)拼接到url后面，安全性低，post請求參數(shù)會(huì)包裹在請求體中，安全性高
- 傳輸數(shù)量：get方式傳輸數(shù)據(jù)量小，不能超過2kb，post傳輸數(shù)據(jù)量大
- 傳輸速度：get速度快，post慢
$.get("xxx", {
?? ??? ?name: "xxx",
?? ??? ?id: 17
?? ?}, function(resText, status, xhr) {
?? ??? ?console.log(resText)
?? ?})
$.post("xxx", {
?? ??? ?name: "xxx",
?? ??? ?id: 17
?? ?}, function(resText, status, xhr) {
?? ??? ?console.log(resText)
?? ?})
?fastjson
?在前后端數(shù)據(jù)傳輸交互中,經(jīng)常會(huì)遇到字符串(String)與json,XML等格式相互轉(zhuǎn)換與解析，其中json以跨語言，跨前后端的優(yōu)點(diǎn)在開發(fā)中被頻繁使用，基本上可以說是標(biāo)準(zhǔn)的數(shù)據(jù)交換格式。fastjson 是一個(gè)java語言編寫的高性能且功能完善的JSON庫，它采用一種“假定有序快速匹配”的算法，把JSON Parse 的性能提升到了極致。它的接口簡單易用，已經(jīng)被廣泛使用在緩存序列化，協(xié)議交互，Web輸出等各種應(yīng)用場景中。
?
- 能夠支持將java bean序列化成JSON字符串，也能夠?qū)SON字符串反序列化成Java bean。
- 顧名思義，fastjson操作 JSON的速度是非?？斓摹?/li>
- 無其他包的依賴。
- 使用比較方便。
maven依賴：
<dependency>
? ? <groupId>com.alibaba</groupId>
? ? <artifactId>fastjson</artifactId>
? ? <!--（起碼1.2.48以上）因?yàn)檫@個(gè)版本一下存在漏洞-->
? ? <version>版本根據(jù)自己需要</version>
</dependency>
?
public static final Object parse(String text); // 把JSON文本parse為JSONObject或者JSONArray
public static final JSONObject parseObject(String text)； // 把JSON文本parse成JSONObject?
? ??
public static final <T> T parseObject(String text, Class<T> clazz); // 把JSON文本parse為JavaBean?public static final JSONArray parseArray(String text); // 把JSON文本parse成JSONArray?
public static final <T> List<T> parseArray(String text, Class<T> clazz); //把JSON文本parse成JavaBean集合?
public static final String toJSONString(Object object); // 將JavaBean序列化為JSON文本?
public static final String toJSONString(Object object, boolean prettyFormat); // 將JavaBean序列化為帶格式的JSON文本?
public static final Object toJSON(Object javaObject); //將JavaBean轉(zhuǎn)換為JSONObject或者JSONArray。
?
??java類轉(zhuǎn)換為json字符串
package com.csi.eshop.controller.product;
import com.alibaba.fastjson.JSON;
import com.csi.eshop.domain.Product;
import com.csi.eshop.service.ProductService;
import com.csi.eshop.service.impl.ProductServiceImpl;
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;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
@WebServlet("/JSON_EACHController")
public class JSON_EACHController extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("application/json;charset=utf-8");
PrintWriter out = resp.getWriter();
ProductService productService = new ProductServiceImpl();
List<Product> list = productService.list();
String s = JSON.toJSONString(list);
out.println(s);
}
}
會(huì)輸出集合以及數(shù)組對象
resp.setContentType("application/json;charset=utf-8");
使客戶端瀏覽器，區(qū)分不同種類的數(shù)據(jù)，并根據(jù)不同的MIME調(diào)用瀏覽器內(nèi)不同的程序嵌入模塊來處理相應(yīng)的數(shù)據(jù)。
實(shí)際應(yīng)用
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
Created by IntelliJ IDEA.
User: 華為
Date: 2022/8/20
Time: 22:12
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<link rel="stylesheet"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- <script type="text/javascript" src="json/no3.js"></script>-->
<!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
<!-- <link rel="stylesheet" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous"> -->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
</script>
<script type="text/javascript">
$.ajax({
type: "get",
url: "JSON_EACHController",
success: function (msg) {
// $("#loading").remove() ;
//$("#msg").html(msg);
// alert(msg) ;
$.each(msg, function (index, item) {
$("#list").html($("#list").html() +
"<div class='col-sm-6 col-md-3'>" +
"<div class='thumbnail'>" +
"<img id='img1' src='" + item.fileName + "' alt='猥瑣的圖片路徑' >" +
"<div class='caption'>" +
"<h3>" + item.name + "</h3>" +
"<p>" + item.description + "</p>" +
"<p>" + item.price + "</p>" +
"<p>" + "<a href='#' class='btn btn-primary' role='button'>購買</a>" + "<a href='#' class='btn btn-default' role='button'>加入購物車</a>" + "</p>" +
"</div>" +
"</div>" +
"</div>"
)
})
},
});
</script>
</head>
<body>
<div class="row" id="list">
<!-- <div class="col-sm-6 col-md-3">-->
<!-- <div class="thumbnail">-->
<!-- <img src="images/per_1.jpg" alt="...">-->
<!-- <div class="caption">-->
<!-- <h3>Dior/迪奧 真我香水EDP 克麗絲汀</h3>-->
<!-- <p>開業(yè)巨惠，北京專柜直供”，不光低價(jià)，“真”才靠譜！</p>-->
<!-- <p><a href="#" class="btn btn-primary" role="button">購買</a> <a href="#" class="btn btn-default" role="button">加入購物車</a></p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</body>
</html>
日期格式處理
數(shù)組和集合
import com.alibaba.fastjson.JSON;
import domain.Grade;
import domain.Result;
import domain.Student;
import org.junit.Test;
import java.util.*;
public class test1 {
@Test
public void test1(){
Result result = new Result(200,"成功");
String jsonStr = JSON.toJSONString(result);
System.out.println(jsonStr);
}
@Test
public void test2(){
Student student = new Student();
student.setStudentNo("10001");
student.setBornDate(new Date());
Grade grade = new Grade();
grade.setGradeName("一年");
grade.setGradeId(1);
Set<Student> students = new HashSet<>();
students.add(student);
grade.setStudents(students);
student.setGrade(grade);
String jsonStr = JSON.toJSONString(student);
System.out.println(jsonStr);
}
@Test
public void test3(){
Grade grade = new Grade();
grade.setGradeName("一年");
grade.setGradeId(1);
Student student1 = new Student();
student1.setStudentNo("10001");
student1.setBornDate(new Date());
Student student2 = new Student();
student2.setStudentNo("10002");
student2.setBornDate(new Date());
Set<Student> students = new HashSet<>();
students.add(student1);
students.add(student2);
grade.setStudents(students);
String s = JSON.toJSONString(grade,true);
System.out.println(s);
}
@Test
public void test4(){
//
Grade grade = new Grade();
grade.setGradeName("一年");
grade.setGradeId(1);
Student student1 = new Student();
student1.setStudentNo("10001");
student1.setBornDate(new Date());
Student student2 = new Student();
student2.setStudentNo("10002");
student2.setBornDate(new Date());
List<Student> studentList = new ArrayList<>();
studentList.add(student1);
studentList.add(student2);
String s = JSON.toJSONString(studentList);
System.out.println(s);
Set<Student> students = new HashSet<>();
students.add(student1);
students.add(student2);
grade.setStudents(students);
String s1 = JSON.toJSONString(grade);
System.out.println(s1);
Map<String,Student> map = new HashMap<>();
map.put("key1",student1);
map.put("key2",student2);
String giao = JSON.toJSONString(map,true);
System.out.println(giao);
//
}
@Test
public void test5(){
//
Student student1 = new Student();
student1.setStudentNo("10001");
student1.setBornDate(new Date());
String giao = JSON.toJSONString(student1);
System.out.println(giao);
//
}
}
List[{對象}]
Set{[{對象}]}文章來源：http://www.zghlxwxcb.cn/news/detail-488665.html
Map{對象}文章來源地址http://www.zghlxwxcb.cn/news/detail-488665.html
到了這里，關(guān)于AJAX與JSON數(shù)據(jù)交互處理的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
