不加载页面

Question

当我单击一个按钮时，我应该转到 eventpage（是的，我的模板文件夹中有一个 eventpage 模板）。为什么不加载？以下是我的代码片段。$('.events').on("click", function() {    var eventName = $(this).val();    $.ajax({        type: 'POST',        url : '/eventpage',        data : {'eventName' : eventName},        success : function(data) {        }    });});@RequestMapping(value = "/eventpage")public String eventPage(@RequestParam("eventName") String eventName, Model model) {    for(Event e : EventRegistrationSystemApplication.events) {        if(e.getName().equals(eventName)) {            model.addAttribute("event", e);            break;        }    }    return "eventpage";}发生的事情是我应该去的页面正在这里加载： 

Answer 1

我相信您可能已经混淆了异步请求和同步请求，您可以查看这篇文章以了解更多信息。您还应该使用 GET 请求来加载页面（不是 POST）。Post 请求通常用于将表单数据发送到后端，而 GET 请求则用于获取数据（如从 API）或加载页面（除非它是 Web 应用程序）。

您可以按照 Alex Davies 的建议使用 Javascript（而不是 Ajax）进行页面更改。您还可以将 @RequestMapping 更改为@GetMapping ("/eventpage") 以对 Spring 使用更直接的方法。

Answer 2

您正在使用的 Ajax 请求实际上是向该 url 发布请求，而不是加载网页。如果您想加载网页，window.location.href="/eventpage?eventName=" + eventName请在您的 JavaScript 中使用。

Answer 3

根据屏幕截图 (ibb.co/ZSXDBpG)，后调用中缺少标头和令牌。

$('.events').on("click", function() {

    var token = $("meta[name='_csrf']").attr("content");

    var header = $("meta[name='_csrf_header']").attr("content");

    var eventName = $(this).val();

    $.ajax({

        type: 'POST',

        url : '/eventpage',

        data : {'eventName' : eventName},

        beforeSend: function(xhr) {

            xhr.setRequestHeader(header, token);

        },

        success : function(data) {

            console.log(data);

        }

    });

});

更改后，请检查您的控制台。还要检查“预览”和“响应”。希望这可以帮助！！