使用JAVASCRIPT ajax .net将json数据解析为表

Question

I want to parse json data into table 我想将json数据解析为表

in the vb I write 在VB中我写

Inherits System.Web.UI.Page

Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load

    Dim conn As New SqlConnection()
    Dim cmd As New SqlCommand()
    conn.ConnectionString = "server=AIONSTUDENT01\SQLEXPRESS;Database=TestDB;User ID=sa;Password=1234;Trusted_Connection=False;"
    conn.Open()
    cmd.Connection = conn
    cmd = New SqlCommand("select WA01_CNTY_CD,WA01_CNTY_NM_C from WA01", conn)

    Dim da As New SqlDataAdapter(cmd)
    Dim ds As New DataSet
    Dim jason As String = ""
    Dim D As String = ""

    da.Fill(ds, "mytable")

    If ds.Tables("mytable").Rows.Count > 0 Then
        For Each dr As DataRow In ds.Tables("mytable").Rows
            Dim a As String = dr("WA01_CNTY_CD")
            Dim b As String = dr("WA01_CNTY_NM_C")

            jason += "{" + """Code"":""" + a.ToString + """," + """countryname"":""" + b.ToString + """}" + ","

                'C += a + ","
                'D += b + ","
            Next

        End If

        Dim jason2 As String = jason.Remove(jason.Length - 1)
        Dim jason3 As String = "[" + jason2 + "]"

        If "" & Request("AJAX") = "1" Then
            Response.Write(jason3)
            Response.End()
            conn.Close()
        End If
    End Sub

the output looks is 输出看起来是

[{"Code":"CN","countryname":"中國"},{"Code":"JP","countryname":"日本"},
 {"Code":"KR","countryname":"韓國"},{"Code":"TW","countryname":"台灣"},
 {"Code":"US","countryname":"美國"},{"Code":"CL","countryname":"阿囉哈"},
 {"Code":"ML","countryname":"馬來西亞"}]

and then I have trouble 然后我有麻烦

<title></title>
<script src="jquery-1.11.3.min.js"></script>
<script language="javascript">

    $(document).ready(function () {
        $("#button1").click(function () {
            $.ajax({
                url: 'country.aspx?AJAX=1',
                type: 'GET',
                success: function (response) {
                    var json = $.parseJSON(response)
                    var tr;
                    for (var i = 0; i < json.length; i++) {
                        tr = $('<tr/>');
                        tr.append("<td>" + json[i].code + "</td>");
                        tr.append("<td>" + json[i].countryname + "</td>");  
                        $('table').append(tr);
                    }                                                                
                }
            });
         });
    });
</script>
</head>
<body>
<table>
    <tr>
        <th>code</th>
        <th>countryname</th>       
    </tr>
</table>
<p/>
<button id="button1">Ajax</button>
</body>
</html>

I click the button but nothing happened. 我单击按钮，但是什么也没发生。

I learn them by myself and my English is poor, so I think there are some ridiculous mistakes . 我自己学习它们，我的英语很差，所以我认为有一些荒谬的错误。

thank for your assistance 感谢您的协助

Answer 1

You should not append element in loop. 您不应在循环中附加元素。 Its a bad practice. 这是一个坏习惯。

You can try something like this: 您可以尝试如下操作：

 // Create html string for data received function createHtmlString(data){ var result = ""; data.forEach(function(item){ result += "<tr>"; result += "<td>" + item.Code + "</td>"; result += "<td>" + item.countryname + "</td>"; result += "</tr>" }); return result; } function getData(){ var data = [{"Code":"CN","countryname":"中國"},{"Code":"JP","countryname":"日本"}, {"Code":"KR","countryname":"韓國"},{"Code":"TW","countryname":"台灣"}, {"Code":"US","countryname":"美國"},{"Code":"CL","countryname":"阿囉哈"}, {"Code":"ML","countryname":"馬來西亞"}]; return data; } function appendElement(){ var data = getData(); var html = createHtmlString(data); // Perform bulk operation $("#tbl").html(html); } appendElement();

 td{ border:1px solid gray; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <table id="tbl"></table>

使用JAVASCRIPT ajax .net将json数据解析为表

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-01-31 10:48:30

使用JAVASCRIPT ajax .net将json数据解析为表

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-01-31 10:48:30

解决方案1
0 已采纳 2016-01-31 10:48:30