Heim > Artikel > Web-Frontend > Accp8.0-Konvertierungslehrbuch Kapitel 11 Verständnis und Praxis der Ajax-Interaktionserweiterung
①Verschiedene Hinweise: Früher gab es das ursprüngliche JavaScript zur Implementierung von Ajax, hier gibt es eine einfachere Möglichkeit, Ajax zu implementieren
②Gemeinsame Parameter der $.get()-Methode
Parameter | Typ | Beschreibung | |||||||||||||||
URL | String | Erforderlich, geben Sie die Absenderadresse an | |||||||||||||||
Daten | PlainObject oder String | Optional, gibt die von der Anfrage gesendeten Daten an | |||||||||||||||
Erfolg |
String textStatus,jqXHR jqxhr)
|
Optional, Funktion wird nach Erfolg aufgerufen
Parameterdaten: Optionales Server-Rückgabeergebnis
Parameter textStatus: Optionale Beschreibung des Anfragestatus Parameter jqxhr: optional ist eine Obermenge von XMLHttpRequest (erforderlich, wenn dataType angegeben ist)
|
|||||||||||||||
dataType | String | Optional: der Datentyp, der voraussichtlich vom Server zurückgegeben wird |
1. Wortteil (JSON-gängige Wörter)
1.Laden laden 2.Serialisierung serialisieren 3.enthält 4.Funktionsmerkmale
5.zitieren 6.überspringen 7.vorübergehend 8.hübsch
9.Prototyp Prototyp 10.Konfliktkonflikt
2. Einige häufige Fragen zu JSON
1. Die Hauptmethode zur Implementierung von Ajax mit jQuery
①Ursprüngliche ökologische Umsetzung
②$.get()- und $.post()-Methoden
③$.getJSON()-Methode
④.load()
2.jQuery analysiert Formulardaten
Die .serializeArray()-Methode von jQuery erkennt gültige Steuerelemente aus einer Reihe von Formularelementen:
①Element kann nicht deaktiviert werden
②Element muss ein Namensattribut haben
③Das ausgewählte Kontrollkästchen ist gültig④Das ausgewählte Radio ist gültig
<span style="color: #008080"> 1</span> <span style="color: #000000">$(function(){ </span><span style="color: #008080"> 2</span> $(<span style="color: #800000">"</span><span style="color: #800000">#email</span><span style="color: #800000">"</span><span style="color: #000000">).blur(function(){ </span><span style="color: #008080"> 3</span> <span style="color: #0000ff">var</span> email=$(<span style="color: #800000">"</span><span style="color: #800000">#email</span><span style="color: #800000">"</span><span style="color: #000000">).val(); </span><span style="color: #008080"> 4</span> <span style="color: #0000ff">if</span>(email==<span style="color: #0000ff">null</span> || email==<span style="color: #800000">""</span><span style="color: #000000">){ </span><span style="color: #008080"> 5</span> $(<span style="color: #800000">"</span><span style="color: #800000">#samp</span><span style="color: #800000">"</span>).html(<span style="color: #800000">"</span><span style="color: #800000">邮箱不能为空!</span><span style="color: #800000">"</span><span style="color: #000000">); </span><span style="color: #008080"> 6</span> <span style="color: #000000"> } </span><span style="color: #008080"> 7</span> <span style="color: #0000ff">else</span><span style="color: #000000">{ </span><span style="color: #008080"> 8</span> $.<span style="color: #0000ff">get</span>(<span style="color: #800000">"</span><span style="color: #800000">userServlet</span><span style="color: #800000">"</span>,<span style="color: #800000">"</span><span style="color: #800000">email=</span><span style="color: #800000">"</span>+<span style="color: #000000">email,callBack); </span><span style="color: #008080"> 9</span> <span style="color: #000000"> function callBack(data){ </span><span style="color: #008080">10</span> <span style="color: #0000ff">if</span>(data==<span style="color: #800000">"</span><span style="color: #800000">true</span><span style="color: #800000">"</span><span style="color: #000000">){ </span><span style="color: #008080">11</span> $(<span style="color: #800000">"</span><span style="color: #800000">#samp</span><span style="color: #800000">"</span>).html(<span style="color: #800000">"</span><span style="color: #800000">邮箱已被注册!</span><span style="color: #800000">"</span><span style="color: #000000">); </span><span style="color: #008080">12</span> <span style="color: #000000"> } </span><span style="color: #008080">13</span> <span style="color: #0000ff">else</span><span style="color: #000000">{ </span><span style="color: #008080">14</span> $(<span style="color: #800000">"</span><span style="color: #800000">#samp</span><span style="color: #800000">"</span>).html(<span style="color: #800000">"</span><span style="color: #800000">邮箱可注册!</span><span style="color: #800000">"</span><span style="color: #000000">); </span><span style="color: #008080">15</span> <span style="color: #000000"> } </span><span style="color: #008080">16</span> <span style="color: #000000"> } </span><span style="color: #008080">17</span> <span style="color: #000000"> } </span><span style="color: #008080">18</span> <span style="color: #000000"> }); </span><span style="color: #008080">19</span> <span style="color: #008080">20</span> });⑤Nur die Schaltfläche „Senden“, die das Sendeereignis auslöst, ist gültig
⑥Dateielement wird nicht serialisiert
<span style="color: #008080"> 1</span> $.getJSON("userServlet","por=top"<span style="color: #000000">,callTopics); </span><span style="color: #008080"> 2</span> <span style="color: #008080"> 3</span> <span style="color: #0000ff">function</span><span style="color: #000000"> callTopics(top){ </span><span style="color: #008080"> 4</span> <span style="color: #008080"> 5</span> <span style="color: #0000ff">var</span> $userul=$("#userul"<span style="color: #000000">).empty(); </span><span style="color: #008080"> 6</span> <span style="color: #0000ff">for</span>(<span style="color: #0000ff">var</span> i=0;i<<span style="color: #000000">top.length;){ </span><span style="color: #008080"> 7</span> <span style="color: #008000">//</span><span style="color: #008000">alert("ddd");</span> <span style="color: #008080"> 8</span> <span style="color: #000000"> $userul.append( </span><span style="color: #008080"> 9</span> "<li>"+top[i].topics+" <a href=''>修改</a> <a href=''>删除</a></li>" <span style="color: #008080">10</span> <span style="color: #000000"> ); </span><span style="color: #008080">11</span> i++<span style="color: #000000">; </span><span style="color: #008080">12</span> <span style="color: #0000ff">if</span>(i==<span style="color: #000000">top.length){ </span><span style="color: #008080">13</span> <span style="color: #008080">14</span> <span style="color: #0000ff">break</span><span style="color: #000000">; </span><span style="color: #008080">15</span> <span style="color: #000000"> } </span><span style="color: #008080">16</span> <span style="color: #000000"> } </span><span style="color: #008080">17</span> }
3. Ajax implementieren
<span style="color: #008080"> 1</span> <span style="color: #000000">$.ajax({ </span><span style="color: #008080"> 2</span> "url":"userServlet"<span style="color: #000000">, </span><span style="color: #008080"> 3</span> "type":"GET"<span style="color: #000000">, </span><span style="color: #008080"> 4</span> "data":"por=top1"<span style="color: #000000">, </span><span style="color: #008080"> 5</span> "dataType":"html"<span style="color: #000000">, </span><span style="color: #008080"> 6</span> "success"<span style="color: #000000">:callTopics </span><span style="color: #008080"> 7</span> <span style="color: #000000">}); </span><span style="color: #008080"> 8</span> <span style="color: #0000ff">function</span><span style="color: #000000"> callTopics(data){ </span><span style="color: #008080"> 9</span> $("#userul"<span style="color: #000000">).html(data); </span><span style="color: #008080">10</span> }1. Verwenden Sie die Methode $.get(), um die asynchrone Überprüfung der registrierten E-Mail-Adresse zu implementieren
$("#userul").load("userServlet","por=top1");2. Verwenden Sie die Methode $.getJSON(), um die Themenliste der Administratorseite zu laden
<span style="color: #008080"> 1</span> <span style="color: #0000ff">if</span>(por.equals("addCom"<span style="color: #000000">)){ </span><span style="color: #008080"> 2</span> <span style="color: #008000">//</span><span style="color: #008000">上机5添加评论</span> <span style="color: #008080"> 3</span> comment com=<span style="color: #0000ff">new</span><span style="color: #000000"> comment(); </span><span style="color: #008080"> 4</span> commentdao comdao=<span style="color: #0000ff">new</span><span style="color: #000000"> commentimpl(); </span><span style="color: #008080"> 5</span> String name=request.getParameter("cauthor1"<span style="color: #000000">); </span><span style="color: #008080"> 6</span> String ip=request.getParameter("cip"<span style="color: #000000">); </span><span style="color: #008080"> 7</span> String content=request.getParameter("ccontent"<span style="color: #000000">); </span><span style="color: #008080"> 8</span> String ctime="2017-7-4"<span style="color: #000000">; </span><span style="color: #008080"> 9</span> <span style="color: #008000">//</span><span style="color: #008000">time.toString();</span> <span style="color: #008080">10</span> <span style="color: #000000"> com.setCname(name); </span><span style="color: #008080">11</span> <span style="color: #000000"> com.setCcontent(content); </span><span style="color: #008080">12</span> <span style="color: #000000"> com.setCip(ip); </span><span style="color: #008080">13</span> <span style="color: #000000"> com.setCtime(ctime); </span><span style="color: #008080">14</span> <span style="color: #0000ff">int</span> re=<span style="color: #000000">comdao.addcomment(com); </span><span style="color: #008080">15</span> String result=""<span style="color: #000000">; </span><span style="color: #008080">16</span> <span style="color: #0000ff">if</span>(re>0<span style="color: #000000">){ </span><span style="color: #008080">17</span> result="success"<span style="color: #000000">; </span><span style="color: #008080">18</span> }<span style="color: #0000ff">else</span><span style="color: #000000"> { </span><span style="color: #008080">19</span> result="添加失败!"<span style="color: #000000">; </span><span style="color: #008080">20</span> <span style="color: #000000"> } </span><span style="color: #008080">21</span> <span style="color: #008080">22</span> <span style="color: #008080">23</span> response.setContentType("text/html;charset=UTF-8"<span style="color: #000000">); </span><span style="color: #008080">24</span> PrintWriter out=<span style="color: #000000">response.getWriter(); </span><span style="color: #008080">25</span> out.print("[{\"result\":\""+result+"\",\"ctime\":\""+ctime+"\"}]"<span style="color: #000000">); </span><span style="color: #008080">26</span> <span style="color: #000000"> out.flush(); </span><span style="color: #008080">27</span> <span style="color: #000000"> out.close(); </span><span style="color: #008080">28</span> <span style="color: #008080">29</span> }3. Kehren Sie direkt zur Theme-Verwaltungsseite für die HTML-Inhaltsgenerierung in Ajax zurück
4. Verwenden Sie die Methode .load(), um die vom Server generierte Themenliste für die Administratorseite zu laden
topdao nd=<span style="color: #0000ff">new</span><span style="color: #000000"> topimpl(); List</span><top> listtop=<span style="color: #000000">nd.alltop(); String titleJson</span>=JSON.toJSONStringWithDateFormat(listtop,"yyyy-MM--dd HH:mm:ss");
5. Verwenden Sie Ajax, um die Funktion für aktualisierungsfreie Nachrichtenkommentare zu implementieren
6. Verwenden Sie FastJSON, um die Administratorseite so umzuwandeln, dass die Themenliste geladen wird 4. Verständnis vertiefen Der vom Server generierte JSON-String-Code kann durch die zugehörige API von FastJSON vereinfacht werden Die Methode $.parseJSON() wird verwendet, um eine JSON-Formatzeichenfolge in ein JSON-Objekt zu analysieren
Das obige ist der detaillierte Inhalt vonAccp8.0-Konvertierungslehrbuch Kapitel 11 Verständnis und Praxis der Ajax-Interaktionserweiterung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!