2016-01-31 2 views
0

Я хочу, чтобы разобрать данные JSON в таблицеразбора JSON данных в таблицу с JAVASCRIPT АЯКС .net

в 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 

выход выглядит как

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

, а затем У меня есть проблема

<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> 

Я нажимаю кнопку, но ничего не произошло.

Я изучаю их самостоятельно, и мой английский плохой, поэтому я думаю, что есть некоторые нелепые ошибки.

благодарит за помощь

+0

возможность использовать инструменты разработчика в любой браузер вы используете, чтобы увидеть, где JavaScript ошибки происходят ли вы? Вы уверены, что вызов ajax успешный? Как выглядит объект javascript после вызова '$ .parseJSON (response)'? – Prescott

+1

Также измените 'json [i] .code' на' json [i] .Code '. –

+0

Попробуйте удалить 'var json = $ .parseJSON (response)' возможно, jQuery анализирует ваш ответ. – jcubic

ответ

0

Нельзя добавлять элемент в цикл. Это плохая практика.

Вы можете попробовать что-то вроде этого:

// 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>

Смежные вопросы