如何在没有任何事件的情况下从 document.ready 上的服务器端检索值

How to retrieve the value from server side on document.ready in jquery without any event

本文关键字：ready document 服务器端 检索 情况下 任何 事件      更新时间：2023-09-26

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

我

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

这是我的窗口加载代码。

$(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);
            }
        });
    });

这是我的文档.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");}
            }
        });

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

请伙计们帮助我..我在这个领域是新手。提前致谢//

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

$(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");}
            }
        });
});

假设您对服务器的 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();回调中。我已经编辑了上面的代码以保持答案小。

相关文章：