JavaWeb+AJAX实现的增删改查

实际应用: 后台管理
开发工具: idea
开发语言: Java
数据库: MySQL
持久化: Mybatis

演示界面:

1.jpg

一、准备实体类

1)、每一个选项框对应一个实体类，配置列表通过外键关联配置类别。这里通过js写死了配置类别，实际获取方式跟配置列表相同。

配置列表实体类：

/**
 * @auther ZengSakae
 * @date 2019-12-13 15:53
 */

public class Pojo2 {

    private Integer id;
    private String reason_name;
    private String details_of_reason;
    private String secheme_description;
    private Integer dis_order;
    private Integer collocation_id;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getReason_name() {
        return reason_name;
    }

    public void setReason_name(String reason_name) {
        this.reason_name = reason_name;
    }

    public String getDetails_of_reason() {
        return details_of_reason;
    }

    public void setDetails_of_reason(String details_of_reason) {
        this.details_of_reason = details_of_reason;
    }

    public String getSecheme_description() {
        return secheme_description;
    }

    public void setSecheme_description(String secheme_description) {
        this.secheme_description = secheme_description;
    }

    public Integer getDis_order() {
        return dis_order;
    }

    public void setDis_order(Integer dis_order) {
        this.dis_order = dis_order;
    }

    public Integer getCollocation_id() {
        return collocation_id;
    }

    public void setCollocation_id(Integer collocation_id) {
        this.collocation_id = collocation_id;
    }

    @Override
    public String toString() {
        return "Pojo2{" +
                "id=" + id +
                ", reason_name='" + reason_name + '\'' +
                ", details_of_reason='" + details_of_reason + '\'' +
                ", secheme_description='" + secheme_description + '\'' +
                ", dis_order=" + dis_order +
                ", collocation_id=" + collocation_id +
                '}';
    }
}

二、控制层
说明：由于页面是通过AJAX方式来实现异步效果，所以控制层返回给页面的值是json格式。
通过以下代码可以实现把实体类集合转化为JSON格式的字符串

List<Pojo2> lists = xnglService.queryAllPojo2(id);
        JSONArray jsonArray = JSONArray.fromObject(lists);
        String result = jsonArray.toString();
        return result;

pom 引入的依赖：
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.2.3</version>
<classifier>jdk15</classifier>
</dependency>

若从AJAX传入一个JSON的字符串则需要在AJAX表达式中设置如下属性
dataType: 'json', //设置为json格式
data: JSON.stringify(lists), //通过JSON.stringify将页面设置的字符串数组转换为 JSON格式
async: false, //变更为同步请求
contentType: 'application/json;charset=utf-8',

以下代码有重复部分，没有做优化。

import com.zrr.xngl.pojo.Pojo1;
import com.zrr.xngl.pojo.Pojo2;
import com.zrr.xngl.service.XnglService;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.*;


/**
 * @auther ZengSakae
 * @date 2019-12-10 17:31
 */


@RestController
public class XnglController {

    @Autowired
    XnglService xnglService;


    @RequestMapping(value = "/queryPojo")
    public String queryPojo1(HttpServletRequest request, HttpServletResponse response) throws Exception{

        // 设置为utf-8，避免解析出现乱码
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("application/json");

        int id = 0;

        //判断传入的id是否为空，这里只是做校验
        if(null != request.getParameter("id") || !"".equals(request.getParameter("id"))){
            id = Integer.parseInt(request.getParameter("id"));
        }

        List<Pojo1> ls =  xnglService.queryAllPojo(id);

        JSONArray jsonArray = JSONArray.fromObject(ls);  //把得到的实体类List集合转换为json数据

        String lists = jsonArray.toString(); //把json数据转换成json格式的String类型

        return lists;  //返回这个String给前端页面

    }

    @RequestMapping(value = "/queryPojo2")
    public String queryPojo2(HttpServletRequest request,HttpServletResponse response) throws Exception{

        // 设置为utf-8，避免解析出现乱码
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("application/json");

        int id = 0;

        if(null != request.getParameter("id") || !"".equals(request.getParameter("id"))){
            id = Integer.parseInt(request.getParameter("id"));
        }

        List<Pojo2> lists = xnglService.queryAllPojo2(id);

        JSONArray jsonArray = JSONArray.fromObject(lists);

        String result = jsonArray.toString();

        return result;
    }

    @RequestMapping(value = "/savePojo2")
    @ResponseBody
    public String savePojo2(@RequestBody String data)throws Exception{

         String result = "";

         JSONArray jsonArray = JSONArray.fromObject(data);

         List<Pojo2> lists = new ArrayList<>();

        for (int i=0;i<jsonArray.size();i++){

            Object o = jsonArray.get(i);
            JSONObject jsonObject = JSONObject.fromObject(o);
            Pojo2 p2 = (Pojo2) JSONObject.toBean(jsonObject,Pojo2.class);

            if(null == p2.getId() || "".equals(p2.getId())){

                boolean b = xnglService.addPojo2(p2.getReason_name(),p2.getDetails_of_reason(),p2.getSecheme_description(),p2.getDis_order());
                if(b){
                    System.out.println("添加成功");
                }

            }else {

                boolean b = xnglService.savePojo2(p2.getId(),p2.getReason_name(),p2.getDetails_of_reason(),p2.getSecheme_description(),p2.getDis_order());
                if (b){

                    System.out.println("更新成功");
                }
            }
        }

        return "SUCCESS";

    }

}

三、服务层

@Service
public class XnglService {

    @Autowired
    XnglMapper xnglMapper;

    public List<Pojo1> queryAllPojo(Integer id) {
        return xnglMapper.getAllPojo(id);
    }

    public List<Pojo2> queryAllPojo2(int id) {
        return xnglMapper.getAllPojo2(id);
    }

    public boolean savePojo2(Integer id, String reason_name, String details_of_reason, String secheme_description, Integer dis_order) {
        return xnglMapper.savePojo2(id,reason_name,details_of_reason,secheme_description,dis_order);
    }

    public boolean addPojo2(String reason_name, String details_of_reason, String secheme_description, Integer dis_order) {
        return xnglMapper.addPojo2(reason_name,details_of_reason,secheme_description,dis_order);
    }
}

四、Mapper层（代替了dao）
说明：只需要注意给参数设置别名注解@Param

@Repository
public interface XnglMapper {
    List<Pojo1> getAllPojo(@Param("id") Integer id);

    List<Pojo2> getAllPojo2(@Param("collocation_id") Integer id);

    boolean savePojo2(@Param("id") Integer id,@Param("reason_name") String reason_name,@Param("details_of_reason") String details_of_reason,@Param("secheme_description") String secheme_description,@Param("dis_order") Integer dis_order);

    boolean addPojo2(@Param("reason_name") String reason_name,@Param("details_of_reason") String details_of_reason,@Param("secheme_description") String secheme_description,@Param("dis_order") Integer dis_order);
}

五、mapping.xml 配置文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zrr.xngl.mapper.XnglMapper">

    <select id="getAllPojo" resultType="com.zrr.xngl.pojo.Pojo1">
        select * from collocation_column cc
        where cc.type_id = #{id}
    </select>

    <select id="getAllPojo2" resultType="com.zrr.xngl.pojo.Pojo2">
        select * from gzwtfl g
        where g.collocation_id = #{collocation_id}
    </select>

    <update id="savePojo2" parameterType="com.zrr.xngl.pojo.Pojo2">
        update gzwtfl
        set reason_name = #{reason_name},details_of_reason = #{details_of_reason},secheme_description = #{secheme_description},dis_order = #{dis_order}
        where id = #{id}
    </update>

    <insert id="addPojo2" parameterType="com.zrr.xngl.pojo.Pojo2">
        insert into gzwtfl(reason_name,details_of_reason,secheme_description,dis_order,collocation_id)
        values(#{reason_name},#{details_of_reason},#{secheme_description},#{dis_order},5)
    </insert>

</mapper>

六、HTML页面（thymeleaf技术）

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>性能管理流程</title>
</head>
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}" src="../static/js/jquery-3.4.1.min.js"></script>
<style type="text/css">
    .inp1 {
        float: left;
    }
</style>
<body>

<div style="height: 100px; width: 100%; background-color: #adacac; border: 2px solid #78b6da;">
    配置类别:&nbsp<select id="select1">
    <option value="0">--请选择--</option>
    <option value="1">流程角色配置</option>
    <option value="2">流程数据配置</option>
</select>&nbsp&nbsp
    配置列表:&nbsp<select id="select2">
    <option value="0">--请选择--</option>
</select>
</div>

<div>
    <button id="add">添加</button>
    <button id="del">删除</button>
    <button id="save">保存</button>
    <button id="flush">刷新</button>
    <form>
        <table>
            <thead>
            <tr>
                <th hidden="hidden">id</th>
                <th>问题原因分类</th>
                <th>原因分析详情</th>
                <th>方案描述</th>
                <th>排序</th>
            </tr>
            </thead>
            <tbody id="tbbody">
            <tr class="listsss">
            </tr>
            </tbody>
        </table>
    </form>
</div>


<script>
    $('#select1').change(function () {
        var value = $(this).val();
        if (value) {
            $.ajax({
                type: "get",        //调用方式: get、post、put、delete 等
                url: "/queryPojo",    // 调用的RequestMapping 的URL
                data: {"id": value},  //给controller层传入当前页面选项的value值，以便数据库查询
                dataType: "json",   //指定ajax接收类型为json
                success: function (data) {
                    $('#select2 option ').remove();
                    $('#select2').append("<option value = 0 >" + "--请选择--" + "</option>");
                    var lists = data;  //可以不写，直接遍历data
                    for (i in lists) {
                        $('#select2').append("<option value =" + lists[i].id + ">" + lists[i].name + "</option>");
                    }
                }
            });
        }
    })

    $('#select2').change(function () {
        var value = $(this).val();
        if (value) {
            $.ajax({
                type: "get",        //调用方式: get、post、put、delete 等
                url: "/queryPojo2",    // 调用的RequestMapping 的URL
                data: {"id": value},  //给controller层传入当前页面选项的value值，以便数据库查询
                dataType: "json",   //指定ajax接收类型为json
                success: function (data) {
                    $('.listsss').remove();
                    var lists = data;  //可以不写，直接遍历data
                    for (i in lists) {
                        // $('#tbbody').append("<tr class='listsss'>" + "<th hidden='hidden'>" + lists[i].id + "</th>" + "<th>"+ lists[i].reason_name + "</th>" + "<th>"+ lists[i].details_of_reason + "</th>" + "<th>"+ lists[i].secheme_description + "</th>" + "<th>"+ lists[i].dis_order + "</th>" +"</tr>" );
                        $('#tbbody').append("<tr class='listsss'>" + "<th hidden='hidden'>" + "<input type='text' name='id' value='" + lists[i].id + "'/></th>" + "<th><input type='text' name='reason_name' value='" + lists[i].reason_name + "'/></th>" + "<th><input type='text' name='details_of_reason' value='" + lists[i].details_of_reason + "'/></th>" + "<th><input type='text' name='secheme_description' value='" + lists[i].secheme_description + "'/></th>" + "<th><input type='text' name='dis_order' value='" + lists[i].dis_order + "'/></th>" + "</tr>");
                    }
                }
            });
        }
    });

    $('#save').click(function () {

        var length = $('.listsss').length;
        var ids = $("input[ name = 'id']");
        var reason_names = $("input[ name = 'reason_name']");
        var details_of_reasons = $("input[ name = 'details_of_reason']");
        var secheme_descriptions = $("input[ name = 'secheme_description']");
        var dis_orders = $("input[ name = 'dis_order']");

        var lists = new Array();
        for (var i = 0; i < length; i++) {
            var pojo2 = {};
            pojo2.id = ids[i].value;
            pojo2.reason_name = reason_names[i].value;
            pojo2.details_of_reason = details_of_reasons[i].value;
            pojo2.secheme_description = secheme_descriptions[i].value;
            pojo2.dis_order = dis_orders[i].value;
            lists.push(pojo2);
        }

        // for(var j=0;j<lists.length;j++){
        //     alert(lists[j].reason_name);
        // }

        $.ajax({
            type: "post",
            url: "/savePojo2",
            dataType: 'json',
            data: JSON.stringify(lists),
            async: false,
            contentType: 'application/json;charset=utf-8',
            success: function (data) {
                    alert("更新成功");
            }
        });

    })

    $('#flush').click(function () {
        //暂时未完善
    });

    $('#add').click(function () {

        $('#tbbody').append("<tr class='listsss'>" + "<th hidden='hidden'>" + "<input type='text' name='id' value=''/></th>" + "<th><input type='text' name='reason_name' value=''/></th>" + "<th><input type='text' name='details_of_reason' value=''/></th>" + "<th><input type='text' name='secheme_description' value=''/></th>" + "<th><input type='text' name='dis_order' value=''/></th>" + "</tr>");

    });

</script>

</body>
</html>

基本情况就是如此，可以在tr里面嵌入input框方便使用ajax实现更新，新增。
也可以另创建一个div遮罩层来新增，更新。

JavaWeb+AJAX实现的增删改查

推荐阅读更多精彩内容