1

我有一个表格，当我提交它时，我想保持在同一页面上。我只想处理发送到服务器的信息并保持在同一页面上。

为此，我有以下表格：

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

1 回答 1

2

当您提交表单时，浏览器希望服务器返回一个 HTML 页面并显示返回的 HTML。如果您想留在同一页面上，您应该使用 AJAX 请求提交表单。请参阅使用 AJAX 和 jQuery 提交表单以了解如何执行此操作。

您仍然需要告诉 Spring 不要转发到 adicionaLola.jsp。您可以使用 @ResponseBody 注释来做到这一点。

于 2013-03-10T15:28:40.357 回答