ajax簡單后台交互-我們到底能走多遠系列（28）

我們到底能走多遠系列（28）

1，扯淡

　　單身的生活，大部分時間享受自由，小部分時間忍受寂寞。

　　生活有時候，其實蠻苦澀，讓人難以下咽。那些用歲月積累起來的苦悶，無處宣泄，在自己的腦海里蔓延成一片片荊棘，讓你每每想坐下休息的時候刺痛你，讓你在睡夢里驚醒，在快樂里落寞，在喜悅中突然感到悲傷。

　　可是，我們順利熬到了今天，應該說：我們是那些還沒有和生活妥協的人。

2，主題

　　寫頁面總會遇到ajax的，用得多了自然熟練了，或會存着源碼，要用了copy下就好了。

　　這里是簡單實現一個利用jquery 的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:"application/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 storeWXHtml = '<a id="%wxId%" href="#" onclick="removeWX(this.id)"  style="padding: 3px 3px !important;">%wxName%</a>';
    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("發布成功！");
            });

 

讓我們繼續前行

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

努力不一定成功，但不努力肯定不會成功。
共勉。