正文
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("发布成功！");
});
让我们继续前行
----------------------------------------------------------------------
努力不一定成功，但不努力肯定不会成功。
共勉。
