JavaWeb+AJAX實現(xiàn)的增刪改查

實際應(yīng)用: 后臺管理
開發(fā)工具: idea
開發(fā)語言: Java
數(shù)據(jù)庫: MySQL
持久化: Mybatis

演示界面:


1.jpg

一、準(zhǔn)備實體類

1)、每一個選項框?qū)?yīng)一個實體類，配置列表 通過外鍵關(guān)聯(lián) 配置類別。這里通過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方式來實現(xiàn)異步效果，所以控制層返回給頁面的值是json格式。
通過以下代碼可以實現(xiàn)把實體類集合轉(zhuǎn)化為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表達(dá)式中設(shè)置如下屬性
dataType: 'json', //設(shè)置為json格式
data: JSON.stringify(lists), //通過JSON.stringify將頁面設(shè)置的 字符串?dāng)?shù)組轉(zhuǎn)換為 JSON格式
async: false, //變更為同步請求
contentType: 'application/json;charset=utf-8',

以下代碼有重復(fù)部分，沒有做優(yōu)化。

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{

        // 設(shè)置為utf-8，避免解析出現(xiàn)亂碼
        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集合轉(zhuǎn)換為json數(shù)據(jù)

        String lists = jsonArray.toString(); //把json數(shù)據(jù)轉(zhuǎn)換成json格式的String類型

        return lists;  //返回這個String給前端頁面

    }

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

        // 設(shè)置為utf-8，避免解析出現(xiàn)亂碼
        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";

    }

}

三、服務(wù)層

@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）
說明：只需要注意給參數(shù)設(shè)置別名 注解@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技術(shù)）

<!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">流程數(shù)據(jù)配置</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",        //調(diào)用方式: get、post、put、delete 等
                url: "/queryPojo",    // 調(diào)用的RequestMapping 的URL
                data: {"id": value},  //給controller層傳入當(dāng)前頁面選項的value值，以便數(shù)據(jù)庫查詢
                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",        //調(diào)用方式: get、post、put、delete 等
                url: "/queryPojo2",    // 調(diào)用的RequestMapping 的URL
                data: {"id": value},  //給controller層傳入當(dāng)前頁面選項的value值，以便數(shù)據(jù)庫查詢
                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實現(xiàn)更新，新增。
也可以另創(chuàng)建一個div遮罩層來新增，更新。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容