如何不重定向RequestMapping方法到任何視圖

Question

我有一個表單，當我提交時，我想保持在同一頁面上。我只想對待發送到服務器的信息並保持在同一頁面上。

爲此，我有以下形式：

<form action='adicionaLoja' method='post'> 
<input type='text' autocomplete='off' name='nome'/> 
<button type='submit' id='saveStore' class='btn' value='Save'>Save</button> 
<input type=hidden name='xValue'/><input type=hidden name='yValue'/></form> 

這裏的地方我處理數據：

@RequestMapping("adicionaLoja") 
public void adiciona(Loja loja) { 
     System.out.println("adicionou - " + loja.getNome() + " X: " + loja.getxValue() + " Y: " + loja.getyValue()); 
} 

有了這個代碼，當我點擊提交按鈕，服務器嘗試重定向到adicionaLoja.jsp。但是我沒有創建這個文件，我只想點擊提交按鈕並保持在同一頁面上。我試圖返回表單創建頁面的名稱，但這樣頁面重新加載，我也不想重新加載它，只是想將請求發送到服務器。

我該怎麼辦？

編輯： 我的Java腳本文件：

var form = $('#submitLoja'); 

     form.find('submit:first').click(function() { 
     $.ajax({ 
      type: "POST", 
      url: "adicionaLoja", 
      data: form.serialize(), 
      success: function(response) { 
      console.log(response); 
      } 
     }); 
     }); 

我的表格（請注意，這種形式的聲明在同一個js文件我已經聲明提交點擊事件）：

<form action='adicionaLoja' id='submitLoja' method='post'><input type='text' autocomplete='off' name='nome'/> 
<button type='submit' id='saveStore' class='btn' value='Save'>Save</button> 
<input type=hidden name='xValue'/><input type=hidden name='yValue'/></form> 

下面是服務器端：

@RequestMapping("adicionaLoja") 
    @ResponseBody 
    public void adiciona(Loja loja) { 
     System.out.println("adicionou - " + loja.getNome() + " X: " + loja.getxValue() + " Y: " + loja.getyValue()); 
    } 

完整的JavaScript文件：

$(document).ready(function(){ 


    $('.ImgMapa').popover({ 
     html: true, 
     trigger: 'manual', 
     title: "<form id='submitLoja' method='post'><input type='text' autocomplete='off' data-provide='typeahead' data-items='4' name='nome' data-source='[&quot;Alabama&quot;,&quot;Alaska&quot;,&quot;Arizona&quot;,&quot;Arkansas&quot;,&quot;California&quot;,&quot;Colorado&quot;,&quot;Connecticut&quot;,&quot;Delaware&quot;,&quot;Florida&quot;,&quot;Georgia&quot;,&quot;Hawaii&quot;,&quot;Idaho&quot;,&quot;Illinois&quot;,&quot;Indiana&quot;,&quot;Iowa&quot;,&quot;Kansas&quot;,&quot;Kentucky&quot;,&quot;Louisiana&quot;,&quot;Maine&quot;,&quot;Maryland&quot;,&quot;Massachusetts&quot;,&quot;Michigan&quot;,&quot;Minnesota&quot;,&quot;Mississippi&quot;,&quot;Missouri&quot;,&quot;Montana&quot;,&quot;Nebraska&quot;,&quot;Nevada&quot;,&quot;New Hampshire&quot;,&quot;New Jersey&quot;,&quot;New Mexico&quot;,&quot;New York&quot;,&quot;North Dakota&quot;,&quot;North Carolina&quot;,&quot;Ohio&quot;,&quot;Oklahoma&quot;,&quot;Oregon&quot;,&quot;Pennsylvania&quot;,&quot;Rhode Island&quot;,&quot;South Carolina&quot;,&quot;South Dakota&quot;,&quot;Tennessee&quot;,&quot;Texas&quot;,&quot;Utah&quot;,&quot;Vermont&quot;,&quot;Virginia&quot;,&quot;Washington&quot;,&quot;West Virginia&quot;,&quot;Wisconsin&quot;,&quot;Wyoming&quot;]'/>" 
      + "<button type='submit' id='saveStore' class='btn' value='Save'>Save</button><input type=hidden name='xValue'/><input type=hidden name='yValue'/></form>" 
    }); 

     $("#submitLoja").submit(function(event) { 
      alert("oie"); 

      return false; 
     }); 


}); 

// Function to show popover on the image mouse click 
$(function() { 
    var xMousePos = 0; 
    var yMousePos = 0; 
    var lastScrolledLeft = 0; 
    var lastScrolledTop = 0; 

    // Manages the page scrolling and add X and Y when the page is scrolled 
    $(window).scroll(function(event) { 
     if (lastScrolledLeft != $(document).scrollLeft()) { 
      xMousePos -= lastScrolledLeft; 
      lastScrolledLeft = $(document).scrollLeft(); 
      xMousePos += lastScrolledLeft; 
     } 
     if (lastScrolledTop != $(document).scrollTop()) { 
      yMousePos -= lastScrolledTop; 
      lastScrolledTop = $(document).scrollTop(); 
      yMousePos += lastScrolledTop; 
     } 
    }); 

    function captureMousePosition(event) { 
     xMousePos = event.pageX; 
     yMousePos = event.pageY; 
    } 

    $('.ImgMapa').click(function(e) { 
     $(this).popover('show');//this is used to correct the popover location on the first time click 

     captureMousePosition(e); 
     var offset = $(this).offset(); 
     var left = xMousePos; 
     var top = yMousePos; 
     var theHeight = $('.popover').height(); 

     //http://jsfiddle.net/2EBGE/1/ 
     $('.popover').css('cssText', 'left: ' + (left+10) + 'px !important; top: ' + (top-(theHeight/2)-10) + 'px !important'); 

     $(this).popover('show'); 

     $("input[name='xValue']").val(xMousePos); 
     $("input[name='yValue']").val(yMousePos); 
    }); 

    // Hide popover when ESCAPE key is pressed 
    $(document).keydown(function(e) { 
     if (e.keyCode === 27) 
      $('.ImgMapa').popover('hide'); 
    }); 
}); 

Answer 1

當您提交表單時，瀏覽器希望服務器發送一個HTML頁面並顯示返回的HTML。如果你想留在同一頁面上，你應該使用AJAX請求提交表單。例如見Submit form using AJAX and jQuery如何做到這一點。

你仍然必須告訴Spring不要轉發到adicionaLola.jsp。你可以這樣做using the @ResponseBody annotation。