fastjson +ajax 使用教程
原创
JSON数据和Java对象转换
- 导入坐标 ```xml <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.62</version> </dependency> ```
- Java对象转JSON ```java String jsonStr = JSON.toJSONString(obj); ```
- JSON字符串转Java对象 ```java User user = JSON.parseObject(jsonStr, User.class); ```
ajax 实现查询所有
brand.html```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="addBrand.html"><input type="button" value="新增"></a><br> <hr> <table id="brandTable" border="1" cellspacing="0" width="100%"> </table>
<script src="js/axios-0.18.0.js"></script> <script> // 1. 当页面加载完成后，发送ajax请求 window.onload = function () { // 2. 发送ajax请求 axios({ method: "get", url: "http://localhost:8080/brand-demo/ajaxSelectAllServlet" }).then(function (resp) { // 获取数据 let brands = resp.data; let tableData = "<tr>\n" + " <th>序号</th>\n" + " <th>品牌名称</th>\n" + " <th>企业名称</th>\n" + " <th>排序</th>\n" + " <th>品牌介绍</th>\n" + " <th>状态</th>\n" + " <th>操作</th>\n" + " </tr>"; for (let i = 0; i < brands.length; i++) { let brand = brands[i]; tableData += "<tr align=\"center\">\n" + " <td>" + (i + 1) + "</td>\n" + " <td>" + brand.brandName + "</td>\n" + " <td>" + brand.companyName + "</td>\n" + " <td>" + brand.ordered + "</td>\n" + " <td>" + brand.description + "</td>\n"; if (brand.status == 1) { tableData += " <td>启用</td>\n"; } else { tableData += " <td>禁用</td>\n"; } tableData += " <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" + " </tr>" } // 设置表格数据 document.getElementById("brandTable").innerHTML = tableData; }) } </script> </body></html>```AjaxSelectAllServlet```java package com.ruochen.web;
import com.alibaba.fastjson.JSON;import com.ruochen.pojo.Brand;import com.ruochen.service.BrandService;import javax.servlet.*;import javax.servlet.http.*;import javax.servlet.annotation.*;import java.io.IOException;import java.util.List;@WebServlet("/ajaxSelectAllServlet")public class AjaxSelectAllServlet extends HttpServlet { private BrandService brandService = new BrandService(); @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 1. 调用 Service 查询 List<Brand> brands = brandService.selectAll(); // 2. 将集合转换为 JSON 数据 （对象序列化） String jsonString = JSON.toJSONString(brands); // 3. 响应数据 response.setContentType("text/json;charset=utf-8"); response.getWriter().write(jsonString); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); }}```ajax 实现添加
addBrand.html```html <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <title>添加品牌</title> </head> <body> <h3>添加品牌</h3> <form action="" method="post"> 品牌名称：<input id="brandName" name="brandName"><br> 企业名称：<input id="companyName" name="companyName"><br> 排序：<input id="ordered" name="ordered"><br> 描述信息：<textarea rows="5" cols="20" id="description" name="description"></textarea><br> 状态： <input type="radio" name="status" value="0">禁用 <input type="radio" name="status" value="1">启用<br> <input type="button" id="btn" value="提交"> </form> <script src="js/axios-0.18.0.js"></script> <script> // 1. 给按钮绑定单击事件 document.getElementById("btn").onclick = function () { // 将表单数据转为 json var formData = { brandName: "", companyName: "", ordered: "", description: "", status: "" }; // 获取表单数据 let brandName = document.getElementById("brandName").value; // 设置数据 formData.brandName = brandName; // 获取表单数据 let companyName = document.getElementById("companyName").value; // 设置数据 formData.companyName = companyName; // 获取表单数据 let ordered = document.getElementById("ordered").value; // 设置数据 formData.ordered = ordered; // 获取表单数据 let description = document.getElementById("description").value; // 设置数据 formData.description = description; let status = document.getElementsByName("status"); for (let st of status) { if (st.checked) { formData.status = st.value; } } console.log(formData); // 2. 发送 ajax 请求 axios({ method: "post", url: "http://localhost:8080/brand-demo/ajaxAddServlet", data: formData }).then(function (resp) { // 判断响应数据是否为 success if (resp.data == "success") { location.href = "http://localhost:8080/brand-demo/brand.html" } }) } </script> </body></html>```AjaxAddServlet```java package com.ruochen.web;
import com.alibaba.fastjson.JSON;import com.ruochen.pojo.Brand;import com.ruochen.service.BrandService;import javax.servlet.*;import javax.servlet.http.*;import javax.servlet.annotation.*;import java.io.BufferedReader;import java.io.IOException;@WebServlet("/ajaxAddServlet")public class AjaxAddServlet extends HttpServlet { private BrandService brandService = new BrandService(); @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 1. 接收数据 // 获取请求体数据 BufferedReader br = request.getReader(); String params = br.readLine(); // 将 JSON 字符串转为 Java 对象 Brand brand = JSON.parseObject(params, Brand.class); System.out.println(brand); // 2. 调用 service 添加 brandService.add(brand); // 3. 响应成功标识 response.getWriter().write("success"); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); }}```原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
