1

这是在我的标题中，jquery.min.js 已经包含：

<script type="text/javascript">
//<![CDATA[
$(function() {
    $("form.ajax").submit(function(e) {
        var $this = $(this);
        e.preventDefault();

        $.ajax({
            url: 'index.php',
            type: 'post',
            data: $this.serialize(),
            success: function() {
                //alert(response);
            }
        })

        return false;
    });
});
//]]>
</script>

这是一个动态生成的示例表单：

<form id="dash_73" method="post" class="ajax"> 
<fieldset> 
<input type="hidden" name="action" value="ajax_purchase_ticket" /> 
<input type="hidden" name="lottery_id" value="73" /> 
<div class="left1"> 
<button type="submit" name="dash" form="dash_73" id="button_73-1" value="1" class="ticket taken" disabled="disabled">User 1</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-2" value="2" class="ticket taken" disabled="disabled">User 1</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-3" value="3" class="ticket taken" disabled="disabled">User 1</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-4" value="4" class="ticket taken" disabled="disabled">User 1</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-5" value="5" class="ticket free">5 Dash</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-6" value="6" class="ticket taken" disabled="disabled">User 2</button> 
<br /> 
</div> 
<div class="left2"> 
<button type="submit" name="dash" form="dash_73" id="button_73-7" value="7" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-8" value="8" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-9" value="9" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-10" value="10" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-11" value="11" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-12" value="12" class="ticket taken" disabled="disabled">User 2</button> 
<br /> 
</div> 
<div class="left3"> 
<button type="submit" name="dash" form="dash_73" id="button_73-13" value="13" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-14" value="14" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-15" value="15" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-16" value="16" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-17" value="17" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-18" value="18" class="ticket taken" disabled="disabled">User 2</button> 
<br /> 
</div> 
<div class="left4"> 
<button type="submit" name="dash" form="dash_73" id="button_73-19" value="19" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-20" value="20" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-21" value="21" class="ticket taken" disabled="disabled">User 1</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-22" value="22" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-23" value="23" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-24" value="24" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
</div> 
<div class="left5"> 
<button type="submit" name="dash" form="dash_73" id="button_73-25" value="25" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-26" value="26" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-27" value="27" class="ticket yours" disabled="disabled">User 3</button> 
<br /> 
<button type="submit" name="dash" form="dash_73" id="button_73-28" value="28" class="ticket yours" disabled="disabled">User 3</button> 
<br />
</div>
</fieldset>
</form>

目前，当我单击按钮购买机票时，没有任何反应。我试图拥有它，所以当按下按钮时，它将运行代码。我仍在尝试制定有关如何检索成功或失败的响应方法。任何帮助表示赞赏。

更新：没有 Ajax，代码按要求运行。正如 Kevin 所指出的，我相信问题在于按钮值没有被提交，这就是为什么看起来什么都没有发生，因为按钮值是必需的。寻找如何包含按钮值。

更新2：这是对我有用的成功/失败消息的最终代码。

<script type="text/javascript">
//<![CDATA[
$(function() {
    $('button[name="dash"]').click(function (e) {
        e.preventDefault();
        var id = this.id;
        var $formElem = $(this).closest('form');
        var formData = $formElem.serializeArray();
        formData.push({
            name: this.name,
            value: this.value
        });
        // if you want to submit the 'form' attribute of the button as well ...
        formData.push({
            name: 'form',
            value: $(this).attr('form')
        });
        $.ajax({
            url: 'index.php',
            type: 'post',
            data: formData, 
            success: function (data) {
                if ( data.completed == 1 )
                {
                    data.message = data.message + '<br />' + data.completed_message;
                }

                $("#centerpoint").hide();
                $("#centerpoint").show();

                if ( data.result == 1 )
                {
                    $('#' + id).attr("disabled", "disabled");
                    $('#' + id).removeClass("free").addClass("yours");
                    $('#' + id).text(data.buyer);
                    $('#ajax_message').replaceWith('<div class="form_message success" id="ajax_message">' + data.message + '</div>');
                    $("#centerpoint").delay(5000).slideUp();
                }
                else if ( data.result == 2 )
                {
                    $('#' + id).attr("disabled", "disabled");
                    $('#' + id).removeClass("free").addClass("taken");
                    $('#' + id).text(data.buyer);
                    $('#ajax_message').replaceWith('<div class="form_message error" id="ajax_message">' + data.message + '</div>');
                    $("#centerpoint").delay(5000).slideUp();
                }
                else if ( data.result == 3 )
                {
                    $('#ajax_message').replaceWith('<div class="form_message error" id="ajax_message">' + data.message + '</div>');
                    $("#centerpoint").delay(5000).slideUp();
                }
                else
                {
                    $('#ajax_message').replaceWith('<div class="form_message error" id="ajax_message">Unknown Error!</div>');
                    $("#centerpoint").delay(5000).slideUp();
                }
            }
        })
        /* should pass this form data: 
           action=ajax_purchase_ticket&lottery_id=73&dash=5&form=dash_73
        */
        return false;
    });
});
//]]>
</script>
4

1 回答 1

0

看起来您的表单正在发布“action=ajax_purchase_ticket&lottery_id=73”

您确定服务器端脚本仅使用这么多数据就可以正常运行吗？它可以期待按钮值之一吗？

从序列化文档（http://api.jquery.com/serialize/）：

由于未使用按钮提交表单，因此没有序列化提交按钮值。

这是您可以尝试包含单击的按钮值的解决方案： jQuery serializeArray 不包含单击的提交按钮

更新

看看这是否符合您的要求：http: //jsfiddle.net/kevincollins/VLHCe/

$('button[name="dash"]').click(function (e) {
    e.preventDefault();
    var $formElem = $(this).closest('form');
    var formData = $formElem.serializeArray();
    formData.push({
        name: this.name,
        value: this.value
    });
    // if you want to submit the 'form' attribute of the button as well ...
    formData.push({
        name: 'form',
        value: $(this).attr('form')
    });
    $.ajax({
        url: 'index.php',
        type: 'post',
        data: formData, 
        success: function () {
            //alert(response);
        }
    })
    /* should pass this form data: 
       action=ajax_purchase_ticket&lottery_id=73&dash=5&form=dash_73
    */
});
于 2013-04-04T23:39:43.883 回答