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

参数	类型	说明
url	String	必选，规定发送地址
data	PlainObject或String	可选，规定请求发送的数据
success	Function(PlainObject data, String textStatus,jqXHR jqxhr)	可选，成功后调用的函数 参数data:可选服务器返回结果 参数textStatus：可选描述请求状态 参数jqxhr：可选是XMLHttpRequest的超集 （如果指定dataType这个必选）
dataType	String	可选：预期服务器返回的数据类型

Funktion(PlainObject-Daten,

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

③Die allgemeinen Parameter der $.post()-Methode sind die gleichen wie oben

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

3.jQuery und andere 3

<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!