フォームがあり、それを送信するとき、同じページにとどまりたいです。サーバーに送信された情報を処理し、同じページに留まりたいだけです。
このために、私はフォームを持っています：
<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='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'/>"
+ "<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');
});
});