accp8.0 conversion textbook Chapter 11 Ajax interaction expansion understanding and practice

①Miscellaneous Notes: There is original JavaScript to implement ajax. Here is a simpler way to implement ajax

②Common parameters of $.get() method

parameter	type	illustrate
url	String	Required, specify the sending address
data	PlainObject or String	Optional, specify the data sent by the request
success	Function(PlainObject data, String textStatus,jqXHR jqxhr)	Optional, function to be called after success Parameter data: Optional server return result Parameter textStatus: optional description of request status Parameter jqxhr: optional is a superset of XMLHttpRequest (Required if dataType is specified)
dataType	String	Optional: Data type expected to be returned by the server

③The common parameters of the $.post() method are the same as above

1. Word part (JSON common words)

1.load loading 2.serialize serialization 3.contains 4.feature feature

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

9.prototype prototype 10.conflict conflict

2. Some common questions about JSON

1.The main method of implementing Ajax with jQuery

①Original ecological implementation

②$.get() and $.post() methods

③$.getJSON() method

④.load()

2.jQuery parsing form data

jQuery's .serializeArray() method will detect valid controls from a set of form elements:

①Element cannot be disabled

②Element must have name attribute

③The selected checkbox is valid

④The selected radio is valid

⑤Only the submit button that triggers the submit event is valid

⑥file element will not be serialized

3.jQuery and other 3

3. Implement Ajax

1. Use the $.get() method to implement asynchronous verification of registered email

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

2. Use the $.getJSON() method to load the administrator page theme list

<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. Directly return the HTML content generation theme management page in 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>         }

4. Use the .load() method to load the server-generated topic list for the administrator page

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

5. Use Ajax to implement news comment function without refreshing

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

6. Use FastJSON to transform the administrator page to load the theme list

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

4. Deepen understanding

The JSON string code generated by the server can be simplified through FastJSON's related API

$.parseJSON() method is used to parse JSON format string into JSON object

The above is the detailed content of accp8.0 conversion textbook Chapter 11 Ajax interaction expansion understanding and practice. For more information, please follow other related articles on the PHP Chinese website!