ajax+jquery增删改査

ajax+jQuery小案例

小俊会编码

486人浏览 · 2022-08-15 00:29:45

小俊会编码 · 2022-08-15 00:29:45 发布

一.案例

效果

模拟的后台传过来的json串
UserServlet

package com.pro.servlets;

import com.alibaba.fastjson.JSON;
import com.pro.domain.User;

import javax.servlet.ServletException;
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;

public class UserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置乱码，req和resp都写上
        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");
        //
        String me = req.getParameter("me");
        if("check".equals(me)){
            check(req, resp);
        }else if("getUsers".equals(me)){
            getUsers(req,resp);
        }else if("addUser".equals(me)){
            addUser(req,resp);
        }
    }

    private void addUser(HttpServletRequest req, HttpServletResponse resp) throws IOException {

        String userName = req.getParameter("userName");
        String password = req.getParameter("password");

        PrintWriter writer = resp.getWriter();
        writer.write("添加成功了，我使用了ajax和jquery！"+userName+","+password);
//        writer.write(userName);

        writer.flush();
        writer.close();
    }

    //获取到一个集合后，想让他去页面显示
    private void getUsers(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        List<User> userList = new ArrayList<User>();
        for (int i = 0; i < 10; i++) {
            userList.add(new User(i,"name"+i,"psaaword"+i));
        }

        //因为有个需求，需要将集合转换为js对象格式的json串，所以为了方便转换，导入fastjson依赖
        String jsonString = JSON.toJSONString(userList);
        //此时就拿到了json串，再建立管道，将数据响应到客户端
        PrintWriter writer = resp.getWriter();
        writer.write(jsonString);
        writer.flush();
        writer.close();

    }


    //将验证抽取成方法
    private void check(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        String userName = req.getParameter("userName");
        //
        String msg = "用户已存在！";
        if (!"admin".equals(userName)){
         msg ="可以注册";
        }
        //由响应对象创建一个从服务器端到客户端的一个管道
        PrintWriter writer = resp.getWriter();
        writer.write(msg);
        //清空管道数据
        writer.flush();
        //关闭
        writer.close();
    }
}

jq-ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.0.js"></script>
    <script>
        $(function () {

            //查询
            $('#get').click(function () {
                $.ajax({
                    //调用后台代码
                    url:'user.json',
                    //提交的方式
                    type:'get',
                    //返回数据的类型-->文本类型
                    // dataType:'text',
                    dataType:'json',//自动帮我们把json串转成了js对象

                   /* //要添加的数据
                    data:{name:"zs",password:123},*/

                    //响应成功的数据
                    success:function (res) {
                        console.log(res);
                        // alert(res);
                        console.log(res[0].userId);
                        var userList = res;
                        var tab = '<table border="1px" width="500px">';
                        for (var i = 0; i < userList.length; i++) {
                            tab+='<tr align="center"><td>'+userList[i].userId+'</td><td>'+userList[i].username+'</td><td>'+userList[i].password+'</td></tr>'
                        }

                        tab+='</table>'
                        $('#list').html(tab);
                    }
                })
            })

            //添加
            $('#bt').click(function () {
                $.ajax({
                    //如果要用到后台，就写上servlet地址或者do页面的地址
                    url: 'userServlet?me=addUser',
                    type: 'post',
                    data: {userName:"zs",password:"123"},
                    dataType: 'text',
                    success:function (res) {
                        console.log(res);
                        alert(res);
                    }
                })
            })

        })
    </script>
</head>
<body>
<button id="get">取得后端返回的list</button>
<button id="bt">提交</button>
<div id="list">

</div>
</body>
</html>

总结：相比不用jQuery，代码上简单了很多，但是使用起来没有原生的那种味了，原生写起来，每一步的道理都可以很清楚，使用jQuery感觉只是效果上可以马上实现。原生代码实现可以去看json那篇文章

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

魔乐社区

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r