当前位置:千赢国际官网 > 千赢网页手机版登入 > 事件探索,JQuery异步获取返回值中文乱码的解决

事件探索,JQuery异步获取返回值中文乱码的解决

文章作者:千赢网页手机版登入 上传时间:2019-08-31

JQuery异步获取返回值中文乱码的解决方法,jquery返回值

用jqgrid异步获取列表值,遇到个问题,服务器端从数据库取到的数据没有出现中文乱码问题(日志打出来是没有乱码的),但是异步传到客户的时候却出现了乱码。 服务器端已经编码过了(UTF-8编码)。开始一直怀疑是客户端的问题,比如客户端和服务器端编码不一致啊,也怀疑是不是jqGrid工具函数中少配了 contentType: "application/x-www-form-urlencoded; charset=utf-8",   等等问题。

结果都不是,纠结了几个小时,后来经过大牛的提醒发现,原来代码还是出在服务器端,疏忽了。

@RequestMapping(value = "/searchUserList.form")
  @ResponseBody
  public void searchUserList(int page, int rows, HttpServletRequest request, HttpServletResponse response) throws IOException{
    System.out.println("idcard=" idCard "n page=" page "n rows=" rows);

    List<User> list = userService.findByIDCard(idCard);

    int totalRecord = list.size();
    int totalPage = totalRecord%rows == 0 ? totalRecord/rows : (totalRecord/rows 1);

    int index = (page-1)*rows;
    int pageSize = rows;

    String json = "{"total": "" totalPage "", "page": "" page "", "records": "" totalRecord "", "rows": ["; 
    for (int i = index; i < pageSize   index && i<totalRecord; i  ) { 
      User u = list.get(i);
      json  = "{"id":""   u.getUserId()   "","userName":"" u.getUserName() "","idCard":"" 
      u.getIdCard()  "","userTel":"" u.getUserTel() "","userSex":"" u.getUserSex() 
      "","bankCard":"" u.getBankCard() "","cardStatus":"" u.getCardSatus() "","createTime":"" 
      u.getCreateTime() ""}";
      if (i != pageSize   index - 1 && i != totalRecord - 1) { 
        json  = ","; 
      } 
    } 
    json  = "]}";
    request.setCharacterEncoding("utf-8"); //这里不设置编码会有乱码
    response.setContentType("text/html;charset=utf-8");
    response.setHeader("Cache-Control", "no-cache"); 
    PrintWriter out = response.getWriter(); //输出中文,这一句一定要放到response.setContentType("text/html;charset=utf-8"), response.setHeader("Cache-Control", "no-cache")后面,否则中文返回到页面是乱码 
    out.print(json.toString());
    out.flush();
    out.close();
  }

用jqgrid异步获取列表值,遇到个问题,服务器端从数据库取到的数据没有出现中文乱...

javascript 事件探索

1 事件流:

DOM同时支持两种事件模型:捕获型事件(非IE,从document 到具体元素)和冒泡型事件(IE,从具体元素到document)。

2 事件处理程序

html事件处理程序,简单点就是在html 元素上面直接绑定一个onclick 类似的事件,缺点显而易见是有太强的耦合性

Dom0 级事件处理程序,类似于document.getById().onclick=function(){} 这样类似的

3 DOM2级事件处理程序

DOM2级事件定义了两个方法(非IE):用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。它们都接收三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。

IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件

4 事件对象
事件对象event
1、DOM中的事件对象
(1)、type:获取事件类型
(2)、target:事件目标
(3)、stopPropagation() 阻止事件冒泡
(4)、preventDefault() 阻止事件的默认行为
2、IE中的事件对象
(1)、type:获取事件类型
(2)、srcElement:事件目标
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的默认行为

下面通过一个具体例子来进行js封装和了解事件对象

index.html

   事件流

   <script src="js/event.js"></script>
   <script src="js/script.js"></script>





         跳转

event.js

var eventUtil={
          // 添加句柄
          addHandler:function(element,type,handler){
               if(element.addEventListener){
                 element.addEventListener(type,handler,false);
               }else if(element.attachEvent){
                 element.attachEvent('on' type,handler);
               }else{
                 element['on' type]=handler;
               }
          },
          // 删除句柄
          removeHandler:function(element,type,handler){
               if(element.removeEventListener){
                 element.removeEventListener(type,handler,false);
               }else if(element.detachEvent){
                 element.detachEvent('on' type,handler);
               }else{
                 element['on' type]=null;
               }
          },
          getEvent:function(event){
            return event?event:window.event;
          },
          getType:function(event){
            return event.type;
          },
          getElement:function(event){
            return event.target || event.srcElement;
          },
          preventDefault:function(event){
            if(event.preventDefault){
              event.preventDefault();
            }else{
              event.returnValue=false;
            }
          },
         stopPropagation:function(event){
           if(event.stopPropagation){
             event.stopPropagation();
           }else{
             event.cancelBubble=true;
           }
         }
  }

script.js

window.onload=function(){
  var go=document.getElementById('go'),
      box=document.getElementById('box');

  eventUtil.addHandler(box,'click',function(){
   alert('我是整个父盒子');
  });

  eventUtil.addHandler(go,'click',function(e){
   //e=eventUtil.getEvent(e);
   e=e || window.event;
   alert(eventUtil.getElement(e).nodeName);
   eventUtil.preventDefault(e);
   eventUtil.stopPropagation(e);
  });

}

事件探索 1 事件流: DOM同时支持两种事件模型:捕获型事件(非IE,从document 到具体元素)和冒泡型事件(IE,从具体元素到docum...

前端极易被误导的css选择器权重计算及css内联样式的妙用技巧,css选择器

  记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较。。。
  我只想说:真是误人子弟,害人不浅!

  最近,在前端群里还发现以上观点类似的奇葩聊天,真是***

  其实,也是在很久以前,看了腾讯ISUX的一位前端工程师-麦时分享的一篇技术文章(个人站点已失效,就不贴出来了),才了解到真正的css选择器权重计算。

  以下是css选择器权重计算精华所在,翻译自国外的文档(记得是W3C给出的计算规则)


  如果一个声明来自style属性而不是选择器,计作1或者a=1(在一个html文档中,元素“style”的值是样式表规则,这个规则中没有选择器,所以a=1, b=0, c=0, and d=0)
  选择器中id属性的个数,计作b
  选择器中其他属性以及伪类的个数,计作c
  选择器中元素及伪元素的个数,计作d
  优先级只基与选择器的形式,特殊的,一个“[id=p33]“形式的选择器是按照属性选择器来计算的(a=0, b=0, c=1, d=0),即使用定义中包含ID
  一些例子:  

 1 * {}     /* a=0 b=0 c=0 d=0 -> 优先级= 0,0,0,0 */
 2 li {}     /* a=0 b=0 c=0 d=1 -> 优先级 = 0,0,0,1 */
 3 li:first-line {}     /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */
 4 ul li {}     /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */
 5 ul ol li {}     /* a=0 b=0 c=0 d=3 -> 优先级 = 0,0,0,3 */
 6 h1   *[rel=up]{}     /* a=0 b=0 c=1 d=1 -> 优先级 = 0,0,1,1 */
 7 ul ol li.red {}     /* a=0 b=0 c=1 d=3 -> 优先级 = 0,0,1,3 */
 8 li.red.level {}     /* a=0 b=0 c=2 d=1 -> 优先级 = 0,0,2,1 */
 9 #x34y {}     /* a=0 b=1 c=0 d=0 -> 优先级 = 0,1,0,0 */
10 style=""     /* a=1 b=0 c=0 d=0 -> 优先级 = 1,0,0,0 */

 

  [备注] 
  :first-line 伪元素
  [rel=up] 其他属性

  了解了这些 你应该不会再对”11个class与一个id”谁的优先级高“这类的问题有疑问了吧,因为a,b,c,d只是在各自位置数字的累加,而不会越级。


  其实,这里还漏了一个重要的东西,那就是!important了。这是一个神奇的东西~

  首先强调的是!important的使用问题:如height:100px !important; 菜鸟一定会疑问,为什么important前面要加空格,其实没什么,不加也可以,只是为了阅读方便,呵呵~

  important可以让前面所有的权重计算变得可笑,因为css属性值添加了important后,前面所有的努力白费了,行内式的权重也高不过它,除非再声明一个加important的属性值来覆盖它(注意是由css属性值读取的顺序决定的)。

  比如h1{height:100px !important;}要覆盖这个height值为200px的话,要在其后加上h1{height:200px !important;}

  而一般!important值的相互覆盖,是取决于浏览器在加载css文件时,对样式表的读取顺序决定的。在大项目中,很难预料你的文件是先加载还是后加载,特别是公用css文件,不建议加这个特殊值。

  讲到这里,提个额外的点:css样式的读取解析,是按从右到左进行的,所以不要误以为写#id .class1 .class2 .class3{}这样的选择器,浏览器会因为唯一id存在而查找很快,其实是更慢,最好是保持三个层级,不要层级过多。

  还有,很多人喜欢写.class1.class2{}这样的交集选择器,一般是跟js配合做一些显示效果。关键是IE6不支持这种交集选择器,像p.class1{}这样的标准复合选择器,IE6等低版本浏览器才能完美支持。(ps:公司同事踩过这个坑,在IE6下把我的css代码给覆盖了,我还查了老半天——最后知道真相的我眼泪掉下来)

   

  其实,懂得上面的这些东西了,你的css水平才算入门(没错,只算入门)。

  接下来,讲一些很实用的技巧(其实也就是上面基础知识的融会贯通):

  场景:当鼠标hover到id为content的div后,将高度由auto改变为30px;

  1.菜鸟级写法

1 $("#content").hover(function(){
2     $(this).css({"height":"30px"});
3 },function(){
4     $(this).css({"height":"auto"});
5 });

  那如果这个div本身height不是auto呢,你是不是又得知道其默认的height属性值。

  所以这种写法很不好,学术一点的叫做硬编码、强耦合。

  2.普通写法

1 .content_normal{height:20px;} /*默 认应用的样式*/
2 .content_change{height:30px} /*hover时候应用的样式*/

1 $("#content").hover(function(){
2     $(this).addClass("content_change");
3 },function(){
4     $(this).removeClass("content_change");
5 });

 

  3.适用性的高级写法

var $extStyle = $("head").find("#extStyle");

$("#content").hover(function(){

    //向头部插入一个内链样式表
    if($extStyle.length < 1){
         var styleElem = document.createElement("style");
         styleElem.setAttribute("type", "text/css");
         styleElem.setAttribute("id", "extStyle");
          $("head").append(styleElem);
         $extStyle = $("head").find("#extStyle");
      }

     $extStyle.append("#content{height:30px;}");
},function(){
     $extStyle.empty();
});

  第三种写法的好处就是,不管需求怎么变,都可以轻松覆盖样式,也可以避免第一种写法存在的style="height:auto;"的情况。因为height:auto;有时也是致命的,在项目中就遇到过这样的问题。

  缺点就是要向头部插入一个style节点,对于小需求的话就有点小题大做。但是大项目中,可以内部默认一个style节点负责插入这些暂时性修改的样式数据,方便删除,不弄脏代码。

  最后提一个很重要的点:在IE下,style节点最多是31个,多了它不认,呵呵~

  via:cnblogs.com/walls/p/4263463.html 

记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计...

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:事件探索,JQuery异步获取返回值中文乱码的解决

关键词: 千赢国际官网