Question

您好我有一个Ajax表单需要在单击下面的按钮时发布：

<div id="divaddtocartbtn">
     <input type="image" class="buynow" id="imgaddtocart" alt="Add to Cart" src="http://static.e-talemedia.net/content/images/odditiesaddtobasketbutton.png" />
</div>

但是我也有一个计数器如下：

<div class="box">
   <label for="qty">
   <abbr title="Quantity">Qty</abbr></label>
    <input id="qty" value="0" />
    <button id="down" onclick="modify_qty(-1)">-1</button>
    <button id="up" onclick="modify_qty(1)">+1</button>
</div>

http://www.codecademy.com/courses/a-simple-counter/0#!/exercises/0 - 简单的计数器

然而，因为这是在Ajax表单中，当我尝试单击+和 - 来增加/减少计数器时，会发生Ajax发布。我如何分离输入，以便Ajax帖子只发生在添加到篮子点击？

我在想我需要将计数器放在Ajax表单之外，但我需要获取在ajax帖子中选择的数量。

Ajax.BeginForm("ThreeInOneBin2", new AjaxOptions() {
    HttpMethod = "POST"
});

请参阅下面的完整代码：

<div class="ThreeInOneBin2middle">
            <ul>
                <% if (Model.ProductNotFound)
                   { %>
                <!-- List the retailers as we have none in stock -->
                <%= Html.WidgetProductNotFoundList(Model) %>
                <% }
                   else
                   { %>
                <% using (Html.BeginForm())
                   {%>
                <%= Html.AntiForgeryToken() %>
                <%= Html.WidgetProductFoundListThreeStageBin2(Model)%>
                <div class="stepFour">
                    <% if (string.IsNullOrEmpty(ViewBag.Confirmation))
                       {
                           Ajax.BeginForm("ThreeInOneBin2", new AjaxOptions()
                                                          {

                                                              HttpMethod = "POST"
                                                          });
                           { %>
                    <img src="http://static.e-talemedia.net/content/images/DoveStep3message.png" alt="" />

                   <%-- This is the quantity--%>
                    <div class="box">
                        <label for="qty">
                            <abbr title="Quantity">
                                Qty</abbr></label>
                        <input id="qty" value="0" />
                        <button id="down" onclick="modify_qty(-1)">
                            -1</button>
                        <button id="up" onclick="modify_qty(1)">
                            +1</button>
                    </div>
                    <div id="uandp">
                        <p>
                            <input type="text" name="username" class="txtUsername" id="email" value="Username" />
                            <%= Html.ValidationMessage("Email", "Please enter a valid Email") %>
                        </p>
                        <p>
                            <input type="password" name="password" class="txtPassword" value="Password" />
                        </p>
                    </div>
                    <div id="rightaddtocart">
                        <div id="divaddtocartbtn">
                            <input type="image" class="buynow" id="imgaddtocart" alt="Add to Cart" src="http://static.e-talemedia.net/content/images/odditiesaddtobasketbutton.png" />
                        </div>
                    </div>
                    <% } %>
                    <% }
                       else
                       { %>
                    <p>
                        <%-- <%= ViewBag.Confirmation %>--%>
                        <img class="divAdded" src="http://static.e-talemedia.net/content/images/Basketmessage.png"
                            alt="Added to Basket" />
                    </p>
                    <% } %>
                </div>
                <% } %>
                <% } %>
            </ul>
        </div>

Answer 1

我的建议是在jquery中使用ajax。下面的代码可能对您有所帮助。

<script>

$("#imgaddtocart").click(function(event) {

event.preventDefault(); 

var myForm = $(this).parent( 'form:first' );
var url = myForm.attr("action");

$.ajax({
    type: "POST",
    url: url,
    dataType: "json",
    data:myForm.serialize(),

    success:function(data)
    {
        alert(data.message);
    },
    error:function()
    {
        alert("error");
    }
}); 
/*End : Ajax*/


});
</script>

Answer 2

浏览器假设表单中的任何<button></button>都是提交按钮。这些按钮将提交表格，除非采取措施使其表现不同。

最好在javascript / jQuery中附加事件处理程序，而不是在HTML中。

您应该从“+”和“ - ”按钮获得正确的行为，如下所示：

HTML：

<button id="down">-1</button>
<button id="up">+1</button>

的javascript：

$("#down").on('click', function(event){
    event.preventDefault();
    modify_qty(-1);
});
$("#up").on('click', function(event){
    event.preventDefault();
    modify_qty(1);
});

event.preventDefault()是一个jQuery命令，它可以抑制DOM元素的自然动作。

Ajax：我如何控制Ajax发布的点击？

2 个答案: