php - 具有不同 ID 的多个动态表单的 AJAX 查询

标签 php javascript jquery html ajax

这是在我的标题中，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，代码将按需要运行。我相信，正如凯文所指出的，问题在于按钮值没有被提交，这就是为什么看起来没有任何反应，因为按钮值是必需的。寻找如何包含按钮值。

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

最佳答案

您的表单似乎正在发布“action=ajax_purchase_ticket&lottery_id=73”

您确定服务器端脚本只需要那么多数据就能完全正常工作吗？它是否需要按钮值之一？

来自序列化文档 ( http://api.jquery.com/serialize/ ):

No submit button value is serialized since the form was not submitted using a button.

这是一个您可以尝试包含单击的按钮值的解决方案: jQuery serializeArray doesn't include the submit button that was clicked

更新

看看这是否符合您的要求: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
    */
});

关于php - 具有不同 ID 的多个动态表单的 AJAX 查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15823495/

上一篇：php - jQ Grid 编辑表单的问题不向 SQL 数据库发送请求

下一篇：javascript - 如何命名一个函数以便您可以内省(introspection)它？

相关文章：

php - CGridView 自定义列过滤器

javascript - 如何使用链接标签在 html 中包含 .ttc 字体文件格式

While 循环中的 PHP 更新

php - Eloquent/Laravel 与多个数据透视表的关系

javascript - 添加/更新元标记在 angular5 中不起作用

javascript - 如何提高我的 JavaScript 技能和知识？

javascript - 定位文本框的 .prev()closest() 类的问题

javascript - 复杂的 jQuery div 排序

javascript - 动态输入文件中没有加载数据

php - 每月租金发票和付款数据库架构

©2024 IT工具网  联系我们