$.getJSON()用法程式碼例項介紹
本章節通過程式碼例項介紹一下$.getJSON()的用法,希望能夠給需要的朋友帶來一定的幫助。
下面首先介紹一下它的語法結構:
[JavaScript] 純文字檢視 複製程式碼jQuery.getJSON(url,data,success(data,status,xhr))
引數解析:
(1).url:必需。規定將請求傳送到的URL。
(2).data:可選。規定連同請求傳送到伺服器的資料。
(3).success(data,status,xhr):可選。規定當請求成功時執行的函式。
data:包含來自請求的結果資料。
status:包含請求的狀態。
xhr:XMLHttpRequest 物件。
其實此方法是對於$.ajax()的封裝,使用更為方便,相當於如下程式碼:
[JavaScript] 純文字檢視 複製程式碼$.ajax({ url: url, data: data, success: callback, dataType: json });
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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()實現跨域請求程式碼例項一章節。
後臺程式碼如下:
[C#] 純文字檢視 複製程式碼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; } } } }
相關文章
- $.ajax()用法例項程式碼介紹
- $.getJSON()實現跨域請求程式碼例項JSON跨域
- 3個例項介紹shell指令碼中幾個特殊引數的用法指令碼
- js通過例項介紹關於閉包的用法JS
- CSS RGBA的用法程式碼例項CSS
- 簡單介紹正規表示式拆分url例項程式碼
- Python qutip用法(舉例介紹)Python
- js confirm()函式用法程式碼例項JS函式
- jquery的filter()函式用法程式碼例項jQueryFilter函式
- ajax實現跨域請求程式碼例項簡單介紹跨域
- jQuery實現的生成隨機密碼程式碼例項簡單介紹jQuery隨機密碼
- Java CXF介紹與例項Java
- 人臉識別的簡要介紹(附例項、Python程式碼)Python
- ajax載入xml檔案內容程式碼例項簡單介紹XML
- javascript名稱空間例項介紹JavaScript
- ES10(ES2019)新特性介紹和程式碼例項
- js動態修改元素中的內容程式碼例項簡單介紹JS
- js的建構函式和原型用法程式碼例項JS函式原型
- MariaDB資料庫的外來鍵約束例項程式碼介紹詳解資料庫
- jQuery構造物件例項簡單介紹jQuery物件
- CGroup 介紹、應用例項及原理描述
- mysql分割槽功能、例項詳細介紹MySql
- jQuery is() 程式碼例項jQuery
- html 仿百度百科導航下拉選單功能例項程式碼介紹HTML
- javascript this 用法例項程式碼解析JavaScript
- css url()用法介紹CSS
- getElementsByClassName()方法用法介紹
- css vm用法介紹CSS
- getCurrentPosition用法介紹
- jQuery選項卡例項程式碼jQuery
- OutputStreamWriter介紹&程式碼實現和InputStreamReader介紹&程式碼實現
- dom操作程式碼例項
- javascript的for in例項程式碼JavaScript
- drag拖拽程式碼例項
- requestAnimationFrame()動畫例項程式碼requestAnimationFrame動畫
- $$和||使用程式碼例項
- js刮刮樂程式碼例項JS
- canvas刮刮樂程式碼例項Canvas