Javascript 如何在JSON.parse（）之后向HTML DOM元素显示JSON数据？_Javascript_Jquery_Json_Ajax_Express

Javascript 如何在JSON.parse（）之后向HTML DOM元素显示JSON数据？

javascript jquery json ajax express

Javascript 如何在JSON.parse（）之后向HTML DOM元素显示JSON数据？,javascript,jquery,json,ajax,express,Javascript,Jquery,Json,Ajax,Express,我使用两个函数从服务器端提取JSON，然后将其显示为HTML 从路由处理程序中提取数据的第一个函数是成功地提取数据，并使用JSON.parse（）成功解析数据，并向控制台显示所需的信息，而不会出现问题。我没有和ajax或路由处理问题下面是我在名为“projectInfo（）”的函数中首先处理JSON的方法：第二个函数调用第一个函数，以便使用解析后的JSON数据更新全局变量，然后将全局变量的数据显示给我尝试显示的DOM元素下面是我如何在名为“loginFun（）”的函数中使用JSON对象更新

我使用两个函数从服务器端提取JSON，然后将其显示为HTML

从路由处理程序中提取数据的第一个函数是成功地提取数据，并使用JSON.parse（）成功解析数据，并向控制台显示所需的信息，而不会出现问题。我没有和ajax或路由处理问题

下面是我在名为“projectInfo（）”的函数中首先处理JSON的方法：

第二个函数调用第一个函数，以便使用解析后的JSON数据更新全局变量，然后将全局变量的数据显示给我尝试显示的DOM元素

下面是我如何在名为“loginFun（）”的函数中使用JSON对象更新全局变量的方法：

我像这样重写了你的登录功能，它对我很有用。我还消除了projectInfo（）函数

var allMn = [];
var tags = [];
var pInfo = '';

function loginFun() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;

if (username == "" || password == "") {
    alert("Required fields cannot be left blank.");
} else {
    $.ajaxSetup({
        cache: false
    });

    $.ajax({
        type: 'GET',
        url: 'http://139.169.63.170:' + port + '/login/' + username + "zlz" + password,       
        cache: false,   

        success: function (data) {

            // NEED SUB ROUTINE HERE FOR AJAX CALL DPL
            // Make async call to ccdd tool database to get new data
            // This collects allMn[] data!!!
            getMnJson();            
            // END SUB ROUTINE HERE

            // Checks to make sure user is logged in if not
            // the condition redirects user to loginFun()
            if (data.search("HTTP ERROR: ") != -1) {
                alert("Login Failed.");
                document.getElementById('username').value = "";
                document.getElementById('password').value = "";
                document.getElementById('searchResults').innerHTML = "Login Failed";
                document.getElementById('searchRBar').style.display = "";
                loginFun();
            } else {

            login = 1;

                // Call projectInfo() in order to update pInfo with the needed project info
                //projectInfo();



                var projInfo = '';
                var p = '';

                // Get all Mn Data on startup tp display in DOM -DPL
                $.ajax({
                    type: 'GET',
                    url: 'http://139.169.63.170:' + port + '/role',
                    dataType: 'json',
                    cache: true,    

                    success: function (data) {

                        // projInfo = JSON.stringify(data); 
                        console.log("DEBUG DONE WITH CAPTURING project_info DATA: " );

                        // console.log("var projInfo: " + projInfo);

                        // parse JSON data in projInfo
                        p = data['Project']; //JSON.parse(projInfo);
                        console.log("Parsed Project JSON: " + p);

                        // update "Global" pInfo with the value of the JSON data for "Project" as needed
                        pInfo = p;
                        console.log("What is inside of pInfo???: " + pInfo);



                        document.getElementById("signedinas").innerHTML = "<font face=\"verdana\" size =\"4\" color=\"white\">Logged in as: " + username + " Project: " + pInfo + " </font>";
                    }
                }).fail(function () {
                        alert("Login Failed.");
                        document.getElementById('username').value = "";
                        document.getElementById('password').value = "";
                        console.log("Error. /role data access Error.");
                });





                console.log("projectInfo var data should be aa2: " + pInfo);


                document.getElementById("userBar").style.display = "";

                // Display pInfo in the DOM
                // document.getElementById("signedinas").innerHTML = "<font face=\"verdana\" size =\"4\" color=\"white\">Logged in as: " + username + " Project: " + pInfo + " </font>";

                $("div.create").children().remove();

                //-------------------------------------------------------------------END OF GLOBAL VARIABLES

                $.ajaxSetup({
                    cache: false
                });

                // get table data from proxy server on port 7071 DPL
                // NEED SUB ROUTINE HERE FOR AJAX CALL
                // Make call to server-side code to reload JSON data into table from port 7071
                pushJsonData();
                // END SUB ROUTINE HERE!!!

                // getTblJson();
            }
        }
    }).fail(function () {
        alert("Login Failed.");
        document.getElementById('username').value = "";
        document.getElementById('password').value = "";
        console.log("Error. Need user Credentials");
    });
}
}

var allMn=[]；
var标签=[]；
var pInfo=''；
函数loginFun（）{
var username=document.getElementById（'username'）。值；
var password=document.getElementById（'password'）。值；
如果（用户名=“”| |密码=“”）{
警报（“必填字段不能为空。”）；
}否则{
$.ajaxSetup({
缓存：false
});
$.ajax({
键入：“GET”，
网址：'http://139.169.63.170:“+端口+”/login/'+用户名+“zlz”+密码，
cache:false，
成功：功能（数据）{
//这里需要用于AJAX调用DPL的子程序
//对ccdd工具数据库进行异步调用以获取新数据
//这将收集所有mn[]数据！！！
getMnJson（）；
//在这里结束子程序
//检查以确保用户已登录（如果未登录）
//该条件将用户重定向到loginFun（）
if（data.search（“HTTP错误：”）！=-1）{
警报（“登录失败”）；
document.getElementById（'username'）。value=“”；
document.getElementById（'password'）。value=“”；
document.getElementById（'searchResults'）.innerHTML=“登录失败”；
document.getElementById（'searchRBar'）.style.display=“”；
loginFun（）；
}否则{
登录=1；
//调用projectInfo（）以使用所需的项目信息更新pInfo
//projectInfo（）；
var projInfo=“”；
var p=''；
//在DOM-DPL中显示启动tp时获取所有Mn数据
$.ajax({
键入：“GET”，
网址：'http://139.169.63.170:“+端口+”/角色”，
数据类型：“json”，
是的，
成功：功能（数据）{
//projInfo=JSON.stringify（数据）；
log（“捕获项目信息数据的调试完成：”）；
//日志（“变量projInfo:+projInfo”）；
//在projInfo中解析JSON数据
p=data['Project']；//JSON.parse（projInfo）；
log（“解析的项目JSON:+p”）；
//根据需要使用“Project”的JSON数据值更新“Global”pInfo
pInfo=p；
log（“pInfo的内部是什么？”：“+pInfo”）；
document.getElementById（“signedinas”）.innerHTML=“以“+username+”项目“+pInfo+”的身份登录”；
}
}).fail（函数（）{
警报（“登录失败”）；
document.getElementById（'username'）。value=“”；
document.getElementById（'password'）。value=“”；
log（“错误/角色数据访问错误”）；
});
log（“projectInfo变量数据应为aa2:+pInfo”）；
document.getElementById（“用户栏”）.style.display=“”；
//在DOM中显示pInfo
//document.getElementById（“signedinas”）.innerHTML=“以“+username+”项目“+pInfo+”的身份登录”；
$（“div.create”）.children（）.remove（）；
//-------------------------------------------------------------------全局变量结束
$.ajaxSetup({
缓存：false
});
//从端口7071 DPL上的代理服务器获取表数据
//这里需要用于AJAX调用的子程序吗
//调用服务器端代码，从端口7071将JSON数据重新加载到表中
pushJsonData（）；
//在这里结束子程序！！！
//getTblJson（）；
}
}
}).fail（函数（）{
警报（“登录失败”）；
document.getElementById（'username'）。value=“”；
document.getElementById（'password'）。value=“”；
日志（“错误。需要用户凭据”）；
});
}
}

您为什么要在执行

JSON.stringify（）

之后紧接着执行

JSON.parse（）

？因为从理论上讲，这应该是传递到

JSON.stringify（）

中的同一个对象……我认为应该对JSON数据进行stringify。我应该消除它吗？你不需要字符串化然后立即解析它。如果你将其字符串化以将其发送到服务器，这很好。如果我不将其字符串化，则在尝试解析时会出现错误。当它来自服务器时，我必须对它进行字符串化，然后才能解析它。这就是为什么它在那里…好吧，我把它们都拿出来了。在我使用的ajax函数中：p=data['Project']；要获取数据，它正在打印到控制台，但它仍然没有打印到DOM。。。

               // Call projectInfo() in order to update Global pInfo  
               //   with the needed project info
                projectInfo();

                // This console.log() prints nothing...?
                console.log("projectInfo var data should be aa2: " + pInfo);


                document.getElementById("userBar").style.display = "";

                // This is where I try to Display pInfo in the DOM but I only get Undefined...?
                document.getElementById("signedinas").innerHTML = "<font face=\"verdana\" size =\"4\" color=\"white\">Logged in as: " + username + " Project: " + pInfo + " </font>";

{"User":"aa2","Owner":"aa2_role","Status":"locked","Port":"5432","Description":"Transferred from CFS01 on Jun29","Project":"aa2","Server":"localhost"}

var allMn = [];
var tags = [];
var pInfo = '';

function loginFun() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;

if (username == "" || password == "") {
    alert("Required fields cannot be left blank.");
} else {
    $.ajaxSetup({
        cache: false
    });

    $.ajax({
        type: 'GET',
        url: 'http://139.169.63.170:' + port + '/login/' + username + "zlz" + password,       
        cache: false,   

        success: function (data) {

            // NEED SUB ROUTINE HERE FOR AJAX CALL DPL
            // Make async call to ccdd tool database to get new data
            // This collects allMn[] data!!!
            getMnJson();            
            // END SUB ROUTINE HERE

            // Checks to make sure user is logged in if not
            // the condition redirects user to loginFun()
            if (data.search("HTTP ERROR: ") != -1) {
                alert("Login Failed.");
                document.getElementById('username').value = "";
                document.getElementById('password').value = "";
                document.getElementById('searchResults').innerHTML = "Login Failed";
                document.getElementById('searchRBar').style.display = "";
                loginFun();
            } else {

            login = 1;

                // Call projectInfo() in order to update pInfo with the needed project info
                //projectInfo();



                var projInfo = '';
                var p = '';

                // Get all Mn Data on startup tp display in DOM -DPL
                $.ajax({
                    type: 'GET',
                    url: 'http://139.169.63.170:' + port + '/role',
                    dataType: 'json',
                    cache: true,    

                    success: function (data) {

                        // projInfo = JSON.stringify(data); 
                        console.log("DEBUG DONE WITH CAPTURING project_info DATA: " );

                        // console.log("var projInfo: " + projInfo);

                        // parse JSON data in projInfo
                        p = data['Project']; //JSON.parse(projInfo);
                        console.log("Parsed Project JSON: " + p);

                        // update "Global" pInfo with the value of the JSON data for "Project" as needed
                        pInfo = p;
                        console.log("What is inside of pInfo???: " + pInfo);



                        document.getElementById("signedinas").innerHTML = "<font face=\"verdana\" size =\"4\" color=\"white\">Logged in as: " + username + " Project: " + pInfo + " </font>";
                    }
                }).fail(function () {
                        alert("Login Failed.");
                        document.getElementById('username').value = "";
                        document.getElementById('password').value = "";
                        console.log("Error. /role data access Error.");
                });





                console.log("projectInfo var data should be aa2: " + pInfo);


                document.getElementById("userBar").style.display = "";

                // Display pInfo in the DOM
                // document.getElementById("signedinas").innerHTML = "<font face=\"verdana\" size =\"4\" color=\"white\">Logged in as: " + username + " Project: " + pInfo + " </font>";

                $("div.create").children().remove();

                //-------------------------------------------------------------------END OF GLOBAL VARIABLES

                $.ajaxSetup({
                    cache: false
                });

                // get table data from proxy server on port 7071 DPL
                // NEED SUB ROUTINE HERE FOR AJAX CALL
                // Make call to server-side code to reload JSON data into table from port 7071
                pushJsonData();
                // END SUB ROUTINE HERE!!!

                // getTblJson();
            }
        }
    }).fail(function () {
        alert("Login Failed.");
        document.getElementById('username').value = "";
        document.getElementById('password').value = "";
        console.log("Error. Need user Credentials");
    });
}
}