编辑---使用Ajax的新代码

Question

这是剧本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
                function addedCart() {
      document.getElementById("msgs-box").innerHTML = "Item added successfully to cart";
      setTimeout(function() {
        $('#msgs-box').html('');
      }, 6000);
    }
               </script>

表格：

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

问题：

当我放type="submit"并点击"addToCart"时，会触发脚本并显示消息，但时间不起作用。无论我将3秒（3000）还是30秒（30 000）作为时间值，脚本都无法正确播放时间。消息将会出现并消失。

另一方面，当我放type="button"并点击"addToCart"时，脚本开始显示，消息显示，脚本正在播放时间但值不会发送到cart.jsp。

我该如何解决这个问题？我需要将值发送到购物车，我需要脚本工作并正确地玩时间。

编辑---使用Ajax的新代码

    var $msgBox = $('#msgs-box');

function addedCart() {

    event.preventDefault(); // Prevent default Form Submit Action

    $msgBox.html("Item added successfully to cart");
    setTimeout(function() {
        $msgBox.html('');
    }, 6000);

    $.ajax({
       url : 'cart.jsp',
       data: $("#cartForm").serialize(), // (tip: assign and use an ID for your form)
       success: function( addedCart ) {
         alert( "Item added successfully to cart", addedCart);
       }
    });

}

HTML：

<form id="cartForm" 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">

Answer 1

您的表单，type="submit"输入的原因正在提交，触发请求，标题后面等等。
为了防止这种情况，只需访问event并阻止它触发默认操作：

var $msgBox = $('#msgs-box');

function addedCart() {

    event.preventDefault(); // Prevent default Form Submit Action

    $msgBox.html("Item added successfully to cart");
    setTimeout(function() {
        $msgBox.html('');
    }, 6000);

    // Send data to server with AJAX here...

}

由于现在表单数据尚未提交，您可以使用AJAX将序列化的data转发到您的服务器。

一个例子是：

    // Send data to server with AJAX here...
    $.ajax({
       url : 'addToCartHandler.php',
       data: $("form").serialize(), // (tip: assign and use an ID for your form)
       success: function( response ) {
         alert( "This is my php response: "+ response );
       }
    });

如何使用html表单使setTimeout脚本正常工作？

编辑---使用Ajax的新代码

1 个答案: