在Html页面中显示来自Json的字符串

时间:2016-03-15 11:25:49

标签: javascript jquery json ajax playframework

对于一个播放框架项目,我想在一个html页面的表格中显示来自Json(包含一个字符串列表)的字符串。因此我尝试了ajax和jquery,但它无法正常工作。 这是我的javascript代码:

$(document).ready(function(){

$.ajax({

    url: '/generiereBestenliste/AddE',
    method: 'POST',
    dataType: "json",


    success: function (json) {

        $("name1").text(json[0]);
        $("score1").text(json[1]);
        $("name2").text(json[2]);
        $("score2").text(json[3]);
        $("name3").text(json[4]);
        $("score3").text(json[5]);
        $("name4").text(json[6]);
        $("score4").text(json[7]);
        $("name5").text(json[8]);
        $("score5").text(json[9]);
        $("name6").text(json[10]);
        $("score6").text(json[11]);
        $("name7").text(json[12]);
        $("score7").text(json[13]);
        $("name8").text(json[14]);
        $("score8").text(json[15]);
        $("name9").text(json[16]);
        $("score9").text(json[17]);
        $("name10").text(json[18]);
        $("score10").text(json[19]);
        $("nameDu").text(json[20]);
        $("scoreDu").text(json[21]);


    }

});


});

这是我的html页面:

@main("bestenlisteAddE"){
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<script src="@routes.Assets.versioned("javascripts/bestenlisteAddE.js")"></script>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>bestenlisteAddE</title>
    </head>

    <style>
    *{font-family: 'Roboto', sans-serif;}
    table, td {
    border: 1px solid black;
    }
    td {
    padding: 15px ;
    }
    </style>
    <body>

        <h1 align="center">Bestenliste Addition Leicht</h1>

        <table align="center" border="1" style="width:20%">
            <tr id="1">
        <tr>
            <th>Platz</th>
            <th>Name</th>
            <th>Score</th>
        </tr>
            <td>#1
                <img src="/assets/images/pokalgold.png"
                style="width:30px;height:30px;"
                alt="gold"></td>
            <td id="name1">Jill</td>
            <td id="score1">50
            </td>
            </tr>
            <tr id="2">
                <td>#2
                    <img src="/assets/images/pokalsilber.png"
                    style="width:30px;height:30px;"
                    alt="silber"></td>
                <td id="name2">Eve</td>
                <td id="score2">94
                </td>
            </tr>

            <tr id="3">
                <td>#3
                    <img src="/assets/images/pokalbronze.png"
                    style="width:30px;height:30px;"
                    alt="bronze"></td>
                <td id="name3">Jill</td>
                <td id="score3">50
                </td>
            </tr>
            <tr id="4">
                <td>#4</td>
                <td id="name4">Eve</td>
                <td id="score4">94</td>
            </tr>

            <tr
            id="5">
                <td>#5</td>
                <td id="name5">Jill</td>
                <td id="score5">50</td>
            </tr>
            <tr id="6">
                <td>#6</td>
                <td id="name6">Eve</td>
                <td id="score6">94</td>
            </tr>

            <tr id="7">
                <td>#7</td>
                <td id="name7">Jill</td>
                <td id="score7">50</td>
            </tr>
            <tr id="8">
                <td>#8</td>
                <td id="name8">Eve</td>
                <td id="score8">94</td>
            </tr>

            <tr id="9">
                <td>#9</td>
                <td id="name9">Jill</td>
                <td id="score9">50</td>
            </tr>
            <tr id="10">
                <td>#10</td>
                <td id="name10">Eve</td>
                <td id="score10">94</td>
            </tr>
            <tr id="du">
                <td>Du:</td>
                <td id="nameDu">Benutzername</td>
                <td id="scoreDu">0</td>

            </tr>
        </table>
    </body>

</html>
}

1 个答案:

答案 0 :(得分:1)

$("name1").text(json[0]);

$("#name1").text(json[0]);

对所有人来说都是一样的,你忘了#