Question

我有一个简单的html表单：

<form action="addToCart" method="post"><br><br> 

    <input name="productId"
value="${product.id}" type="hidden"> <input class="submit" onclick="addedCart()" value="<fmt:message key='AddToCart'/>"
type="submit"> 


</form>

每次点击“提交”，它都会让我直接回到顶部，这会产生糟糕的用户体验，因为用户必须向下滚动回到浏览产品的位置...我可以不使用脚本？

Answer 1

如果你想达到你想要的效果，Ajax是你最好的选择

 $('.submit').on('click',function(event){
     event.preventDefault(); //this is important else page will get submitted
     $.ajax({
      url:'where you want to process data',
      dataType:'html',
      data: your form data as json or whatever type
      success: function(result){
      //here you can update any thing on the frontside
      }
     });
    });

Answer 2

- 每次点击＆＃34;提交＆＃34;，它都会让我直接回到顶部。

是的，这是提交表单时的默认功能，它总是重新绘制dom，因此它会导致跳转并呈现页面的顶部位置。

- 这会造成糟糕的用户体验，因为用户必须向下滚动回到浏览产品的位置

为了获得良好的用户体验，您可以使用ajax来实现此功能，因为您在问题中标记了jQuery，然后您可以尝试使用jquery ajax：

$('form').submit(function(e){
    e.preventDefault(); // stops the form submission

    $.ajax({
      url:$(this).attr('action'), // action attribute of form to send the values
      type:$(this).attr('method'), // method used in the form
      data:$(this).serialize(), // data to be sent to php
      dataType:"text",
      success:function(data){
          alert(data); // you can alert the success message.
      },
      error:function(err){
          console.log(err);
      }
    });

});

我使用dataType:"text",只是假设您要从php发送echo "Added in the cart.";类消息。

Answer 3

由于您在按钮上使用了onclick属性，因此您必须将type属性从submit更改为button。这样你就可以开始使用addedCart()方法。然后在该方法中处理表单提交（如果您的提交处理程序已经存在）。

<input class="submit" onclick="addedCart()" value="<fmt:message key='AddToCart'/>" type="button">

脚本：

function addedCart(){
    // ... your method on click
    // $.ajax({...});
};

如果您不使用jQuery，则可以使用XMLHttpRequest处理表单提交：
How to make an AJAX call without jQuery?

提交html表单后如何保持相同的位置？

3 个答案: