鍍金池/ 問答/C#  HTML/ 怎么用json把后端的數(shù)據(jù)傳到前端html界面顯示,javascript要怎么寫

怎么用json把后端的數(shù)據(jù)傳到前端html界面顯示,javascript要怎么寫？

//后端代碼

public JsonResult SendData()
    {
        return Json( new {username="劉偉",teacherid="2432012522" });
    }

//前端代碼

<div class="box5" style="position:relative;">
    <!-- 背景圖的div -->
    <img style="position:absolute;margin-left: 5%;margin-top: 9%" src="~/Content/themes/portrait.png" width=28% height=50% />
    <img src="~/Content/themes/background.jpg" width=100% height=100% />
    <div class="FONT4" style="position:absolute; z-index:2; top:15px">姓名：劉偉</div>
    //怎么把這個“劉偉”替換成動態(tài)的，由后端發(fā)送的？
    <div class="FONT4" style="position:absolute; z-index:2; top:100px">教工號：2432012522</div>
    //怎么把這個“2432012522”替換成動態(tài)的，由后端發(fā)送的？
</div>
回答
編輯回答
疚幼

ajax請求這個Action，請求成功后，返回的數(shù)據(jù)渲染到這個div內(nèi)容就行了

2017年10月26日 03:04
編輯回答
未命名
<div class="box5" style="position:relative;">
    <!-- 背景圖的div -->
    <img style="position:absolute;margin-left: 5%;margin-top: 9%" src="~/Content/themes/portrait.png" width=28% height=50% />
    <img src="~/Content/themes/background.jpg" width=100% height=100% />
    <div class="FONT4" style="position:absolute; z-index:2; top:15px" id="username">姓名：劉偉</div>
    //添加id="username"
    <div class="FONT4" style="position:absolute; z-index:2; top:100px" id="teacherid">教工號：2432012522</div>
    //添加id="teacherid"
</div>
//使用JS
<script type="text/javascript>
    var xhr = new XMLHttpRequest();
    xhr.open("get","url",true); //url改成自己的請求地址
    xhr.send();
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
        var data = JSON.parse(xhr.responseText);
        document.getElementById("username").value = "姓名:" + data.username;
        document.getElementById("teacherid").value = "教工號:" + data.teacherid;
        }
    }
</script>
//使用jQuery
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript>
    $.get("url",function(result){
        var data = JSON.parse(result);
        $("#username").val("姓名:" + data.username);
        $("#teacherid").val("教工號:" + data.teacherid);
    })
</script>
2018年4月12日 10:21