ajax简单后台交互-我们到底能走多远系列（28）
添加时间:2013-7-3 点击量:
我们到底能走多远系列（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（公布成功！）;
}）;
让我们持续前行
----------------------------------------------------------------------
尽力不必然成功，但不尽力必然不会成功。
共勉。
彼此相爱，却不要让爱成了束缚：不如让它成为涌动的大海，两岸乃是你们的灵魂。互斟满杯，却不要同饮一杯。相赠面包，却不要共食一个。一起歌舞欢喜，却依然各自独立，相互交心，却不是让对方收藏。因为唯有生命之手，方能收容你们的心。站在一起却不要过于靠近。—— 纪伯伦《先知》
我们到底能走多远系列（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（公布成功！）;
}）;
让我们持续前行
----------------------------------------------------------------------
尽力不必然成功，但不尽力必然不会成功。
共勉。
彼此相爱，却不要让爱成了束缚：不如让它成为涌动的大海，两岸乃是你们的灵魂。互斟满杯，却不要同饮一杯。相赠面包，却不要共食一个。一起歌舞欢喜，却依然各自独立，相互交心，却不是让对方收藏。因为唯有生命之手，方能收容你们的心。站在一起却不要过于靠近。—— 纪伯伦《先知》
