Detaillierte Beispiele für die kombinierte Verwendung von AngularJS und Ajax_AngularJS
WBOY
Freigeben： 2016-05-16 15:35:37
Original
1765 Leute haben es durchsucht
Dies ist ein Artikel über die Verwendung von EasyUI mit Ajax. Er stellt auch die Verwendung von AngularJS vor und ermöglicht es Ihnen, die Leistungsfähigkeit von AngularJS zu spüren. Es gibt viele Artikel über Ajax im Internet. Ich werde nicht direkt mit dem Schreiben aus dem JS des nativen httpxmlrequest-Objekts beginnen. So etwas zu lesen dient nur dazu, zu verstehen, wie hoch die Dinge sind und was die Prinzipien sind. Wenn Sie so etwas tatsächlich tun, können Sie das nicht tun Verwenden Sie diese Art von Code, um die gesamte Site zu schreiben. Dinge wie HTML-JS waren bei ihrer ersten Entwicklung nicht vollständig durchdacht und sie sind einfach Blödsinn. Glücklicherweise gibt es verschiedene Frameworks, die uns helfen können, diesen Scheiß einfacher köstlicher zu machen. Glücklicherweise entwickeln sich diese Dinge auf der Browserseite aufgrund der Förderung der Internetbranche in Richtung einheitlicher Standards.
Lassen Sie uns eine Webformularseite HelloAjaxNet.aspx erstellen. Lassen Sie uns zuerst über Ajax sprechen. Hier verwende ich die im Internet weit verbreitete AjaxPro.2.dll. Seine Website ist http://www.ajaxpro.info/ sehr einfach zu bedienen.
Ursprünglich verfügt das neue asp.net über serverseitige Methoden, die mit dem Attribut webmethod deklariert wurden, und über clientseitige Zugriffsmethoden pagemethods, die auch in JSON digitalisiert werden können. Die Funktionen sind dieselben wie oben. Microsoft wird mit dem Codebehind von aspx geliefert. Was webconfig betrifft, ist es nicht erforderlich, es in der neuen Version der vs2013-Entwicklungsumgebung zu konfigurieren webconfig wird dann automatisch in den ScriptManager geladen.EnablePageMethods = true; Der Client muss die Form runat=server und Anschließend kann der Client mithilfe von Pagemethods darauf zugreifen.
Ich denke immer noch, dass das Obige nützlicher ist. Ich werde nicht viel über das Prinzip sagen. Wenn die Seite geladen wird, wird das Serverobjekt registriert und dann enthält die generierte HTML-Seite noch ein paar Sätze
Warum? Es soll auf eine js-Datei ajaxpro/WebApplication1.NewFolder2.HelloAjaxNet,WebApplication1.ashx verweisen
Dann werden Sie verstehen, dass dieses Skript zum Aufrufen von js auf dem Client automatisch vom Server generiert wird und genau den gleichen Namen wie Ihr Server hat. Dann können Sie die Servermethode auf dem Client zurückrufen Darüber hinaus möchten wir diese Funktion und den Komfort von JSON-Daten hauptsächlich nutzen, um eine nahtlose Übertragung von Client-Server-Daten zu erreichen.
Über die Serialisierung von JSON-Daten konnten Sie zum manuellen Parsen nur externe JSON-Bibliotheken oder Microsofts eigene verwenden:
Server:
public string ServerProcerMethod(string stu)
{
//System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
//StuInfo s= jsSerializer.Deserialize<StuInfo>(stu);
System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<StuInfo> s = jsSerializer.Deserialize<List<StuInfo>>(stu);
if (s != null && s.Count > )
{
StuInfo stu= s[];
StringBuilder sb = new StringBuilder();
jsSerializer.Serialize(stu, sb);
return sb.ToString();
}
else
return null;
}
Nach dem Login kopieren
Kunde:
//javascript 字符串转json对象：
var obj = JSON.parse(str);
//javascript json 对象转字符串：
JSON.stringify(obj);
Nach dem Login kopieren
In Bezug auf die Beziehung zwischen AjaxPro.2.dll und ajax.dll heißt es im Internet, dass sie im Grunde genommen von einer Person erstellt wurden. Bitte laden Sie Ajaxpro von der oben genannten Website herunter. Dies ist die perfekte Version
Nachdem Sie auf die DLL-Datei verwiesen haben, müssen Sie den Webconfig-httphandler konfigurieren. Die Funktion besteht darin, die obige Ashx-Anfrage an unseren Ajaxpro-Code zu übertragen und dann unserem Client-JS zu ermöglichen, die Servermethode direkt erfolgreich aufzurufen.
Dann werde ich nicht viel mehr sagen, ich schaue mir später direkt den Servercode an.
Sie können easyui als eine Reihe erweiterter Steuerelemente verstehen. Genau wie bei jquery verpacken Sie die js-Objekte und nativen HTML-Steuerelemente mit seinen Sachen und können dann auf einige der für Sie geschriebenen Methoden klicken, um die Daten bequem zu verarbeiten. Und es hat auch ein Standard-Steuerelement-Erscheinungsbild, das für Unternehmensverwaltungssoftware wirklich gut ist. Für andere Software kann man das nur tun, haha. Laden Sie die EasyUI-Datei herunter, fügen Sie sie in das Projekt ein und führen Sie EasyUI-bezogene JS- und Style-Dateien sowie JQuery ein:
Dann können Sie easyui verwenden, um das native HTML-Steuerelement durch CSS-Stil oder JS-Code in ein Easyui-Steuerelement umzuwandeln, wie auf der Easyui-Homepage http://jeasyui.com/
Ja, sehr praktisch. Tatsächlich gibt es in China einige gute JS-Autoren. Sie haben einige Benutzeroberflächen wie diese und jene erstellt. Sie können zwischen ihnen wählen, also bleiben wir bei dieser. Die am häufigsten verwendete Anforderung ist serverseitiges Ajax-Paging. Lassen Sie es uns erledigen.
Lassen Sie uns zuerst über dieses EasyUI-Datagrid sprechen. Um es noch schlimmer zu machen, fügen Sie ein Tabellen-Tag in das Client-HTML ein:
'# studb').datagrid() rendert es für Sie in ein EasyUI-Datagrid-Steuerelement. Sie können dies in document.ready() tun. Unsere Datentabelle muss mit Daten gefüllt werden. Welche Spalten werden angezeigt? Wie viele Elemente werden auf jeder Seite angezeigt? Easyui empfängt an vielen Stellen eine Reihe von Parametern in Form von JSON-Objekten, beispielsweise in diesem Datagrid:
Ich habe gesehen, dass ich selbst eine Datenbindungsfunktion erstellt habe. Siehe den Loader von Datagrid in easyui. Nach der ersten Anfrage zum Abrufen der Paging-Informationen habe ich die Daten sofort an die Tabelle gebunden. Sie können sehen, dass es genau so ist, als würde ich eine Vorlage erstellen und dann meine eigene Paging-Steuerung initialisieren. Wenn ng-click verwendet wird, wird der Client-Klick wie zuvor ausgelöst und dann die Methode im Controller aufgerufen, um die Daten zu aktualisieren. Beachten Sie, dass die Daten nur gemäß der Geschäftslogik aktualisiert werden und keine Maßnahmen erforderlich sind anders. Wenn Sie die beiden oben genannten Codeteile nicht verstehen, können Sie es selbst ausprobieren. Der Einstieg in AngularJS und die Datenbindung dauert weniger als 10 Minuten,
Aufgrund des bidirektionalen Bindungsmechanismus wie WPF ändert sich der Seiteninhalt automatisch entsprechend, wenn die Datenmodelldaten aktualisiert werden. Sie können sogar sehen, dass sich die Daten in der obigen Tabelle ändern, bevor sie übermittelt werden, wenn ich die Daten im Textfeld unten bearbeite. Da ihre Daten von derselben Stelle stammen, fühlt es sich an, als wären sie Ajax.
Der Projektquellcode aller oben genannten Beispiele kann heruntergeladen und direkt ausgeführt werden, aber aufgrund der Einführung einiger externer Bibliotheken ist er fast zu groß, um in 10 MB zu passen
Etwas zu sagen
Wenn sich das Internet so weiter entwickelt, wird das Frontend vereinheitlicht und das Frontend wird König sein. Bis dahin wird eine Webseite ein System und ein Client sein. Das Backend ist nur für Daten und Sicherheit verantwortlich. Ist HTML5 mittlerweile nicht fast ein Industriestandard? Einige eingebettete Geräte unterstützen es
Im Moment habe ich einige Leute im Blog-Garten gesehen, die über den MVC-Modus gesprochen haben, bei dem das Front-End und das Back-End nach demselben Modell arbeiten. Wenn das Front-End Attribute aktualisiert, gibt es einen Mechanismus, der automatisch funktioniert Aktualisiert das Back-End aus Gründen der Persistenz. Gehen Sie zur Datenbank oder aktualisieren Sie ein bestimmtes Attribut des Modells im Backend, und der Wert der Front-End-HTML-Seite ändert sich automatisch. Es ist nicht so, dass es nicht möglich wäre, schließlich gibt es so viele talentierte Leute, dass es meiner Meinung nach zumindest noch nicht stabil ist.
Zu den verschiedenen Benutzeroberflächen gehören Easyui Ligerui Fineui Miniui Devexpress und viele JS-Frameworks Seajs Requirejs JavaScriptMVC Backbone AvalonJS Knockout Angular JQuery Jqueryui JS ist wirklich scheiße, ich kann nicht alle Arten von Frameworks zu Ende lernen
Vor allem die Softwarebranche verändert sich mit jedem Tag. Es gibt zu viele Technologien, die auf Frameworks und Plattformen basieren. Wenn Sie eine bestimmte Technologie nicht beherrschen, spielt es keine Rolle, ob Sie sie nutzen können , Sie müssen mindestens eine oder eine Technologie beherrschen. Ansonsten ist es schade, dass Sie im Grunde immer noch auf dem Weg sind, Steine zu bewegen. Das Schreiben von Geschäftscode bedeutet, dass er zehn Jahre lang Geschäftscode schreiben muss. Nach der Arbeit muss er etwas Energie aufbringen, um das Wesentliche der Dinge zu untersuchen Für eine lange Zeit wird er wissen, wie man es selbst macht. Entwickeln Sie einige sogenannte kleine Frameworks, die schnell entwickelt werden können, um einige Ihrer eigenen Werkzeugbibliotheken und Erfahrungen zu sammeln.
Solange er jeden Tag Geschäftscode schreiben kann, ist es kein Held, Probleme zu lösen.
Ich persönlich mag js auch nicht besonders. Als dieses Ding ursprünglich entworfen wurde, war es nicht perfekt und verursachte verschiedene Hindernisse bei unserer Verwendung. Bei der Webentwicklung muss man es jedoch verwenden. Es gibt keine Vorurteile gegenüber denen, die hier Front-End-Arbeit leisten. Vielen Dank an diejenigen, die über umfassende Front-End-Kenntnisse verfügen, wie z. B. Situ Zhengmei, die diese Tools erstellt haben, um uns die Fertigstellung dieser Website-Programme zu erleichtern.
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
