Ajax和Json综合案例

news2024/11/24 23:04:48

在这里插入图片描述

1. 查询所有

在这里插入图片描述

创建brand.html,使用axios发送请求,其中查询一般采用get的请求方式

<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/selectAllServlet"
        }).then(function (resp) {
        
		})
</script>

创建selectAllServlet,写对应查询的servlet,调用service查询并把查询到的信息进行序列化(转为JSON数据),最后将字符串响应到对应的页面上(并且做中文字符处理),将原先的list集合(brand)转变为数组,所以要在html遍历数组

@WebServlet("/selectAllServlet")
public class SelectAllServlet 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);
    }
}

首先获取数据let brands = resp.data;得到数组,接着采用for循环遍历,随后完成拼字符串操作

<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/selectAllServlet"
        }).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 += "\n" +
                    "    <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" +
                    "        <td>"+brand.status+"</td>\n" +
                    "\n" +
                    "        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
                    "    </tr>";
            }

            // 设置表格数据
            document.getElementById("brandTable").innerHTML = tableData;
        })
    }



</script>

2. 新增数据

ajax提交数据,数据处理问题;Web层响应成功标识,客户端获取并判断是否成功添加,跳转至addBrand.html

在这里插入图片描述

增删改一般采用post请求,先写出基本框架

<script src="js/axios-0.18.0.js"></script>

<script>
    //1. 给按钮绑定单击事件
    document.getElementById("btn").onclick = function () {
    
        //2. 发送ajax请求
        axios({
            method:"post",
            url:"http://localhost:8080/brand-demo/addServlet",
            data:
        }).then(function (resp) {
            }
        })
    }
    
</script>

创建AddServlet,接收数据request.getParameter() 不能接收json的数据,getParameter()的实现方式就是切割字符串,通过and或者=切割,而json数据并没有,格式不也一样,所以不能用;
采用获取请求体,再将请求体中的字符串(JSON字符串)转为Java对象;
最后设置响应成功标识

@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {

    private BrandService brandService = new BrandService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1. 接收数据,request.getParameter 不能接收json的数据
       /* String brandName = request.getParameter("brandName");
        System.out.println(brandName);*/

        // 获取请求体数据
        BufferedReader br = request.getReader();
        String params = br.readLine();

        // 将JSON字符串转为Java对象
        Brand brand = JSON.parseObject(params, Brand.class);


        //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);
    }
}

最后返回html页面,在发送ajax请求之前,先处理数据

<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 i = 0; i < status.length; i++) {
            if(status[i].checked){
                //
                formData.status = status[i].value ;
            }
        }

        console.log(formData);
        //2. 发送ajax请求
        axios({
            method:"post",
            url:"http://localhost:8080/brand-demo/addServlet",
            data:formData
        }).then(function (resp) {
            // 判断响应数据是否为 success
            if(resp.data == "success"){
                location.href = "http://localhost:8080/brand-demo/brand.html";
            }
        })
    }

</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/467281.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

星辰天合亮相 2023 国际金融展,软件定义存储信创方案备受瞩目

4 月 25 日&#xff0c;为期三天的 2023 中国国际金融展在北京首钢会展中心开幕&#xff0c;本届展会以“荟萃金融科技成果&#xff0c;展现数字金融力量&#xff0c;谱写金融服务中国式现代化新篇章”为主题&#xff0c;全面展示金融业为完善科技创新体系、加快实现高水平科技…

轻量级「行泊一体」爆发前夜!这家智驾Tier1正加码抢占市场

伴随行泊一体成为产业演进的确定性趋势&#xff0c;如何踩准市场爆发的节奏成为重中之重。 高工智能汽车注意到&#xff0c;行泊一体当前呈分层发展趋势&#xff0c;从底层SOC算力划分&#xff1a;其一&#xff0c;5-20TOPS轻量级平台&#xff0c;提供基础L2级行车泊车需求&am…

被修饰成单栋的倾斜摄影处理思路

作者&#xff1a;kele 前言 倾斜摄影数据是三维项目系统中的常客。在某些项目中&#xff0c;为了给倾斜摄影上的建筑赋予属性信息&#xff0c;实现点击建筑高亮并展示属性的功能&#xff0c;客户将倾斜摄影数据进行了模型单体化&#xff08;使用pdmodeler或者其它软件&#xf…

Java 版Spring cloud 企业工程项目管理系统平台源码(三控:进度组织、质量安全、预算资金成本、二平台:招采、设计管理)

工程项目管理软件&#xff08;工程项目管理系统&#xff09;对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营&#xff0c;全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据字典&#…

思科实验 voip通信的配置(内附命令超详细)

♥️作者&#xff1a;小刘在C站 ♥️个人主页&#xff1a;小刘主页 ♥️每天分享云计算网络运维课堂笔记&#xff0c;努力不一定有收获&#xff0c;但一定会有收获加油&#xff01;一起努力&#xff0c;共赴美好人生&#xff01; ♥️夕阳下&#xff0c;是最美的绽放&#xff0…

leetcode-328 奇偶链表

题目如下&#xff1a; 给定单链表的头节点 head &#xff0c;将所有索引为奇数的节点和索引为偶数的节点分别组合在一起&#xff0c;然后返回重新排序的列表。 第一个节点的索引被认为是 奇数 &#xff0c; 第二个节点的索引为 偶数 &#xff0c;以此类推。 请注意&#xff0c;…

10个必须掌握的SQL常用语句

世界上70%的相关性数据可以被储存为表格数据&#xff0c;即类似Excel&#xff0c;Csv类型的数据&#xff0c;如何去查询和分析相关性的数据&#xff1f;对于少量数据&#xff0c;我们可以使用Excel&#xff0c;更多一点数据&#xff0c;我们可以使用Python, pandas 处理大数据 …

区块链学习一(FISCO BCOS部署控制台部署第一个HelloWorld)

系统环境&#xff1a;CentOS Linux release 7.6.1810 fisco版本&#xff1a;3.3.0 jdk版本&#xff1a;1.8 第一步 安装依赖 sudo yum install -y curl openssl openssl-devel wget第二步 创建操作目录 mkdir fiscocd fisco第三步 下载安装脚本 curl -LO https://github.co…

chatGPT推荐2个key免费使用

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 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同时推荐一下一个国内比较稳定的代理 #查询余额 curl https://api.openai-proxy.com/pro/balance?apiKeysk-XXX | jqPython代码也可以查询 import requests impor…

生成对抗网络CycleGAN

1.介绍 论文&#xff1a;Unpaired Image-to-Image Translation using Cycle-Consistent Adversarial Networks 论文地址&#xff1a;https://arxiv.org/abs/1703.10593 什么是CycleGAN&#xff1a;CycleGAN主要用于图像之间的转换&#xff0c;假设有两个不成对的图像X和Y&am…

c++11 标准模板(STL)(std::priority_queue)(三)

适配一个容器以提供优先级队列 std::priority_queue 定义于头文件 <queue> template< class T, class Container std::vector<T>, class Compare std::less<typename Container::value_type> > class priority_queue; priority_queu…

chatgpt接入ROS2控制小海龟

chatgpt接入ROS2控制小海龟 0.前言一、使用功能测试&#xff1a; 二、运行结果三、总结 0.前言 在小破站看到的案例&#xff0c;感觉很有趣就自己尝试复现了一下。需要一个OpenAI API Key、ubuntu以及安装ROS2环境。 一、使用 代码仓库在这里&#xff0c;示例操作可以参考B站视…

DATAX hdfsreader orc格式读取数据丢失问题

最近做一个数据同步任务&#xff0c;从hive仓库同步数据到pg&#xff0c;Hive有4000w多条数据&#xff0c;但datax只同步了280w就结束了&#xff0c;也没有任何报错。 看了下datax源码&#xff0c;找到HdfsReader模块DFSUtil核心实现源码读取orc格式的文件方法&#xff1a; pu…

应用运行环境实时洞察,亚马逊云科技Cisco AppDynamics展优势

Cisco AppDynamics(APM)产品&#xff0c;现已正式上线亚马逊云科技Marketplace&#xff08;中国区域&#xff09;。可以通过亚马逊云科技Marketplace&#xff08;中国区域&#xff09;网站&#xff0c;灵活便捷地部署该解决方案&#xff0c;以便充分利用云原生APM(应用性能管理…

(上)苹果有开源,但又怎样呢?

苹果&#xff08;Apple Inc.&#xff09;有多伟大&#xff0c;我相信已经无需赘述了。但是&#xff0c;这里的伟大是指用产品和理念对行业进行的革命性颠覆&#xff0c;而不是对开源而言。 相反&#xff0c;在某种程度上&#xff0c;苹果几乎就是开源的反义词。这种骨子里的 “…

8个Wireshark使用技巧

一&#xff1a;数据包过滤 过滤需要的IP地址 ip.addr 在数据包过滤的基础上过滤协议ip.addrxxx.xxx.xxx.xxx and tcp 过滤端口ip.addrxxx.xxx.xxx.xxx and http and tcp.port80 指定源地址 目的地址ip.srcxxx.xxx.xxx.xxx and ip.dstxxx.xxx.xxx.xxx SEQ字段&#xff08;序列号…

浅谈 git 底层工作原理

浅谈 git 底层工作原理 系统复习到这里也快差不多了&#xff0c;大概就剩下两三个 sections&#xff0c;这里学习一下 git 的 hashing 和对象。 当然&#xff0c;跳过问题也不大。 config 文件 这里还是会用 redux 的项目&#xff0c;先看一下基本信息&#xff1a; ➜ re…

短视频矩阵系统---开发技术源码能力

短视频矩阵系统开发涉及到多个领域的技术&#xff0c;包括视频编解码技术、大数据处理技术、音视频传输技术、电子商务及支付技术等。因此&#xff0c;短视频矩阵系统开发人员需要具备扎实的计算机基础知识、出色的编程能力、熟练掌握多种开发工具和框架&#xff0c;并掌握音视…

制冷暖通工业互联网平台孵化

制冷暖通工业互联网平台孵化可以帮助初创企业或者创新项目快速建立和推广制冷暖通工业互联网平台。以下是一些常见的制冷暖通工业互联网平台孵化服务&#xff1a; 创业辅导&#xff1a;孵化器提供创业辅导服务&#xff0c;帮助企业或者项目找到合适的市场和商业模式&#xff0c…

sd卡中病毒的表现及sd文件消失后的恢复方法

sd卡在日常使用中十分常见&#xff0c;但有时也会发生一些意外情况。例如&#xff0c;不小心意外感染病毒&#xff0c;导致sd卡中存储的文件消失。那么对于丢失的文件&#xff0c;我们该如何恢复呢&#xff1f;下面将带您了解sd卡中病毒的表现以及sd卡文件消失怎么恢复的方法。…