zoukankan      html  css  js  c++  java
  • accp8.0转换教材第11章Ajax交互扩展理解与练习

    ①杂记:前面有原生态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对象

    欢迎提问,欢迎指错,欢迎讨论学习信息 有需要的私聊 发布评论即可 都能回复的

      原文在博客园http://www.cnblogs.com/a782126844/有需要可以联系扣扣:2265682997

  • 相关阅读:
    JavaScript 垃圾回收
    JavaScript 跳坑指南
    javaScript AJAX
    高效 JavaScript
    Java使用 Thumbnails 压缩图片
    Vue前端压缩图片
    JS input输入框字数超出长度显示省略号.....
    Vue图片浏览组件vviewer使用
    浏览器获取京东cookie
    图片在容器内水平垂直居中显示
  • 原文地址:https://www.cnblogs.com/a782126844/p/7115149.html
Copyright © 2011-2022 走看看