时间戳

首页 > 解决方案 > 如何根据来自 ajax 的弹出窗口或对话框的输入来执行控制器

java - 如何根据来自 ajax 的弹出窗口或对话框的输入来执行控制器

问题描述

在下面的代码“code_2”中，我有一个应用 http 方法 DELETE 的控制器，以根据提供的 id 删除特定产品。在“code_1”中，我正在尝试创建 ajax 调用，在执行 code_2 中的控制器之前，向用户显示或呈现一个对话框或弹出窗口，其中是 YES 和 NO。换句话说，当客户端调用

/product/remove/2

他应该会看到一个弹出窗口或对话框，带有 YES 和 No。当他单击 YES 时，code_2 中的控制器应该正常执行。如果他单击“否”，则不会发生任何事情..只有对话框或弹出窗口消失。

对于弹出窗口或对话框，我执行了以下操作，如下所示：

<body>
    <form action="http://www.google.com/search">
        <input type="text" name="q" />
        <input type="submit" value="Go" onclick="return confirm('Are you sure you want to search Google?')"/>
    </form>
</body>

我找不到带有“是”和“否”按钮的表格...你能帮我改正吗

我已经实现了以下 code_1 和 code_2。

请让我知道代码是否正确或需要修改...此外，我无权访问服务器，我是 ajax 和 spring mvc 技术的新手。

代码_1：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ajax confirm delete prodcut</title>
<script
src="${pageContext.request.contextPath }/resources/js/jquery-1.6.2.js"></script>

<script type="text/javascript">

$(document).ready(function() {


$('#confirmremoveform').click(function() {
var idx = $('#idx').val();
var ans = confirm("Are you sure you want to delete this Record?");
if (ans) {
    $.ajax({
        type: "DELETE",
        url: "/product/remove/" + idx,
        dataType : 'json',
        contentType : 'application/json',
        beforeSend: function () {
            $("#modal-book").modal("show");
          },
          success: function (data) {
            $("#onsuccessfuldelete").text(data);
          },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });
}
});
}

</script>

</head>

<body>
    <form action="http://www.google.com/search">
        <input type="text" name="q" />
        <input type="submit" value="Go" onclick="return confirm('Are you sure you want to search Google?')"/>
    </form>
</body>

</html>

代码_2

@Controller
@RequestMapping("/product/remove")
public class RemoveProductPageController {

public final static String sRemoveProductFromListAttributeName = "removeProductFromList";

public final static String CONTROLLER_URL = "/product/remove";
public final static String DO_REMOVE_HANDLER_METHOD_URL = CONTROLLER_URL + "/{idx}";

@Autowired
private ProductService productService;

@RequestMapping(value = "/{idx}", 
        method = RequestMethod.DELETE)
@ResponseBody
public ResponseEntity<String> doRemove(@Validated @Size(min = 0) @PathVariable(required = true) int idx,
        Model model) {

    Product productToBeRemove = productService.getProductFromListByIdx(idx);
    if (productToBeRemove == null) {
        return new ResponseEntity<String>("no product is avaialble at index:" + idx, HttpStatus.NOT_FOUND);
    }

    model.addAttribute(RemoveProductPageController.sRemoveProductFromListAttributeName, productToBeRemove);
    productService.removeProdcutFromListBxIdx(idx);
    return new ResponseEntity<String>("product removed from index: " + idx, HttpStatus.OK);
}
}

标签： javaajaxspringspring-boot

解决方案

尝试使用SWAL (SweetAlert)。它是 javascript 弹出窗口的可定制替代品。

您可以选择很多选项。

例子：

JSP，单击删除按钮

$('#[idOfDeleteButton]').click(function (e) {
            e.preventDefault();
            swal({
                title: 'Are you sure you want to delete this record',
                type: 'warning',
                showCancelButton: true
            }).then(function () {
               //execute once user confirms else nothing happens
                var deleteLink = "[link to controller]?id="+[idTobeDeleted];
                $.ajax({
                    url: deleteLink ,
                    contentType: "application/json",
                    type: 'GET',
                    success: function (res) {
                       //res is the string returned in the controller
                        if (res === "Success!") {
                            swal({
                                title: res,
                                text: "Delete Successful!",
                                type: 'success'
                            });

                        } else {
                            swal({
                                title: res,
                                text: "Deleting record Failed!",
                                type: 'error'
                            });
                        }
                    }
                });
        });
});

推荐阅读