javascript - 使用 JQUERY AJAX (Spring MVC) 从 Controller 中删除

Question

有人可以帮我解决这个问题吗？我需要使用此存储库实现 ajax 、 sweetalert.js: http://t4t5.github.io/sweetalert/

到目前为止，使用 onclick = ""并调用我的函数一切都很顺利。如果有人能告诉我应该如何使用此功能来消除员工，我将不胜感激。

这是我的 Controller 方法::

    @RequestMapping(value = "/eliminarEmpleado", method = RequestMethod.GET)
public ModelAndView eliminarEmpleado(HttpServletRequest request) {
    int empId = Integer.parseInt(request.getParameter("id"));
    empleadoService.eliminarEmpleado(empId);
    return new ModelAndView("redirect:/");
}

这是我的jsp，其中包含员工列表和删除按钮(我需要替换我放入测试的href，这当然工作得很好，但没有使用我需要的方式bone : jquery 。):::

<table id="central"  class="table table-condensed" align="center">

    <thead >
        <tr>
            <th >ID</th>
            <th>NOMBRE</th>
            <th >AP. PATERNO</th>
            <th>AP. MATERNO</th>
            <th>EMAIL</th>
            <th>TELÉFONO</th>
            <th>FECHA DE NACIMIENTO</th>
            <th>SALARIO</th>
            <th>REGIÓN</th>
            <th>PAÍS</th>
            <th>CALLE</th>
            <th>CÓDIGO POSTAL</th>
            <th>CIUDAD</th>
            <th>PROVINCIA</th>
            <th>DEPARTAMENTO</th>
            <th>ACCIONES</th>
        </tr>
    </thead>
    <tbody>


        <c:forEach items="${lista}" var="r">
            <tr>
                <td id="idEmpleado"  align="center">${r.idEmpleado}</td>
                <td align="center">${r.nombre}</td>
                <td align="center">${r.apPaterno}</td>
                <td align="center">${r.apMaterno}</td>
                <td align="center">${r.email}</td>
                <td align="center">${r.telefono}</td>
                <td align="center">${r.fechaNac}</td>
                <td align="center">${r.salario}</td>
                <td align="center">${r.nombreRegion}</td>
                <td align="center">${r.nombrePais}</td>
                <td align="center">${r.nombreCalle}</td>
                <td align="center">${r.codigoPostal}</td>
                <td align="center">${r.ciudad}</td>
                <td align="center">${r.provincia}</td>
                <td align="center">${r.nombreDepartamento}</td>

                <td><a data-original-title="Ver" href="editContact.htm?id=${empleado.id}" data-toggle="tooltip" data-placement="top" title=""><span class="glyphicon glyphicon-eye-open"></span></a>  <a data-original-title="Eliminar"   href="eliminarEmpleado.htm?id=${r.idEmpleado}" data-toggle="tooltip" data-placement="top" title=""><span class="glyphicon glyphicon-trash"></span></a> </td>
                </tr>
        </c:forEach>

    </tbody>
</table>

这是我的 jquery 代码，他们可以帮助我吗？我需要确切地知道如何使用它，我继续尝试了几个小时，但没有得到我希望的结果:(

<script>


    function deleteEmploy(idEmpleado) {

        swal({   
            title: "Are you sure?",   
            text: "You will not be able to recover this imaginary file!",   
            type: "warning",   
            showCancelButton: true,   
            confirmButtonColor: "#DD6B55",   
            confirmButtonText: "Yes, delete it!",   
            cancelButtonText: "No, cancel plx!",   
            closeOnConfirm: false,   
            closeOnCancel: false
            }, 
            function(isConfirm){   
                if (isConfirm) { 

                    swal("Deleted!", "Your imaginary file has been deleted.", "success");   
                    } else {     swal("Cancelled", "Your imaginary file is safe :)", "error");   
        } });
    event.preventDefault


}
    </script>

Answer 1

您缺少ajax函数调用将调用服务器端的 EliminarEmpleado Controller 方法。您也没有在代码中的任何地方调用deleteEmploy()。

试试这个:

HTML:添加 id到 anchor 标记，单击该标记时应调用deleteEmploy()

<td><a data-original-title="Eliminar" data-toggle="tooltip" data-placement="top" title="" id="deleteEmp" ><span class="glyphicon glyphicon-trash"></span></a> </td>

Javascript:将deleteEmploy()注册为onclick <a id="deleteEmp"> 的事件处理程序链接调用ajax() .

<script>

    $("#deleteEmp").on("click", deleteEmploy); //when #deleteEmp link is clicked, deleteEmploy() will be called

    function deleteEmploy() {

        swal({   
            title: "Are you sure?",   
            text: "You will not be able to recover this emplyoyee!",   
            type: "warning",   
            showCancelButton: true,   
            confirmButtonColor: "#DD6B55",   
            confirmButtonText: "Yes, delete it!",   
            cancelButtonText: "No, cancel plx!",   
            closeOnConfirm: false,   
            closeOnCancel: false
            }, 
            function(isConfirm){   
                if (isConfirm) { 
                    var data = {};
                    data["idEmpleado"] = $("#idEmpleado").html();
                    $.ajax({
                        type: "GET",
                        contentType: "application/json",
                        url: "${home}/eliminarEmpleado",
                        data: JSON.stringify(data),
                        dataType: "json",
                        success: function(){ 
                            swal("Deleted!", "The employee has been deleted.", "success");   
                        },
                        error: function(){
                            swal("Error", "Could not be deleted! :)", "error");   
                        }

                    });  



              } else {     swal("Cancelled", "Employee is safe :)", "error");   
        } });
    event.preventDefault


}
</script>