使用JQUERY AJAX（Spring MVC）从控制器中删除

Question

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

到目前为止，一切都很好，可以使用onclick =“”并调用我的Function。 如果有人可以告诉我如何使用此功能消除雇员，我将不胜感激。

这是我的控制器方法::

    @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，它当然可以正常工作，但不使用我需要的方式：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控制器方法。 您也没有在代码的任何地方调用deleteEmploy（）。

尝试这个：

HTML：在锚标记中添加一个id ，单击该id时应调用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（）注册为<a id="deleteEmp">链接的onclick事件处理程序，然后调用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>