Maison >interface Web >js tutoriel >JQuery Ajax génère dynamiquement des tables de table
Le processus de mise en œuvre est le suivant : la réception appelle le gestionnaire général (Handler) via l'ajax de jquery pour obtenir les informations que la table doit afficher, puis les convertit au format json et les renvoie à la réception. la réception obtient les données, elle boucle pour construire les lignes du tableau pour ajouter des lignes au tableau. Amis intéressés, jetons un coup d'œil
Préface :
La fonction approximative de cet exemple est d'appeler le gestionnaire général (Handler) via l'Ajax de JQuery au niveau du front-end pour obtenir le tableau qui doit être affiché Les informations sont ensuite converties au format json et renvoyées à la réception. Une fois que la réception a obtenu les données, elle boucle pour construire les lignes du tableau. tableau.
Objectifs :
a Se familiariser avec l'utilisation de JQuery Ajax simple
b Comprendre comment construire des données de base au format Json (la construction de Json peut également être effectué via une DLL tierce)
c Familiarisez-vous avec l'utilisation de base du gestionnaire
1 Rendu simple
2 Code frontend
<%@ 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"> #pTb { width:800px; border:1px solid #aaa; margin:0 auto; } .even{background:#CCCCCC;} .odd{background:#FFFFFF;} </style> <script type="text/javascript"> //获取发布模块类型 function getModuleInfo() { $.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("加载失败"); } }); } $(function() { getModuleInfo(); }); </script> </head> <body> <form id="form1" runat="server"> <p id="pTb"> <table id="myTb" style=" width:100%"> </table> </p> </form> </body> </html>
3 Code gestionnaire
<%@ 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) { //不让浏览器缓存 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; } } }
J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.
Articles connexes :
A brève analyse L'utilisation d'Ajax dans Asp.net MVC
Réalisation du positionnement du téléphone mobile basé sur h5 ajax
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!