0

我有一个要求，我需要使用任何事件从服务器端代码中检索值并使用它来制作对话框。我试图在 window.onload 中获取值，但我知道 window.onload 是在文档之后调用的。 ready 函数，而我想要 document.ready 函数中的那个值..

我担心的是，有什么方法可以执行 ajax 调用以从服务器端获取值并使用它，而无需在 document.ready 函数上执行任何手动事件..

这是我的 window.onload 代码..

$(window).load(function() {
        $.ajax({
            type: 'GET',
            url: 'Sites',
            dataType: "text",
            success: function(data) {

                var values = [];
                values = data;

                values=values.replace('[','');
                values=values.replace(']','');

                var array = values.split(",");

                for (var i in array){

                    output =output.concat('<input type="checkbox"   id="'+array[i]+'" name="'+array[i]+'" value="'+array[i]+'" />'+array[i]+'<br />');

                }

                console.log(output);
                alert(output);

            }
        });
    });

这是我的 document.ready 功能代码。

$(document).ready(function() {
        //var windowWidth = (document.documentElement.clientWidth - 100) /0.9;
        var chbx="";
        chbx=output.toString();
        alert(chbx);
        var $dialog = $('<div></div>').html("<form id='myform'>" +output + "</form>")
        .dialog({
            autoOpen: false,
            title: 'Select Sites',
            buttons: {
                "Submit": function() {  $('form#myform').submit();},
                "Cancel": function() {$(this).dialog("close");}
            }
        });

在这里，我试图访问我需要从 window.load 获取的变量输出i document.raedy 函数 ..但正如问题所述，它总是空的

请大家帮帮我..我在这个领域非常新手。提前致谢//

4

2 回答 2

1

我将 ajax 调用代码放在对话框代码之前，并添加了一个选项async:false，$.ajax以便它会等到从服务器收到响应。所以，试试下面的代码：

$(document).ready(function() {
    //call the ajax first
    $.ajax({
            type: 'GET',
            url: 'Sites',
            dataType: "text",
            async:false,//wait till the data is received from the server
            success: function(data) {

                var values = [];
                values = data;

                values=values.replace('[','');
                values=values.replace(']','');

                var array = values.split(",");

                for (var i in array){

                    output =output.concat('<input type="checkbox"   id="'+array[i]+'" name="'+array[i]+'" value="'+array[i]+'" />'+array[i]+'<br />');

                }

                console.log(output);
                alert(output);

            }
        });

        ///then here comes you code for dialog

        var chbx="";
        chbx=output.toString();
        alert(chbx);
        var $dialog = $('<div></div>').html("<form id='myform'>" +output + "</form>")
        .dialog({
            autoOpen: false,
            title: 'Select Sites',
            buttons: {
                "Submit": function() {  $('form#myform').submit();},
                "Cancel": function() {$(this).dialog("close");}
            }
        });
});
于 2013-10-30T12:29:27.797 回答
0

假设您对服务器的 AJAX 调用是正确的并给出响应（OP 的问题中缺少服务器端代码）您应该将 ajax 调用移出 window.load 并在执行任何其他功能之前将其添加到前面，这样您就可以使用服务器生成的输出来使用 JS 创建页面（为什么不在服务器端呢？）

无论如何 - 这是您的代码的示例更新，注意未经测试。

//Set output variable so that it's accessible for other functions. 
var output = '';
$(document).ready(function() {

    //Do ajax initially.
    //You don't have to wait until the page finished loading all the images.
    //document.ready only loads the DOM, which is needed for this to work.
    $.ajax({
        type: 'GET',
        url: 'Sites',
        dataType: "text",
        success: function(data) {

            var values = [];
            values = data;

            values=values.replace('[','');
            values=values.replace(']','');

            var array = values.split(",");

            for (var i in array){

                output =output.concat('<input type="checkbox"   id="'+array[i]+'" name="'+array[i]+'" value="'+array[i]+'" />'+array[i]+'<br />');

            }

            //Do all the further processing on success of the ajax call.
            //var windowWidth = (document.documentElement.clientWidth - 100) /0.9;
            var chbx="";
            chbx=output.toString();
            alert(chbx);
            var $dialog = $('<div></div>').html("<form id='myform'>" +output + "</form>")
            .dialog({
                autoOpen: false,
                title: 'Select Sites',
                buttons: {
                    "Submit": function() {  $('form#myform').submit();},
                    "Cancel": function() {$(this).dialog("close");}
                }
            });

            console.log(output);
            alert(output);

        }
    });
});

根据以下评论进行编辑，

AJAX 之后执行的代码实际上应该在success: function();回调中。我已经编辑了上面的代码以保持答案很小。

于 2013-10-30T12:14:37.070 回答