accp8.0转换教材第11章：Ajax交互扩展理解与练习_H5之家

> 编程开发 > AJAX相关 >

accp8.0转换教材第11章：Ajax交互扩展理解与练习 2017-07-05 16:35　出处：清屏网　人气：　

①杂记：前面有原生态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()方法实现异步验证注册邮箱

1 $(function(){ 2 $("#email").blur(function(){ 3 var email=$("#email").val(); 4 if(email==null || email==""){ 5 $("#samp").html("邮箱不能为空！"); 6 } 7 else{ 8 $.get("userServlet","email="+email,callBack); 9 function callBack(data){ 10 if(data=="true"){ 11 $("#samp").html("邮箱已被注册！"); 12 } 13 else{ 14 $("#samp").html("邮箱可注册！"); 15 } 16 } 17 } 18 }); 19 20 });

2.使用$.getJSON()方法加载管理员页面主题列表

1 $.getJSON("userServlet","por=top",callTopics); 2 3 function callTopics(top){ 4 5 var $userul=$("#userul").empty(); 6 for(var i=0;i<top.length;){ 7 //alert("ddd"); 8 $userul.append( 9 "<li>"+top[i].topics+" <a href=''>修改</a> <a href=''>删除</a></li>" 10 ); 11 i++; 12 if(i==top.length){ 13 14 break; 15 } 16 } 17 }

3.在Ajax中直接返回HTML内容生成主题管理页面

1 $.ajax({ 2 "url":"userServlet", 3 "type":"GET", 4 "data":"por=top1", 5 "dataType":"html", 6 "success":callTopics 7 }); 8 function callTopics(data){ 9 $("#userul").html(data); 10 }

4.使用.load()方法为管理员页面加载服务器生成的主题列表

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

5.使用Ajax实现无刷新的新闻评论功能

1 if(por.equals("addCom")){ 2 //上机5添加评论 3 comment com=new comment(); 4 commentdao comdao=new commentimpl(); 5 String name=request.getParameter("cauthor1"); 6 String ip=request.getParameter("cip"); 7 String content=request.getParameter("ccontent"); 8 String ctime="2017-7-4"; 9 //time.toString(); 10 com.setCname(name); 11 com.setCcontent(content); 12 com.setCip(ip); 13 com.setCtime(ctime); 14 int re=comdao.addcomment(com); 15 String result=""; 16 if(re>0){ 17 result="success"; 18 }else { 19 result="添加失败！"; 20 } 21 22 23 response.setContentType("text/html;charset=UTF-8"); 24 PrintWriter out=response.getWriter(); 25 out.print("[{\"result\":\""+result+"\",\"ctime\":\""+ctime+"\"}]"); 26 out.flush(); 27 out.close(); 28 29 }

6.使用FastJSON改造管理员页面加载主题列表

topdao nd=new topimpl(); List<top> listtop=nd.alltop(); String titleJson=JSON.toJSONStringWithDateFormat(listtop,"yyyy-MM--dd HH:mm:ss");

四.加深理解

通过FastJSON的相关API可以简化服务器端生成的JSON字符串代码

$.parseJSON()方法用来将JSON格式字符串解析为JSON对象

分享给小伙伴们：

本文标签： accp，Ajax/">accp，Ajax

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻