从代码隐藏到客户端jquery解析数组项json

时间:2014-02-27 07:41:15

标签: c# javascript jquery asp.net json

我需要使用json将数组值后面的代码传递给jquery方法。如果这种方法出错,请更正我。创建一个返回数组元素的web方法。

C#:
[WebMethod]
        public static tagWords[] GetItems()
        {
            List<tagWords> drp = new List<tagWords>();
            using (SqlConnection con = new SqlConnection("Initial Catalog=someDB;Data Source=localhost;Integrated Security=SSPI;"))
            {
                using (SqlCommand cmd = new SqlCommand("mySP", con))
                {
                    cmd.CommandType = CommandType.StoredProcedure;
                    cmd.Parameters.Add(new SqlParameter("@ID", 1));
                    cmd.Parameters.Add(new SqlParameter("@Code", "Q22")); 
                    cmd.Parameters.Add(new SqlParameter("@KeyValue", "1.4.9"));
                    con.Open();
                    SqlDataReader dr = cmd.ExecuteReader();
                    DataTable dt = new DataTable();
                    dt.Load(dr);
                    if (dt.Rows.Count > 0)
                    {
                        foreach (DataRow dtRow in dt.Rows)
                        {
                            tagWords tagWords = new tagWords();
                            tagWords.text = dtRow["WORD"].ToString();
                            tagWords.weight = Convert.ToInt32(dtRow["first"]);
                            drp.Add(tagWords); 
                        }
                    }                
                }
            }
            return drp.ToArray();
        }

现在在aspx页面中编写了以下代码,

.aspx的:

    <script type="text/javascript" language="javascript">

    function fncCloudItems() // place where json call happens
            {
                alert('fncCloudItems');
                 $.ajax({
                      type: "POST",
                      url: "JQCloud.aspx/GetItems",
                      data: "{}",
                      contentType: "application/json; charset=utf-8",
                      dataType: "json",
                        success: function(output) {
                        var data = eval("(" + msg + ")");
                        functionOnSuccess(data);
                    },
                    error: function(e) {
                        alert(e);
                    }
                });
            }

            function functionOnSuccess(arrayOfElements) 
            {
                alert('functionOnSuccess');
                var obj = JSON.parse(arrayOfElements);
                alert(obj.count);
                alert(obj.length);
                var word_array=[];
                if (arrayOfElements != null && arrayOfElements != 'undefined') 
                {
                  for(i=0;i<arrayOfElements.length;i++)
                  {
                      var row = new Array();
                      row[0] = arrayOfElements[i].latitude;
                      row[1] = arrayOfElements[i].longitude;              
                      word_array.addRow(row);
                  }
                   $("#cloudDiv").jQCloud(word_array, 
                   {
                    width: 1000,
                    height: 350
                    }); 
                 }
            }       

            $(function () 
            {  
                alert('main call starts');
                    fncCloudItems();
                alert('main call ends');

            });
    </script>

Now the methods fires in the correct order starting from main call alert but its not            going to the functionOnSuccess method since something is wrong in the fncCloudItems method.

在错误警报中获取XML HTTPRequest对象。     我在代码隐藏方法中也有一个断点(也没有打到)。

任何人都可以帮我这个吗?

2 个答案:

答案 0 :(得分:0)

由于数据是以JSON形式出现的,因此无需进行评估。评论不需要的行。

      function fncCloudItems() // place where json call happens
        {
            alert('fncCloudItems');
             $.ajax({
                  type: "POST",
                  url: "JQCloud.aspx/GetItems",
                  data: "{}",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                    success: function(output) {
                    //var data = eval("(" + msg + ")");
                    functionOnSuccess(output);
                },
                error: function(e) {
                    alert(e);
                }
            });
        }

答案 1 :(得分:0)

因为ajax函数ALREADY以json格式接收数据,所以您不需要进行任何进一步的数据解析。将您的success处理程序更改为...

                success: function(output) {
                    var data = eval("(" + msg + ")");
                    functionOnSuccess(data);
                },

然后除了遍历数组之外,你的functionOnSuccess不需要做任何其他事情......

        function functionOnSuccess(arrayOfElements) 
        {
            var word_array=[];
            if (arrayOfElements != null && arrayOfElements != 'undefined') 
            {
              for(i=0;i<arrayOfElements.length;i++)
              {
                  var row = new Array();
                  row[0] = arrayOfElements[i].latitude;
                  row[1] = arrayOfElements[i].longitude;              
                  word_array.addRow(row);
              }
               $("#cloudDiv").jQCloud(word_array, 
               {
                width: 1000,
                height: 350
                }); 
             }
        }       

修改

您需要知道从服务器返回的错误。您可以使用浏览器调试工具来检查从服务器返回的响应...所有主流浏览器都带有调试工具(只需按 F12

此外,如果您想在ajax error处理程序中收到正确的错误消息,请将其更改为...

                error: function(x,s,e) {
                    alert(e);
                }

参数是:

  • x:收到的整个回复内容
  • s:错误消息状态
  • e:错误消息