Question

我第一次使用jquery post（），我不能简单地追加返回的数据。在我的情况下，数据只是我的操作调用的页面中的一个表行。我有这个

                        $.post(mysaveurl , $("#installment_form").serialize(), "html")
                            .success(function(data){                                            
                                $( "#paymentplantable table tbody" ).append( data );
                                $dialog.dialog( 'destroy' );
                            }).error(function(){
                                alert("Please ensure that all fields are populated.");
                            });

我的数据正在隐藏数据库，但对话框没有销毁。这说明我追加的行会杀死流量。 注意：上面我使用'html'参数，我不确定它是否是ligal，因为我只看到xml和json在示例中使用。然后我将其修改为此

                        $.post(mysaveurl , $("#installment_form").serialize())
                            .success(function(data){
                                $dialog.dialog( 'destroy' );
                                var content = $( data ).find( 'tr' );          
                                $( "#paymentplantable table tbody" ).append( content );
                            }).error(function(){
                                alert("Please ensure that all fields are populated.");
                            });

它的工作原理是我将数据作为数据，但是当我将表格行附加到现有表格时，单元格形成不正确。如果我用firebug检查DOM，那么表格在结构上是正确的，但是它没有显示为正确的表格行，所有数据都被“挤压”到左边。

然后我认为HTML没有正确传递，所以我使用jquery html（）方法如下

var content = $( data ).find( 'mydivwrapper' ).html();

其中'mydivwrapper'是放在tr周围的div，也是通过返回的“数据”进入的。这也是一个坏主意。

请帮忙。

修改

我改变了我的脚本。这个

                        dataString = $("#installment_form").serialize();
                        $.ajax({
                            type: "POST",
                            url: mysaveurl,
                            data: dataString,
                            dataType: "text",
                            success: function(data) {                                                                       
                                alert(data);
                            }
                      });

当我提醒返回的数据时，我得到了这个

<?xml version="1.0" encoding="UTF-8"?>
<html><tr><td>31</td><td>147.0</td><td>Monday 14 November, 2011</td><td style="height:20px; width:20px;" class="edit_in_table"/><td style="height:20px; width:20px;" class="remove" id="/starburst/invoices/removeInstallment/14/31"/></tr></html>

解决：我在动作中构造了表格行并将标记作为字符串返回。不确定是否发生了上述行为。

此外，为了阅读这篇文章的任何人的利益，我在jquery对话框中发布我的表单时遇到了很大的困难。你看，我动态创建了对话框，它不在DOM中，我不得不调用$（“＃mydialig”）。remove（）;让我的日期选择器每次出现以及阻止表单提交以前的值。希望它有所帮助，这是最终的代码。

    function addInstallment(){
        $("#newinstallment").live("click", function(){
            var $dialog = $('<div></div>');
            var mysaveurl = $(this).attr("saveurl");
            $dialog.load($(this).attr("formurl"), function(){
                $( "#mydatepicker" ).datepicker();
            }).dialog({
                title: 'Add new payment item',
                width: 450,
                modal: true,
                buttons: {
                    Save: function() {
                        dataString = $("#installment_form").serialize();
                        $.ajax({
                            type: "POST",
                            url: mysaveurl,
                            data: dataString,
                            dataType: "text",
                            context: $(this),
                            success: function(data) {
                                $( "#paymentplantable table tbody" ).append(data);
                                var newremoveurl = "${removeinsturlNoIds}"+$("#paymentplantable tr:last td:last").attr("id");
                                $("#paymentplantable tr:last td:last").attr("id", newremoveurl);
                                $( this ).remove();
                            }
                      });
                    },
                    Cancel: function() {
                        $( this ).dialog( 'destroy' );
                    }
                }
            }); 
        });
    }

Answer 1

在萤火虫检查时，数据不能在结构上正确并且格式不正确。例如，您可能一直在检查所有开始标记是否具有匹配的结束标记，所有<td>实际上都在<tr>内等...但您是否检查了返回的表格行与附加到的表具有相同的列数？在ajax附加行之前，是否有任何样式应用于表？（例如：有时候jQuery网格会添加一堆CSS类来使表变得漂亮）。如果这对你没有帮助你马上得到它，那么在附加行之前和之后将表格html从firebug中复制出来并将问题中的代码作为编辑发布。

此外，您可能希望在销毁之前调用.dialog（'close'）（或者甚至根据您是否打算稍后重新使用对话框而取消销毁）。 Close将使用任何已配置的jQuery效果直观地关闭对话框并触发任何必要的事件处理程序。 Destroy实际上会从DOM中删除样式和事件处理程序（不使用它们）。

编辑：这是一个jsfiddle，您首先要检查您向表中添加行的代码是否按预期工作。它对我有用，所以看看：http://jsfiddle.net/BenSwayne/ADsxU/

您可以在$( "#paymentplantable table tbody" ).append( data );上设置断点吗？在你的成功处理程序？这将帮助您检查返回的数据是否是您想要的格式。（它是“xml”并且不包含在数据对象内的属性中吗？）

Jquery post（） - 无法追加返回的数据

1 个答案: