JQuery Ajax dynamically generates a Table, jqueryajax
Preface:
In this example, the foreground calls the General Handler (Handler) through JQuery Ajax, obtains the information to be displayed in the table, converts it to json format, and returns it to the foreground, rows in the table are cyclically constructed after data is obtained at the front end. It is best to append rows to the table.
Objectives:
A. Familiar with the use of simple JQuery Ajax
B. Learn how to construct basic Json data (you can also use a third-party dll to construct Json data)
C. Familiar with the basic usage of handler
1. Simple
2 front-end code
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "DialogAjax. aspx. cs" Inherits = "JQueryTest_DialogAjax" %> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head runat =" server "> <title> </title> <link href = ".. /JQueryUi/jquery-ui-1.8.5.custom.css "rel =" stylesheet "type =" text/css "/> <script src = ".. /JQueryUi/jquery-1.4.2.min.js "type =" text/javascript "> </script> <script src = ".. /JQueryUi/jquery-ui-1.8.5.custom.min.js "type =" text/javascript "> </script> <style type =" text/css "> # divTb {width: 800px; border: 1px solid # aaa; margin: 0 auto ;}. even {background: # C CCCCC ;}. odd {background: # FFFFFF ;}</style> <script type = "text/javascript"> // obtain the function getModuleInfo () of the publish module type {$. ajax ({type: "GET", dataType: "json", url :".. /Handler/TestHandler. ashx? Method = GetModuleInfo ", // data: {id: id, name: name}, success: function (json) {var typeData = json. module; $. each (typeData, function (I, n) {var tbBody = "" var trColor; if (I % 2 = 0) {trColor = "even ";} else {trColor = "odd";} tbBody + = "<tr class = '" + trColor + "'> <td>" + n. moduleNum + "</td>" + "<td>" + n. moduleName + "</td>" + "<td>" + n. moduleDes + "</td> </tr>"; $ ("# myTb "). append (tbBody) ;}, error: function (json) {alert ("loading failed") ;}}) ;}$ (function () {getModuleInfo ();}); </script>
3 Handler code
<% @ WebHandler Language = "C #" Class = "TestHandler" %> using System; using System. web; using System. collections. generic; using System. text; using DataDAL; using DataEnity; public class TestHandler: IHttpHandler {HttpRequest Request; HttpResponse Response; public void ProcessRequest (HttpContext context) {// do not allow the browser to cache context. response. buffer = true; context. response. expiresAbsolute = DateTime. now. addDays (-1); context. response. addHeader ("pragma", "no-cache"); context. response. addHeader ("cache-control", ""); context. response. cacheControl = "no-cache"; context. response. contentType = "text/plain"; Request = context. request; Response = context. response; string method = Request ["Method"]. toString (); System. reflection. methodInfo methodInfo = this. getType (). getMethod (method); methodInfo. invoke (this, null);} public void GetModuleInfo () {StringBuilder sb = new StringBuilder (); string jsonData = string. empty; List <Module> lsModule = ModuleDAL. getModuleList (); sb. append ("{\" Module \ ": ["); for (int I = 0; I <lsModule. count; I ++) {jsonData = "{\" ModuleNum \ ":" + "\" "+ lsModule [I]. moduleNum + "\" "+", \ "ModuleName \": "+" \ "" + lsModule [I]. moduleName + "\" "+", \ "ModuleDes \": "+" \ "" + lsModule [I]. moduleDes + "\" "+"}, "; sb. append (jsonData);} if (lsModule. count> 0) sb = sb. remove (sb. length-1, 1); sb. append ("]}"); Response. write (sb) ;}public bool IsReusable {get {return false ;}}}
The above code is super simple. JQuery Ajax dynamically generates all the content of the Table, and I hope it will be helpful to you.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
