suchen

Heim >Web-Frontend >js-Tutorial >JQuery Ajax generiert dynamisch Tabellentabellen

JQuery Ajax generiert dynamisch Tabellentabellen

亚连
亚连Original
2018-05-24 17:31:313760Durchsuche

Der Implementierungsprozess ist wie folgt: Die Rezeption ruft den allgemeinen Handler (Handler) über den Ajax von jquery auf, um die Informationen zu erhalten, die die Tabelle anzeigen muss, konvertiert sie dann in das JSON-Format und gibt sie anschließend an die Rezeption zurück Die Rezeption erhält die Daten und erstellt in einer Schleife die Zeilen der Tabelle, um Zeilen an die Tabelle anzuhängen. Interessierte Freunde, werfen wir einen Blick darauf

Vorwort:

Die ungefähre Funktion dieses Beispiels besteht darin, den allgemeinen Handler (Handler) über JQuerys Ajax am Frontend aufzurufen Die anzuzeigenden Informationen werden dann in das JSON-Format konvertiert und an die Rezeption zurückgegeben. Nachdem die Rezeption die Daten erhalten hat, werden die Zeilen am besten in einer Schleife erstellt der Tisch.

Ziele:

a Mit der Verwendung von einfachem JQuery Ajax vertraut sein

b Verstehen, wie grundlegende Daten im Json-Format erstellt werden (die Erstellung von Json kann auch Dies kann über eine Drittanbieter-DLL erfolgen)

c Machen Sie sich mit der grundlegenden Verwendung des Handlers vertraut

1 Einfaches Rendern

2 Frontend-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">
    #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=&#39;" + trColor + "&#39;><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 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) {
    //不让浏览器缓存
    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;
    }
  }
}

Das Obige habe ich für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Verwenden von Yii integriertem Pjax (Pushstate + Ajax), um eine Ladeseite ohne Aktualisierung zu erreichen

A Kurze Analyse der Verwendung von Ajax in Asp.net MVC

Realisierung der Mobiltelefonpositionierung basierend auf h5-Ajax

Das obige ist der detaillierte Inhalt vonJQuery Ajax generiert dynamisch Tabellentabellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verwenden Sie das in Yii integrierte pjax (pushstate+ajax), um die Seite ohne Aktualisierung zu ladenNächster Artikel：Verwenden Sie das in Yii integrierte pjax (pushstate+ajax), um die Seite ohne Aktualisierung zu laden

In Verbindung stehende Artikel

Mehr sehen