Home > Web Front-end > JS Tutorial > accp8.0 conversion textbook Chapter 11 Ajax interaction expansion understanding and practice

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

PHP中文网
Release: 2017-07-05 18:10:19
Original
1682 people have browsed it

①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>    });
Copy after login

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>     }
Copy after login

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>         }
Copy after login

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

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

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>         }
Copy after login

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");
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template