更新数据关于从后台返回到前端的某一块，也就是用ajax调用后台的方法的实现方式

本文链接：https://blog.csdn.net/qq_43344595/article/details/119461840

本文介绍如何通过Ajax调用Java后台方法来实现前端数据的更新。重点在于选中特定数据，获取其ID，然后进行赋值并利用Ajax进行交互。记得在使用前导入相关jar包。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重点看方法和写的过程具体输出的值我还没有写全，就是修改添加的值有N个，我的代码只写了N-n个
在使用之前记得先导入jar包

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.12.4</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.12.4</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.12.4</version>
        </dependency>

一步步执行的代码都贴出来：
点击修改按钮此时需要选中前端的某一条数据，然后到test方，然后执行，获取到了选中的那条i数据的id（这里是key1）
然后传入赋值，然后用ajax方法，记住后端的方法，返回那里

 <li><a href="javascript:test()"><span><img src="../images/t02.png" /></span>修改</a></li>

 function test(){
            var ids=$("[name='ids']");
            var sel=[]
            ids.each(function () {
                if(this.checked){
                    sel.push(this.value)
                }
            });
            if (sel.length==0||sel.length>1){
                alert("请选择一个客户");
                return ;
            }
          // window.location="${pageContext.request.contextPath}/custmgr/updateCmLevelView?key1="+sel[0];
           /* var form = new FormData(document.getElementById("uploadForm"));*/
            var key1=sel[0];
            $.ajax({
                url:"/custmgr/updateCmLevelView?key1="+key1,
                type: 'GET',
                dataType:"json",
                processData: false,  // 告诉jQuery不要去处理发送的数据
                contentType: false,   // 告诉jQuery不要去设置Content-Type请求头，
                                      // contentType: 'application/json' 向后台传值为json格
                                      // 式，需要与JSON.stringify({ stuID: stuID2 })使用
               success: function (data) {
                   $("input[name='cmName']").val(data.cmName);
                    $("input[name='cmtype']").val(data.cmtype);
                   $("input[name='cmlevel']").val(data.cmlevel);
                   $("input[name='holdDate']").val(data.holdDate);
                   // alert(data.cmtype);
                },
                error: function () {
                    alert(data);// 请求失败时的回调函数
                }
            });
            openWindow(12)
        }

 @RequestMapping("updateCmLevelView")
    public @ResponseBody CmLevelBean updateCmLevelView(CmLevelBean cmLevelBean,@RequestParam Integer key1){
        Pagination<CmLevelBean> page = new Pagination<CmLevelBean>(1,10);
        page.setQueryObject(cmLevelBean);
       cmLevelBean.setKey1(new Integer(key1));
        cmLevelService.getByPage(page);
       // request.setAttribute("level",page);
        return (CmLevelBean)page.getList().get(0);

    }

当然了在调用的时候也还有其他的

 <div id="light12" class="firstScan_main">
            <form action="updateCmLevel" method="post" enctype="multipart/form-data" commandName="cmLevelBean">
                <div class="formbody">
                    <div class="formtitle"><span>修改等级认定记录</span></div>

                    <ul class="forminfo">
                        <li><label>客户经理编号</label><form:select path="cmId"  cssClass="dfselect" >
                            <form:option value="-1" label="-请选择-"></form:option>
                            <form:options items="${data}" itemLabel="name" itemValue="id" ></form:options>
                        </form:select> </li>
                        <li><label>认定时间</label> <form:input path="holdDate" readonly="true" type="text" id="holdDate" cssClass="dfinput" /> </li>
                        <li><label>认定级别</label><input name="cmlevel" type="text" class="dfinput" value="${data.cmlevel}"/> </li>
                        <li><label>认定类型</label><input name="cmtype" type="text" class="dfinput" value="${data.cmtype}"/> </li>
                        <li><label>附件上传</label><input name="attachmentfile" type="file" class="dfselect1"/></li>
                        <li>&nbsp;&nbsp;<input name="" type="submit" class="btn" value="修改"/>&nbsp;&nbsp;&nbsp;&nbsp;<input name="" type="reset" class="btn" value="关闭" onclick="closeWindow('light12')"/></li>
                    </ul>
                </div>
            </form>
        </div>
    <script type="text/javascript">

这里是上面的完整的

<%@ page language="java" contentType="text/html;charset=UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../css/jquery/jquery.ui.all.css"/>
    <script type="text/javascript" src="../editor/kindeditor.js"></script>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script src="../js/jquery/jquery-1.8.2.js"></script>
    <script src="../js/jquery/ui/jquery.ui.core.js"></script>
    <script src="../js/jquery/ui/jquery.ui.widget.js"></script>
    <script src="../js/jquery/ui/jquery.ui.datepicker.js"></script>
    <script type="text/javascript">
        function oWorkPerformDel()
        {var ids=$("[name='ids']");
            var sel=[]
            ids.each(function () {
                if(this.checked){
                    sel.push(this.value)
                }
            });
            if (sel.length==0||sel.length>1){
                alert("请选择一个客户");
                return ;
            }
            if (confirm("删除客户信息,您确定要删除吗?"))
                document.forms[0].action = "${pageContext.request.contextPath}/custmgr/delCmLevel?key1="+sel[0];
            document.forms[0].submit();
        }
        $(function(){
            $("#holdDate").datepicker({
                dateFormat:"yy-mm-dd"
            });
        });
        function test(){
            var ids=$("[name='ids']");
            var sel=[]
            ids.each(function () {
                if(this.checked){
                    sel.push(this.value)
                }
            });
            if (sel.length==0||sel.length>1){
                alert("请选择一个客户");
                return ;
            }
          // window.location="${pageContext.request.contextPath}/custmgr/updateCmLevelView?key1="+sel[0];
           /* var form = new FormData(document.getElementById("uploadForm"));*/
            var key1=sel[0];
            $.ajax({
                url:"/custmgr/updateCmLevelView?key1="+key1,
                type: 'GET',
                dataType:"json",
                processData: false,  // 告诉jQuery不要去处理发送的数据
                contentType: false,   // 告诉jQuery不要去设置Content-Type请求头，
                                      // contentType: 'application/json' 向后台传值为json格
                                      // 式，需要与JSON.stringify({ stuID: stuID2 })使用
               success: function (data) {
                   $("input[name='cmName']").val(data.cmName);
                    $("input[name='cmtype']").val(data.cmtype);
                   $("input[name='cmlevel']").val(data.cmlevel);
                   $("input[name='holdDate']").val(data.holdDate);
                   // alert(data.cmtype);
                },
                error: function () {
                    alert(data);// 请求失败时的回调函数
                }
            });
            openWindow(12)
        }

        /*function confirmMsgUpdate() {
            var ids=$("[name='ids']");
            var sel=[]
            ids.each(function () {
                if(this.checked){
                    sel.push(this.value)
                }
            });
            if (sel.length==0||sel.length>1){
                alert("请选择一个客户");
                return ;
            } 
            window.location="${pageContext.request.contextPath}/cust/updateCmLevel?id="+sel[0];
            openWindow(12)
        }*/
    </script>
    <script type="text/javascript">
        KE.show({
            id : 'content7',
            cssPath : './index.css'
        });
    </script>

    <script type="text/javascript">
        $(document).ready(function(e) {
            $(".select1").uedSelect({
                width : 260
            });
            $(".select2").uedSelect({
                width : 167
            });
            $(".select3").uedSelect({
                width : 100
            });

        });
    </script>
</head>

<body>

<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="#">客户经理辅助信息维护</a></li>
    </ul>
</div>

<div class="formbody">


    <div id="usual1" class="usual">

        <div class="itab">
            <ul>
                <li><a href="#tab1" >年度工作业绩</a></li>
                <li><a href="#tab2">证照列表</a></li>
                <li><a href="#tab3">奖惩记录</a></li>
                <li><a href="#tab4">考核记录</a></li>
                <li><a href="#tab5">学习培训记录</a></li>
                <li><a href="#tab6" class="selected">等级认定记录</a></li>
                <li><a href="#tab7">工作经历</a></li>
            </ul>
        </div>


        <!--等级认定记录  -->
        <div id="tab6" class="tabson">
            <ul class="seachform">
                <li><label>客户经理编号</label><input name="" type="text" class="scinput" /></li>
                <li><label>认定时间</label><input name="" type="text" class="scinput" /></li>
                <li><label>认定级别</label><input name="" type="text" class="scinput" /></li>
                <li><label>&nbsp;</label><input name="" type="button" class="scbtn" value="查询"/></li>
            </ul>
            <div class="tools">
                <ul class="toolbar1">
                    <li><a href="javascript:openWindow(11)"><span><img src="../images/t01.png" /></span>添加</a></li>
                    <li><a href="javascript:test()"><span><img src="../images/t02.png" /></span>修改</a></li>
                    <li><a href="javascript:oWorkPerformDel()" ><span><img src="../images/t03.png"/></span>删除</a></li>
                </ul>
            </div>

            <table class="tablelist">
                <thead>
                <tr class="tablehead"><td colspan="14">等级认定记录</td></tr>
                </thead>
                <thead>
                <tr>
                    <th><input name="" type="checkbox" value=""/></th>
                    <th>姓名</th>
                    <th>认定时间</th>
                    <th>认定级别</th>
                    <th>认定类型</th>
                    <th>附件依据</th>
                    <th>维护日期</th>
                    <th>维护人</th>
                </tr>
                </thead>
                <tbody>

                <c:forEach var="cmlevel" items="${list.list}">
                    <tr>
                        <td><input name="ids" type="checkbox" value="${cmlevel.key1}"/></td>
                        <td>${cmlevel.cmName}</td>
                        <td>${cmlevel.holdDate}</td>
                        <td>${cmlevel.cmlevel}</td>
                        <td>${cmlevel.cmtype}</td>
                        <td><a href="${pageContext.request.contextPath}/custmgr/download?key=${cmlevel.key1}">下载</a></td>
                        <td></td>
                        <td>admin</td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>

        <script language="javascript">
            function openWindow(scanLog) {
                if (scanLog == 1) {
                    document.getElementById('light1').style.display = 'block';
                }else if(scanLog == 2){
                    document.getElementById('light2').style.display = 'block';
                }else if(scanLog == 3){
                    document.getElementById('light3').style.display = 'block';
                }else if(scanLog == 4){
                    document.getElementById('light4').style.display = 'block';
                }else if(scanLog == 5){
                    document.getElementById('light5').style.display = 'block';
                }else if(scanLog == 6){
                    document.getElementById('light6').style.display = 'block';
                }else if(scanLog == 7){
                    document.getElementById('light7').style.display = 'block';
                }else if(scanLog == 8){
                    document.getElementById('light8').style.display = 'block';
                }else if(scanLog == 9){
                    document.getElementById('light9').style.display = 'block';
                }else if(scanLog == 10){
                    document.getElementById('light10').style.display = 'block';
                }else if(scanLog == 11){
                    document.getElementById('light11').style.display = 'block';
                }else if(scanLog == 12){

                    document.getElementById('light12').style.display = 'block';
                }else if(scanLog == 13){
                    document.getElementById('light13').style.display = 'block';
                }else if(scanLog == 14){
                    document.getElementById('light14').style.display = 'block';
                }
            }
            function closeWindow(id) {
                document.getElementById(id).style.display = 'none';
            }
        </script>
        <div id="light11" class="firstScan_main">

            <form:form action="create" method="post" enctype="multipart/form-data" commandName="cmLevelBean">
                <div class="formbody">
                    <div class="formtitle"><span>添加等级认定记录</span></div>

                    <ul class="forminfo">
                        <li><label>客户经理编号</label><form:select path="cmId"  cssClass="dfselect" >
                            <form:option value="-1" label="-请选择-"></form:option>
                            <form:options items="${cminfoList}" itemLabel="name" itemValue="id"></form:options>
                        </form:select> </li>
                        <li><label>认定时间</label> <form:input path="holdDate" readonly="true" type="text" id="holdDate" cssClass="dfinput" /> </li>
                        <li><label>认定级别</label><input name="cmlevel" type="text" class="dfinput" /></li>
                        <li><label>认定类型</label><input name="cmtype" type="text" class="dfinput" /></li>
                        <li><label>附件上传</label><input name="attachmentfile" type="file" class="dfselect1"/></li>
                        <li>&nbsp;&nbsp;<input name="" type="submit" class="btn" value="添加"/>&nbsp;&nbsp;&nbsp;&nbsp;<input name="" type="reset" class="btn" value="关闭" onclick="closeWindow('light11')"/></li>
                    </ul>
                </div>
            </form:form>
        </div>
        <div id="light12" class="firstScan_main">
            <form action="updateCmLevel" method="post" enctype="multipart/form-data" commandName="cmLevelBean">
                <div class="formbody">
                    <div class="formtitle"><span>修改等级认定记录</span></div>

                    <ul class="forminfo">
                        <li><label>客户经理编号</label><form:select path="cmId"  cssClass="dfselect" >
                            <form:option value="-1" label="-请选择-"></form:option>
                            <form:options items="${data}" itemLabel="name" itemValue="id" ></form:options>
                        </form:select> </li>
                        <li><label>认定时间</label> <form:input path="holdDate" readonly="true" type="text" id="holdDate" cssClass="dfinput" /> </li>
                        <li><label>认定级别</label><input name="cmlevel" type="text" class="dfinput" value="${data.cmlevel}"/> </li>
                        <li><label>认定类型</label><input name="cmtype" type="text" class="dfinput" value="${data.cmtype}"/> </li>
                        <li><label>附件上传</label><input name="attachmentfile" type="file" class="dfselect1"/></li>
                        <li>&nbsp;&nbsp;<input name="" type="submit" class="btn" value="修改"/>&nbsp;&nbsp;&nbsp;&nbsp;<input name="" type="reset" class="btn" value="关闭" onclick="closeWindow('light12')"/></li>
                    </ul>
                </div>
            </form>
        </div>
    <script type="text/javascript">
        $("#usual1 ul").idTabs();
    </script>

    <script type="text/javascript">
        $('.tablelist tbody tr:odd').addClass('odd');
    </script>

</div>

</body>

</html>