$.getJSON()用法代码实例介绍

快乐打工仔发布于 2年前分类：实例代码

本章节通过代码实例介绍一下$.getJSON()的用法，希望能够给需要的朋友带来一定的帮助。

下面首先介绍一下它的语法结构:

jQuery.getJSON(url,data,success(data,status,xhr))

参数解析:

（1）.url:必需。规定将请求发送到的URL。

（2）.data:可选。规定连同请求发送到服务器的数据。

（3）.success(data,status,xhr):可选。规定当请求成功时运行的函数。

data:包含来自请求的结果数据。

status:包含请求的状态。

xhr:XMLHttpRequest 对象。

其实此方法是对于$.ajax()的封装，使用更为方便，相当于如下代码:

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $("#bt").click(function () {
    var str = "<table>";
    $.getJSON("demo/ajax/net/jqueryAjax.ashx", function (json) {
      $.each(json, function (index, obj) {
        $.each(obj, function (y, data) {
          str = str + "<tr>";
          str = str + "<td>" + data["username"]
          + "</td><td>" + data["address"]
          + "</td><td>" + data["score"] + "</td>";
          str = str + "</tr>";
        })
      })
      str = str + "</tr></table>";
      $("#antzone").html(str);
    })
  })
})
</script>
</head>
<body>
<div id="antzone"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

上面的代码实现了我们的要求，可以将后台数据读取并以表哥的形式呈现。

$.getJSON()也可以实现跨域请求，具体可以参阅$.getJSON()实现跨域请求代码实例一章节。

后台代码如下:

namespace ajax
{
    /// <summary>
    /// jqueryAjax 的摘要说明
    /// </summary>
    public class jqueryAjax : IHttpHandler
    {
 
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            DataSet ds = done();
            string jsonStr = GetJsonByDataset(ds);
            context.Response.Write(jsonStr);
        }
        private DataSet done()
        {
            string connString = ConfigurationManager.ConnectionStrings["access_con"].ConnectionString;
            string configPath = ConfigurationManager.ConnectionStrings["access_path"].ConnectionString;
            string conPath = HttpContext.Current.Server.MapPath(configPath);
            OleDbConnection conn = new OleDbConnection(connString + conPath);
 
            string sql = "select * from code";
            OleDbCommand cmd = new OleDbCommand(sql, conn);
            OleDbDataAdapter da = new OleDbDataAdapter(cmd);
            DataSet ds = new DataSet();
            da.Fill(ds, "ds");
            return ds;
        }
 
        private string GetJsonByDataset(DataSet ds)
        {
            if (ds == null || ds.Tables.Count <= 0 || ds.Tables[0].Rows.Count <= 0)
            {
                //如果查询到的数据为空则返回标记ok:false
                return "{\"ok\":false}";
            }
            StringBuilder sb = new StringBuilder();
            sb.Append("{");
            foreach (DataTable dt in ds.Tables)
            {
                sb.Append(string.Format("\"{0}\":[", dt.TableName));
 
                foreach (DataRow dr in dt.Rows)
                {
                    sb.Append("{");
                    for (int i = 0; i < dr.Table.Columns.Count; i++)
                    {
                        sb.AppendFormat("\"{0}\":\"{1}\",", dr.Table.Columns[i].ColumnName.Replace("\"", "\\"").Replace("\'", "\\'"), ObjToStr(dr[i]).Replace("\"", "\\"").Replace("\'", "\\'")).Replace(Convert.ToString((char)13), "\r\n").Replace(Convert.ToString((char)10), "\r\n");
                    }
                    sb.Remove(sb.ToString().LastIndexOf(','), 1);
                    sb.Append("},");
                }
 
                sb.Remove(sb.ToString().LastIndexOf(','), 1);
                sb.Append("],");
            }
            sb.Remove(sb.ToString().LastIndexOf(','), 1);
            sb.Append("}");
            return sb.ToString();
        }
        private string ObjToStr(object ob)
        {
            if (ob == null)
            {
                return string.Empty;
            }
            else
                return ob.ToString();
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

我来回复

暂无回复内容