Question

以下是我的home.jsp页面

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>welcome</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body onload="load();">
<input type="hidden" id="empId">
Name: <input type="text" id="emp_name" required="required" name="empName"><br>
Address: <input type="text" id="emp_address" required="required" name="empAddress"><br>
Salary: <input type="text" id="emp_salary" required="required" name="empSalary"><br>
<button onclick="submit();">submit</button>
<table id="table" border="1">
    <tr>
        <th>Name</th>
        <th>Address</th>
        <th>Salary</th>
        <th>edit</th>
        <th>delete</th>
    </tr>
</table>
</body>
<script type="text/javascript">
    data = "";
    load = function () {
        $.ajax({
            url: 'getlist',
            type: 'get',
            success: function (response) {
                data = response.data;
                $('.tr').remove();
                for (i = 0; i < response.data.length; i++) {
                    $("#table").append("<tr class = 'tr'> <td>" + response.data[i].empName + "</td>	<td>" + response.data[i].empAddress + "</td> <td>" + response.data[i].empSalary + "</td> <td><a href ='#' onclick = 'edit(" + i + ");'> edit </a> </td>  <td> <a href ='#' onlclick = 'deleteEmp(" + response.data[i].empId + ");'> delete </a></td></tr>")
                }
            }
        });
    }
    edit = function (index) {

        //when we click on edit, those value should be available in our table fields.
        $("#empId").val(data[index].empId);
        $("#emp_name").val(data[index].empName);
        $("#emp_address").val(data[index].empAddress);
        $("#emp_salary").val(data[index].empSalary);
    }
    submit = function () {
        $.ajax({
            url: "saveOrUpdate",
            method: "post",
            data: {
                empId: $("#empId").val(),
                empName: $("#emp_name").val(),
                empAddress: $("#emp_address").val(),
                empSalary: $("#emp_salary").val()
            },
            success: function (response) {
                alert(response.message);
                load();
            }
        });
    }
    deleteEmp = function (Id) {
        $.ajax({
            url: 'delete',
            method: 'put',
            data: {empId: Id},
            success: function (response) {
                alert(response.message);
                load();
            }
        });
    }
</script>
</html>

想法是当我点击删除链接时，它应该调用delete函数，然后可以与Spring控制器类进行交互，但是它不能正常工作。我还提供了按预期工作的编辑链接（与删除完全相似）。所以我真的很困惑，无法调试问题。

需要帮助，因为我对这一切都很陌生，并且自己学习。

Answer 1

删除链接的事件名称中有拼写错误：onlclick。

但是，使用内联事件绑定并不是一个好习惯。试试这个：

var html = "";
for (i = 0; i < response.data.length; i++) {
    html+= "<tr class = 'tr'> <td>" + response.data[i].empName + "</td> <td>" + response.data[i].empAddress + "</td> <td>" + response.data[i].empSalary + "</td> <td><a href ='#' class='edit-button'> edit </a> </td>  <td> <a href ='#' class='delete-button' data-empid='" + response.data[i].empId + "'> delete </a></td></tr>";
}
$("#table").append(html);

在全球范围内：

$(document).ready(function() {
    $("#table")
        .on("click", ".delete-button", function() {
            var empIp = $(this).data("empid");
            deleteEmp(empId);
        })
        .on("click", ".edit-button", function() {
            var index = $(this).closest("tr").index();
            edit(index);
        });
});

第一个代码段将仅使用一个 append()调用创建您的元素，并且没有内联事件绑定。

最后一个代码段将点击事件绑定到您的表，因此如果动态创建行，则不会遇到问题，每次都不会创建事件。 delete 事件使用数据属性获取empId，编辑事件通过{{1}查找行索引索引。

当我点击删除链接时，我的Ajax功能不起作用，但适用于编辑链接

1 个答案: