Jquery-打开对话框窗口时从数据库获取数据

我有一张表格，表格上有一张记录表。每个记录都来自一个mysql数据库，每个记录在数据库中都有自己唯一的id。我正在使用jQueryUI对话框库，每个记录旁边都有一个编辑链接。当用户单击编辑时，将调用该对话框打开，该对话框显示表单的模式窗口，用于编辑该特定记录。我的问题是，当对话框打开时，如何通过jquery/ajax进行调用，以便从数据库中获取该记录的最新数据，然后填充对话框表单中的字段？现在，我只需在单击链接时打开对话框：

$("a.editlink").click(function() {

    $("#edit-form").dialog("open");

    return false;

});

---

在click函数中，您需要执行一个Ajax调用，以使用

在ajax调用的success方法中，您可以将返回的值分配给表单上的输入字段

我不知道您的后端是什么技术，所以您只需要确保以可读的方式返回值（即JSON）

<> P>唯一要考虑的是，当用户单击编辑时，这将是缓慢的。如果页面没有太多数据，那么在单击的锚定标记中存储附加属性可能是值得的，这样您就可以立即填充编辑表单

例如，有一个锚定标签，如下所示：

<a class="editlink" data-field1='stuff' data-field2='stuff' data-field3='stuff'>Text</a>

文本

您需要将ajax调用放在对话框js代码的打开部分：

$( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Create an account": function() {

                    $( this ).dialog( "close" );
                }
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
                    $( this ).dialog( "close" );
        },
                    open: function(){ 
         PUT AJAX CALL HERE
        }
    });

并将innerHTML放入ajax success，将结果放入对话框表单：

function ajaxSuccess(data){
                     dialogformfields.innerHTML=data.info;
                     }

---

希望这就是你需要知道的

将a标记的href值设置为editform可用的页面。您可以使用querystring将记录的id传递到此页面，以便将该记录的详细信息加载到编辑表单中

<a href="edtiuser.php?userid=1">Edit User 1</a>
<a href="edtiuser.php?userid=2">Edit User 2</a>     

还有这个剧本

$(function(){
        $("a.editlink").click(function (e) {
            var url = this.href;
            var dialog = $("#dialog");
            if ($("#dialog").length == 0) {
                dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
            }
            dialog.load(
                url,
                {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
                function (responseText, textStatus, XMLHttpRequest) {
                    dialog.dialog({                       
                        close: function (event, ui) {                            
                            dialog.remove();
                        },
                        modal: true,
                        width: 460
                    });
                }
            );           
            return false;           
        });
  });

$（函数（）{
$（“a.editlink”）。单击（函数（e）{
var url=this.href；
变量对话框=$（“#对话框”）；
如果（$（“#对话框”）.length==0{
dialog=$（''）.appendTo（'body'）；
}
dialog.load(
网址，
{}，//省略此param对象以发出GET请求，而不是POST请求，否则您可能会在对象内提供POST参数
函数（responseText、textStatus、XMLHttpRequest）{
dialog.dialog（{
关闭：函数（事件，ui）{
dialog.remove（）；
},
莫代尔：是的，
宽度：460
});
}
);           
返回false；
});
});

---

因此，当您单击anchror标记时，edituser.php页面的内容将加载到对话框中。假设您将jQuery和jQuery UI正确加载到页面中，这应该可以正常工作。

我喜欢这种方法，但有一件事我很困惑，那就是如何将我正在单击的链接的id传递到open函数，以便将其传递到我的ajax调用？让我们假设在父页面上，当他们单击时，我有一个这样的链接，我称之为打开对话框，如何从我刚刚从打开函数单击的链接访问title属性？好的，将初始函数更改为：$（“a.editlink”）。单击（函数（this）{do AJAX调用this.title$（“#编辑表单”）。对话框（“打开”）。。。