Ajax：我如何控制 Ajax 帖子的点击次数？答案

【问题标题】：Ajax: How do I control which click the Ajax posts on?Ajax：我如何控制 Ajax 帖子的点击次数？
【发布时间】：2012-12-28 07:56:18
【问题描述】：

您好，我有一个 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>

【问题讨论】：

标记为“jquey” - jQuery 在哪里？
此外，没有“Ajax 表单”之类的东西。可以截获表单的提交，从而可以利用表单派生数据进行 Ajax 请求。一旦你掌握了这一点，你就可以很好地回答你自己的问题了。

标签： asp.net html ajax

【解决方案1】：

我的建议是使用 ajax 和 jquery。下面的代码可能对你有帮助。

<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>

【讨论】：

谢谢 shah，我会看看我能不能让它工作，我想我需要更多地了解 ajax。
我无法完成这项工作，我已经添加了它，但是当我点击其他按钮时它仍然会发布

【解决方案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 元素的自然动作。

【讨论】：