Javascript 表单默认不工作，重定向到post url

我正在开发一个Spring启动应用程序。我有一个最喜欢的按钮，其中按钮图像根据用户是否喜欢该项目而变化

最初，我通过接受表单post请求、更新数据库并将重定向发送回Referer使其工作，但每次都会重新加载页面，因此我想尝试使用jQueryAjax

Controller.java：

//     //Favorite/Unfavorite existing recipes
//    @RequestMapping(value = "/recipes/{id}/favorite", method = RequestMethod.POST)
//    public String favoriteRecipe(@PathVariable Long id, Model model, HttpServletRequest request, Authentication
//            authentication) {
//
//        User user = userService.findByUsername(authentication.getName());
//        model.addAttribute("user", user);
//        Recipe recipe = recipeService.findById(id);
//
//        userService.toggleFavorite(user, recipe);
//
//        userService.save(user);
//
//        return "redirect:" + request.getHeader("Referer");
//    }

    // Favorite/Unfavorite existing recipes
    @PostMapping("/recipes/{id}/favorite")
    @ResponseStatus(value = HttpStatus.OK)
    public void favoriteRecipe(@PathVariable("id") Long id, Model model, Authentication authentication) {
        User user = userService.findByUsername(authentication.getName());
        //model.addAttribute("user", user);
        Recipe recipe = recipeService.findById(id);

        userService.toggleFavorite(user, recipe);

        userService.save(user);

        //return new ResponseEntity<>(HttpStatus.OK);
    }

这是我在app.js中尝试实现的方式。我已确认数据库中的数据正在更新，但我无法停止重定向到POST url。这个问题似乎来自于th：形式上的行动

我已经看过了很多其他的问题/例子，但还没有弄清楚为什么会发生这种情况。我尝试过使用preventdefault，返回false，并将其包装在$（document）.ready（）中

---

任何帮助都将不胜感激。谢谢

有两个嵌套提交是不好的。而且我不确定在双数组中包装

[[${recipe.id}]]

的想法是什么

尝试：

$（“#测试”）。关于（“提交”，函数（e）{
e、 预防默认值（）；
$.post（this.action，function（data）{
控制台日志（数据）；
});
});

其中，

this.action

是实际表单的action属性值

{{|/recipes/${recipe.id}/favorite}

你再也不需要按钮了

除了回答这个问题外，您还必须找到一个刷新ui的解决方案，以便在不刷新整个页面的情况下更改按钮图像，因为您使用的是服务器端呈现模板引擎。 我建议您在成功响应后更改按钮的图像，如下所示：

$('#test').on("submit", function (e) {
    e.preventDefault();
    $.post(this.action, function(data) {
        console.log(data);
        var imageUrl = (data.favorited)?'/assets/images/favorited.svg':'/assets/images/favorite.svg'; 
        $('#favorite-button-index>img').attr('src', imageUrl);
    });
};

同样在本例中，为了使

数据.favorited

工作，您应该从spring controller方法返回一个关于用户是否有收藏的数据。下面是一个返回json数据的示例，以便您可以轻松地在javascript中使用：

@PostMapping("/recipes/{id}/favorite")
@ResponseBody
public Map<String, Object> favoriteRecipe(@PathVariable("id") Long id, Authentication authentication) {
    User user = userService.findByUsername(authentication.getName());

    Recipe recipe = recipeService.findById(id);
    userService.toggleFavorite(user, recipe);

    userService.save(user);

    boolean hasFavorite = recipe.userFavorites.contains(authentication.getName());

    Map<String, Object> resultJson = new HashMap<>();
    resultJson.put("favorited", hasFavorite);

    return resultJson;
}

@PostMapping（“/recipes/{id}/favorite”）
@应答器
公共映射favoriteRecipe（@PathVariable（“id”）长id，身份验证）{
User=userService.findByUsername（authentication.getName（））；
Recipe Recipe=recipeService.findById（id）；
toggleFavorite（用户，配方）；
userService.save（用户）；
boolean hasFavorite=recipe.userFavorites.contains（authentication.getName（））；
Map resultJson=new HashMap（）；
结果json.put（“favorited”，hasFavorite）；
返回resultJson；
}

owo您在

.submit（）

中有哪些

.submit（）

。当有人点击你的提交按钮时，它将提交你的表格，而内部的一个根本不需要。因此，您不需要

$（“#收藏夹按钮详细信息”）。提交

非常感谢，这解决了我的重定向问题。另外，我无意中输入了双数组。哈哈。非常感谢您的后续回复。这将是我的下一个挑战。这是关于我应该如何处理这个问题的非常有用的信息。

$('#test').on("submit", function (e) {
    e.preventDefault();
    $.post(this.action, function(data) {
        console.log(data);
        var imageUrl = (data.favorited)?'/assets/images/favorited.svg':'/assets/images/favorite.svg'; 
        $('#favorite-button-index>img').attr('src', imageUrl);
    });
};

@PostMapping("/recipes/{id}/favorite")
@ResponseBody
public Map<String, Object> favoriteRecipe(@PathVariable("id") Long id, Authentication authentication) {
    User user = userService.findByUsername(authentication.getName());

    Recipe recipe = recipeService.findById(id);
    userService.toggleFavorite(user, recipe);

    userService.save(user);

    boolean hasFavorite = recipe.userFavorites.contains(authentication.getName());

    Map<String, Object> resultJson = new HashMap<>();
    resultJson.put("favorited", hasFavorite);

    return resultJson;
}