javascript - Spring MVC 中的 Ajax post 请求

Question

我目前正在尝试从 JavaScript onchange 处理程序调用 ajax 请求来调用 Spring MVC Controller 。我相信我当前在我的 View 中调用 URL 的方式是错误的，因为当触发事件并调用 url 时，我在浏览器上收到 404 错误。如果我的所有设置都正确的话，有人可以照亮我吗？

这是我的代码:

@Controller
public class DataTableController 
{     
    @RequestMapping(value = "/table", method = RequestMethod.GET)
    public String home(Model model) throws JsonGenerationException, JsonMappingException, IOException 
    {
        List<String> gpnList = new ArrayList<GPN>();
        gpnList.add("GPN-1"); gpnList.add("GPN-2"); gpnList.add("GPN-3"); 
        model.addAttribute("gpnList", mapper.writeValueAsString(gpnList)); 
        return "index"; //name of my view
    }
    
    @RequestMapping(value = "/getsector", method = RequestMethod.POST)
    public @ResponseBody String getSector(@RequestParam("market")String market) throws JsonGenerationException, JsonMappingException, IOException
    {
        List<String> sectors = new ArrayList<String>();
        sectors.add("Auto"); sectors.add("Industrial"); sectors.add("Analog");
        ObjectMapper mapper = new ObjectMapper();
        return mapper.writeValueAsString(sectors);
    }
}

Jquery 代码:

$(document).ready(function()
{
    document.getElementById("markets").onchange =  function()
    { 
        var market = $("select[id='markets'").find('option:selected').text();
        var filters = { "market" : market }
        filters = JSON.stringify(filters);

        $.ajax({
            url: "/getsector",
            type: "POST",
            dataType : 'json',
            contentType : "application/json",
            data: JSON.stringify(filters),
            success: function(response) 
            {
                console.log("sucess!");
            },
            error: function(e){
                console.log("ERROR: ", e);
            }
        });
    }
}); 

我想要实现的主要目标是能够通过 ajax 调用来调用我的 Controller 。有关 Spring Controller 映射和约定的任何其他提示将不胜感激。

Answer 1

如果您请求信息，您应该使用 GET 请求，而不是 POST。

您正在将 @RequestParam 与 json 负载混合。如果您想将过滤器作为请求参数接收，则必须使用 url，而不是作为 json 有效负载，使用如下内容:

$(document).ready(function()
{
    document.getElementById("markets").onchange =  function()
    { 
        var market = $("select[id='markets'").find('option:selected').text();

        $.ajax({
            url: "/getsector?market="+market,
            type: "GET",
            success: function(response) 
            {
                console.log("sucess!");
            },
            error: function(e){
                console.log("ERROR: ", e);
            }
        });
    }
}); 

@RequestMapping(value = "/getsector", method = RequestMethod.GET)
public @ResponseBody String getSector(@RequestParam("market")String market) throws JsonGenerationException, JsonMappingException, IOException
{
  .... your logic.
}

另一方面，如果您确实想使用带有 json 有效负载的 POST 请求，则需要在 Controller 中使用 @RequestBody 并将 json 对象绑定(bind)到具有相同属性的 bean。

@RequestMapping(value = "/getsector", method = RequestMethod.POST)
public @ResponseBody String getSector(@RequestBody Market market) throws JsonGenerationException, JsonMappingException, IOException
{
    List<String> sectors = new ArrayList<String>();
    sectors.add("Auto"); sectors.add("Industrial"); sectors.add("Analog");
    return sectors;
}


public class Market
{
  String market;

  //getter and setter...
}

请记住，您的 JavaScript 也是错误的，您使用了 JSON.stringify 两次。

如果您使用@ResponseBody并且spring配置良好，它会在返回响应时为您进行序列化，因此您不必手动执行此操作。

此代码尚未经过测试，仅供您了解。