ajax 向 spring 控制器发送请求

Question

我正在尝试将表单数据作为 JSON 从我的 jsp 文件发送到 spring 控制器。 为此，我使用 jquery ajax post 方法来点击控制器。 我能够触摸控制器并获取 JSON。在这两个地方，即在 ajax 方法调用和控制器上，我都使用 POST 请求。但是，数据仍然显示在 url 上。以下是我的文件。

JSP页面代码：

$(document).ready(function(){
     $("#submitButton").click(function(){
         var formData=getFormData();
         var strUrl="http://localhost:8080/Test_ReportingUI/addDb.htm";
         $.post(strUrl, {jsonData: JSON.stringify(formData)},
                  function(response){
                    if(response.status=='ok') {
                      alert("ok");
                    } else {
                      alert('not OK');
                    }
                  }, 'json');
        });
});

弹簧控制器：

  @RequestMapping (value="addDb.htm", method=RequestMethod.POST)
  ModelAndView  addEditCustomer()
   {
      ModelAndView modelAndView=new ModelAndView("custDB_setup");
      System.out.println("Hello World..");

 return modelAndView;
}

我想知道为什么我在上面显示的 URL 图像中获取参数。

Answer 1

$("#submitButton").click(function(e){
  var formData=getFormData();
  var strUrl="http://localhost:8080/Test_ReportingUI/addDb.htm";
  $.post(strUrl, {jsonData: JSON.stringify(formData)},function(response){
    if(response.status=='ok') {
      alert("ok");
    } else {
      alert('not OK');
    }
  }, 'json');
  e.preventDefault(); // Use jquery style to cancel default click action of element
  return false; // Or use this line to completely cancel default action
});

我已经注释了您需要的代码行的最后两行，只需使用其中之一即可。问题是您提交按钮的默认行为。因此，您想为您的表单进行 ajax 调用。但是您的提交按钮也可以使用其默认操作。为了避免它们，您需要使用return false; 或e.preventDefault(); 来解决这个问题。在您的代码中也运行 javascript，但默认操作比异步 js 作业（ajax）更快。所以页面立即改变，你看不到你的 ajax 结果。

Answer 2

根据submitButton 元素的名称和您看到的行为做出假设，听起来您需要将事件挂钩到form 元素的submit 事件而不是按钮这样您就可以取消正在发生的标准表单提交以及您的 AJAX 请求。试试这个：

 $("form").click(function(e){
     e.preventDefault();
     var formData = getFormData();
     $.post('http://localhost:8080/Test_ReportingUI/addDb.htm', {
         jsonData: JSON.stringify(formData)
     }, function(response){
           if (response.status == 'ok') {
                alert("ok");
            } else {
                alert('not OK');
           }
      }, 'json');
 });

form 选择器是一个示例，您应该将其更改为与您的 HTML 相关。请注意，最好将FormData 或普通对象提供给data 参数，而不是手动修改您提供给JSON.stringify 的任何数据。这是因为 jQuery 会在需要时自动为您编码值。此外，根据您的示例，response.status 应该是一个布尔值。像这样的：

 $("form").click(function(e){
     e.preventDefault();
     var formData = new FormData(this);
     $.post('http://localhost:8080/Test_ReportingUI/addDb.htm', formData, function(response){
           if (response.status) {
                alert("ok");
            } else {
                alert('not OK');
           }
      }, 'json');
 });