①杂记:前面有原生态JavaScript实现ajax这里又多了更简单的方法实现ajax
②$.get()方法的常用参数
参数 | 类型 | 说明 |
url | String | 必选,规定发送地址 |
data | PlainObject或String | 可选,规定请求发送的数据 |
success |
Function(PlainObject data, String textStatus,jqXHR jqxhr) |
可选,成功后调用的函数 参数data:可选服务器返回结果 参数textStatus:可选描述请求状态 参数jqxhr:可选是XMLHttpRequest的超集 (如果指定dataType这个必选) |
dataType | String | 可选:预期服务器返回的数据类型 |
③$.post()方法的常用参数同上
一.单词部分(JSON常用单词)
1.load 加载 2.serialize序列化 3.contains 包含 4.feature 特征
5.quote 引用 6.skip 跳跃 7.transient 短暂的 8.pretty 相当
9.prototype 原型 10.conflict 冲突
二.关于JSON一些常见问题
1.jQuery实现Ajax的主要方法
①原生态实现
②$.get()和$.post()方法
③$.getJSON()方法
④.load()
2.jQuery解析表单数据
jQuery的.serializeArray()方法会从一组表单元素中检测有效控件:
①元素不能被禁用
②元素必须有name属性
③选中的checkbox才是有效的
④选中的radio才是有效的
⑤只有触发提交事件的submit按钮才是有效的
⑥file元素不会被序列化
3.jQuery与其它3
三.实现Ajax
1.使用$.get()方法实现异步验证注册邮箱
<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.使用$.getJSON()方法加载管理员页面主题列表
<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中直接返回HTML内容生成主题管理页面
<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.使用.load()方法为管理员页面加载服务器生成的主题列表
$("#userul").load("userServlet","por=top1");
5.使用Ajax实现无刷新的新闻评论功能
<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.使用FastJSON改造管理员页面加载主题列表
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");
四.加深理解
通过FastJSON的相关API可以简化服务器端生成的JSON字符串代码
$.parseJSON()方法用来将JSON格式字符串解析为JSON对象
Atas ialah kandungan terperinci accp8.0转换教材第11章Ajax交互扩展理解与练习. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!