Ajax 没有正确响应答案

【问题标题】：Ajax does not respond correctlyAjax 没有正确响应
【发布时间】：2016-10-13 20:50:17
【问题描述】：

我正在尝试从 thymleaf 页面发出 Ajax 请求。我见过this。

这是我的html页面：

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></link>
    <script>
        function sendURL() {
            var url = '/updatePing';
            console.log("URI sent :)")  

            $("#resultsBlock").load(url);
        }
    </script>
</head>
<body>

  <div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">Ping setup</div>
        <div class="panel-body">
            <form class="form-horizontal" th:object="${ping}" th:method="post" th:action="@{/updatePing}">
              bla
              bla 
              bla
              <button id="submit-button" type="submit" class="btn btn-default" onclick="sendURL()">Submit</button>
            </form>
        </div>
    </div>
  <div id="resultsBlock">
  </div>

  </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

我希望在按下按钮后调用 js 函数 (sendURL())，然后将参数发送到我的控制器。这部分也可以正常工作

但是来自控制器的答案不在<div id="resultsBlock">

这是我的控制器：

@RequestMapping(value="/updatePing", method=RequestMethod.POST)
    public String updatePing(@ModelAttribute PingDTO pingDTO) throws  Exception{
        PingRequestValidation pv=new PingRequestValidation();
        if(pv.checkPingRequestValidation(pingDTO.getUrl())){

            return "fragments/success";
        }
        else
            return "fragments/failure"; 
    }

问题是，控制器准确呈现成功和失败页面，同时我希望这些片段会出现在主页的resultsBlock标签中。

那么我该如何解决这个问题呢？

【问题讨论】：

当表单提交页面将重新加载。
您是说您不需要从表单发送的任何内容吗？如果没有......甚至不需要使用表格。否则使用 ajax 提交整个表单并阻止默认提交
@charlietfl 好的，我将类型更改为按钮，但现在出现 405 错误。我想，我正在以错误的方式使用 js 发送发布请求。你能给我一个提示吗？

标签： javascript java jquery ajax

【解决方案1】：

要使用 ajax 提交整个表单，请移除 onclick on 按钮并使用 jQuery 创建提交处理程序

$(function(){
   $('#formId').on('submit', function(event){
       event.preventDefault();// stop browser submitting from
       var data = $(this).serialize();
       $.post('/updatePing', data , function(response){
             $("#resultsBlock").html(response);
       }).fail(function(){
             alert('Something went wrong')
       });
   });
});

【讨论】：