javascript - 当我提交表单时页面发生变化

Question

<form action="/devilmaycry/register?action=addtocart" method="post">            
           <input type="hidden" name="user" value="<%=user%>"/>
           <input type="hidden" name="pid" value="<%=pid%>"/>
           <input type="submit" value="Add to cart" onclick="add();"/>
         </form> 

我正在使用上面的代码提交表单并将产品添加到购物车 其调用的java代码如下:

 else if(n.equals("addtocart"))
  {
      String user = req.getParameter("user");
      int pid = Integer.parseInt(req.getParameter("pid"));

      k=o.addintocart(user,pid);

     if(k==1)
      {
          pw.println("<h3>Added to cart !!!<h3>");
      }
      else
      {
          pw.println("<h3>Errror , try again <h3><br>");
      }  

它确实将产品添加到表中，但它更改了 jsp 页面...我尝试使用 requestDispatcher 但 URL 有很多参数，所以我想要其他东西，通过它我可以保留相同的内容页面并更新表格

Answer 1

为了保持在同一页面上，您需要使用 AJAX，而不是以传统方式提交表单。 HTTP 以请求-响应方式工作，因此当用户提交表单时，浏览器期望从服务器接收响应中的新页面，因此将刷新页面并呈现它接收到的新 HTML。

这里有两个选择:

1. 坚持传统的HTTP表单提交请求-响应方式，当服务器收到向卡片添加项目的请求时，将项目添加到卡片后，重建页面的URL即向用户显示信息。在这种情况下，使用“Redirect-After-Post”方法非常重要(即在对表单 POST 的响应中，您将重定向到该页面)。否则，如果用户按 F5 刷新页面，表单数据将重新提交，商品将再次添加到购物车。

2. 采用 AJAX 方法。在add()函数中，您需要使用Javascript提交表单。如果您使用 JQuery，那么您可以很轻松地做到这一点。如果您四处搜索，就会发现各种问题/示例，例如 here .

在后一种情况下，您将需要稍微更改处理 Servlet 中的信息的方式，但这是让浏览器保持在同一页面上(无需重新加载)的唯一方法。您还拥有success 和error 处理程序，您可以使用它们在屏幕上显示消息以显示结果。