Manuel de conversion accp8.0 Chapitre 11 Compréhension et pratique de l'expansion des interactions Ajax

①Notes diverses : auparavant, il y avait le JavaScript original pour implémenter ajax, ici il existe un moyen plus simple d'implémenter ajax

②Paramètres communs de la méthode $.get()

Paramètres

Tapez

Description

url

Chaîne

Obligatoire, précisez l'adresse d'envoi

données

PlainObject ou String

Facultatif, précise les données envoyées par la requête

succès

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

Fonction (données PlainObject,

String textStatus,jqXHR jqxhr)

Facultatif, fonction à appeler après succès Données de paramètres : résultat de retour facultatif du serveur Paramètre textStatus : description facultative du statut de la demande

Paramètre jqxhr : facultatif est un surensemble de XMLHttpRequest

(obligatoire si dataType est spécifié)

Type de données

Chaîne

Facultatif : le type de données qui devrait être renvoyé par le serveur

③Les paramètres communs de la méthode $.post() sont les mêmes que ci-dessus

1. Partie mot (mots courants JSON)

1.load charge 2.sérialise la sérialisation 3.contient 4.fonctionnalités

5.quote 6.skip 7.transient 8.pretty

9.prototype prototype 10.conflit conflit

2. Quelques questions courantes sur JSON

1. La principale méthode d'implémentation d'Ajax avec jQuery

①Mise en œuvre écologique originale

②Méthodes $.get() et $.post()

Méthode ③$.getJSON()

④.load()

2.jQuery analyse les données du formulaire

La méthode .serializeArray() de jQuery détectera les contrôles valides à partir d'un ensemble d'éléments de formulaire :

①L'élément ne peut pas être désactivé

②L'élément doit avoir un attribut de nom

③La case cochée est valide

④La radio sélectionnée est valide

<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>    });

⑤Seul le bouton de soumission qui déclenche l'événement de soumission est valide

⑥l'élément de fichier ne sera pas sérialisé

3.jQuery et autres 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. Implémenter Ajax

<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. Utilisez la méthode $.get() pour implémenter la vérification asynchrone de l'adresse e-mail enregistrée

$("#userul").load("userServlet","por=top1");

2. Utilisez la méthode $.getJSON() pour charger la liste des thèmes de la page administrateur

<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. Revenez directement à la page de gestion des thèmes de génération de contenu HTML en Ajax

4. Utilisez la méthode .load() pour charger la liste de sujets générée par le serveur pour la page administrateur

    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. Utilisez Ajax pour implémenter la fonction de commentaires d'actualités sans actualisation

6. Utilisez FastJSON pour transformer la page administrateur afin de charger la liste des thèmes 4. Approfondir la compréhension Le code de chaîne JSON généré par le serveur peut être simplifié grâce à l'API associée de FastJSON La méthode $.parseJSON() est utilisée pour analyser la chaîne de format JSON en objet JSON

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!