Question

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

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');
        });
});

Spring控制器：

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

 return modelAndView;
}

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

Answer 1

根据submitButton元素的名称和您看到的行为做出假设，听起来您需要将事件挂钩到submit form事件}元素而不是按钮，以便您可以取消正在发生的标准表单提交以及您的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');
 });

Answer 2

$("#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但默认操作比async js job（ajax）更快。因此页面立即更改，您无法看到您的ajax结果。

ajax发布请求弹簧控制器

2 个答案: