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

程序员文章站 2022-05-11 23:07:03

...

①杂记：前面有原生态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+"&nbsp;&nbsp;<a href=''>修改</a>&nbsp;&nbsp;<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对象

以上就是accp8.0转换教材第11章Ajax交互扩展理解与练习的详细内容，更多请关注其它相关文章！