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

  • 相关阅读:
    js中的原生Ajax和JQuery中的Ajax
    this的用法
    static的特性
    时政20180807
    java compiler没有1.8怎么办
    Description Resource Path Location Type Java compiler level does not match the version of the installed Java project facet Unknown Faceted Project Problem (Java Version Mismatch)
    分词器
    [数算]有一个工程甲、乙、丙单独做,分别要48天、72天、96天完成
    一点感想
    解析Excel文件 Apache POI框架使用
  • 原文地址:https://www.cnblogs.com/a782126844/p/7115149.html
Copyright © 2011-2022 走看看