Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1993
  • 博文数量: 2
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 20
  • 用 户 组: 普通用户
  • 注册时间: 2013-07-11 16:50
文章分类
文章存档

2013年(2)

我的朋友
最近访客

分类: JavaScript

2013-07-11 16:57:42

1,扯淡

  单身的生活,大部分时间享受自由,小部分时间忍受寂寞。

  生活有时候,其实蛮苦涩,让人难以下咽。那些用岁月积累起来的苦闷,无处宣泄,在自己的脑海里蔓延成一片片荆棘,让你每每想坐下休息的时候刺痛你,让你在睡梦里惊醒,在快乐里落寞,在喜悦中突然感到悲伤。

  可是,我们顺利熬到了今天,应该说:我们是那些还没有和生活妥协的人。

2,主题

  写页面总会遇到的,用得多了自然熟练了,或会存着源码,要用了copy下就好了。

  这里是简单实现一个利用 的ajax方法实现的查询后台信息的功能。

 1,页面上的控件:


        <tr> <td align="right"><div align="right"><strong>选择微信:strong>div>td> <td align="left"> <input type="text" id="wxName" /> <a href="#" onclick="addWX()" class="button" style="padding: 2px 8px !important;">添加a> td> tr> <tr> <td align="left"> td> <td align="left"> <div id="wxDiv"> div> td> tr>


   页面效果:(看起都不nb的样子)

  

 2,js addWX()方法就是直接ajax调用后台的代码了:

 


function addWX(){ var wxName = $("#wxName").val(); if(wxName==""){
        alert("请输入微信号或名称!"); return;
    }
    
    $.ajax({
            type:"POST",
            contentType:"lication/json;charset=UTF-8",
            url:"../wx/getWXById.json",
            data:{wxName:wxName},
            dataType:"json",
            success:function(result){ if(result.RC  == "0"){
                    alert("所填微信不存在!"); return;
                }else{ var wxId = result.wxId; var wxName = result.wxName;
                    storeWX(wxId, wxName);
                }
            }
        });
}


 

解释:使用了POST的方式提交了信息,contentType:"application/json;charset=UTF-8",返回的数据格式是json格式的。

注意:这里使用了success触发回调,如果使用Complete触发回调,会有result无法很简单的如result.RC这样得到返回信息。result.RC会没有定义的问题。

在回调中的js函数如下:


function storeWX(wxId, wxName){ var storeWX = %wxName%;
    storeWXHtml = storeWXHtml.replace("%wxId%", wxId).replace("%wxName%", wxName);
    $("#wxDiv").append(storeWXHtml);
    getwxs();
} function removeWX(wxId){
    $("#"+wxId).remove();
    getwxs();
} function getwxs(){ var wxs="";
     $("#wxDiv a").each(function(){
         wxs = wxs + this.id + "|";
     })
     wxs = wxs.substring(0,wxs.length - 1);
     $("#wxs").val(wxs);
}


  可以看到回调中吧查询到的内容展现在页面上,然后将查询的结果存在页面中,继续添加的时候就需要继续保存添加的微信,所以使用“|”分割开的一个字符串来存储多个数据如:123|124|125,存在页面的hidden的input中:


<input id="wxs" type="hidden" value="" name="">


后台查询如果有数据,页面的效果就是:

storeWX  js方法 里看 产生的html,是一个a标签,带了个点击事件,点击 “小道消息”,就可以remove掉他了,remove后需要重新更新存储的wxs

 

3,后台

  后台的工作很简单,取得查询的条件,去查询一遍,返回结果。


    String params = RequestUtil.getContent(request);
        params = URLDecoder.decode(params,"UTF-8");//wxName=xxxx String wxName = params.split("=")[1];
        JSONObject result = new JSONObject();
        WxDO wx = wxService.getWxByNameOrUserName(wxName); if(wx == null){
            
            result.put("RC", 0);//没有微信 }else{
            result.put("RC", 1);
            result.put("wxName", wx.getName());
            result.put("wxId", wx.getId());
        } return result;


使用了getContent方法是因为使用了POST方式,所以后台需要从http请求中的body里拿内容如下:


public static String getContent(HttpServletRequest request) {
        StringBuffer buffer = new StringBuffer();
        InputStream is = null; try {
            is = request.getInputStream();
            String content = "";

            BufferedReader reader = new BufferedReader(new InputStreamReader(is, "UTF-8")); while ((content = reader.readLine()) != null) {
                buffer.append(content);
            }

        } catch (IOException e) {
            logger.error("request.getInputStream failed :", e);
        } finally { if (is != null) { try {
                    is.close();
                } catch (Exception e) { // do noting  }
            }
        } return buffer.toString();
    }


 

注意:拿出来的内容中文是进行了UTF-8转码的,所以需要 URLDecoder.decode(params,"UTF-8") 进行反转回来。

也可以通过使用GET方式,避免中文乱码问题

  1,把js中的POST改成GET

  2,后台获取方式修改:


String wxName=request.getParameter("wxName");


 

jquery也提供了简化版的ajax方法:$post

例子:


$.post("releaseAdvert.html", {ids:ids}, function(data){
                    alert("发布成功!");
            });


 

让我们继续前行

----------------------------------------------------------------------

努力不一定成功,但不努力肯定不会成功。
共勉。

 

阅读(145) | 评论(0) | 转发(0) |
0

上一篇:没有了

下一篇:数据库安全管理教程-oracle DB2 SQL server mysql

给主人留下些什么吧!~~