来自java中javascript的请求

Question

我尝试通过 JScript 从 html 向 java 发送两个参数： 1.名称SelectedWhisky 2.数量选择威士忌

function buyFromJS() {
   //
   // $.getJSON("buySuccessfulWhisky",
   //     {
   //         nameSelectedWhisky:$('#nameWhiskey').val(),
   //         quantitySelectedWhisky:$('#numberOrderWhisky').val()
   //     },
   //     function() {
   //         window.location.href = "warehouseWhisky";
      
   //     }   );
   //}

    var nameSelectedWhisky = $('#nameWhiskey').val();
    var quantitySelectedWhisky = $('#numberOrderWhisky').val();
    $.ajax({   
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json"
        },
        type: "POST", 
        data: JSON.stringify(nameSelectedWhisky.id, quantitySelectedWhisky.id),

        url: '/buySuccessfulWhisky',
        success: function (msg) {  
            window.location.href = "warehouseWhisky";
        },
        error:function(){
            alert("ERROR");
        }
    })
}

<form id="buySelectedWhiskyThroughJavaScript" method="post">

    <tr th:each="buySelectedWhisky : ${buySelectedWhisky}">
        <td align="center">
            <img th:attr="src=${buySelectedWhisky.photo}" width="150" height="250"/>Photo</td>

        <td align="center" th:text="${buySelectedWhisky.nameWhisky}">Name</td>

        <td align="center" th:text="${buySelectedWhisky.describeWhisky}">Describe</td>

        <td align="center" width="100">
            <input type="number" style="width: 100px" min="1" th:attr="max=${buySelectedWhisky.quantityWhisky}"
       placeholder="Enter quantity" name="numberOrderWhisky" id="numberOrderWhisky"/>
        </td>

        <td align="center" th:text="${buySelectedWhisky.price}">Price</td>

        <td align="center">
                <input type="hidden" name="nameWhiskey" id="nameWhiskey" th:value="${buySelectedWhisky.nameWhisky}"/>
                <!--<input type="hidden" name="quantityWhiskeyInDB" id="quantityWhiskeyInDB" th:value="${buySelectedWhisky.quantityWhisky}"/>-->
                <input type="button" class="buttons" onclick="buyFromJS()" name="buttonBuyWhiskey" style="width: 60px" value="Buy"/> </td>
    </tr>
    </form>

我添加了两个版本的 JavaScript 1 版本使用 $.getJSON("buySuccessfulWhisky" 此版本正在运行，java 接收所有参数，但此版本未更新页面 window.location.href = "仓库威士忌"; 如果我尝试在 "warehouseWhisky" 之后添加 location.reload()，则会更新“buySuccessfulWhisky”而不是“warehouseWhisky”。因为如果我不更新页面“warehouseWhisky”，我会看到错误的未更新信息。如果我“以手动模式”更新页面 - 一切正常。

如何正确更新“warehouseWhisky”页面？

1. 通过 AJAX 的下一个代码 没有向 java 发送信息

从 JScript 接收的 Java 代码

@Controller
public class SuccessfulBuyWhiskey {

@RequestMapping(value = "buySuccessfulWhisky", method = {RequestMethod.GET, RequestMethod.POST})
public ModelAndView view(@RequestParam("nameSelectedWhisky")String name,
                         @RequestParam("quantitySelectedWhisky")Integer quantityOrder) {

    System.out.println("Name: = "+name);
    System.out.println("Quantity: = "+quantityOrder);

Answer 1

    function sendBuyWhiskyInJava(){
        $('#buySelectedWhiskyThroughJavaScript').submit(function(e){
            e.preventDefault();

            $.ajax({  
                type: "POST", 
                url: '/buySuccessfulWhisky',
                data: {
                    nameSelectedWhisky: $("#nameWhiskey").val(),
                quantitySelectedWhisky: $("#numberOrderWhisky").val()
        },
                success: function(data) {  
                    window.location.href = "warehouseWhisky";
                    console.log(data)
                }
        })
    })
}