ajax简单后台交互
2013-07-03 20:43
288 查看
ajax简单后台交互
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这样得到返回信息。[b]result.RC会没有定义的问题。[/b]
在回调中的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(); }
注意:拿出来的内容中文是进行了[b]UTF-8转码的,所以需要 URLDecoder.decode(params,"UTF-8") 进行反转回来。[/b]
也可以通过使用GET方式,避免中文乱码问题:
1,把js中的POST改成GET
2,后台获取方式修改:
String wxName=request.getParameter("wxName");
jquery也提供了简化版的ajax方法:$post
例子:
$.post("releaseAdvert.html", {ids:ids}, function(data){ alert("发布成功!"); });
让我们继续前行
----------------------------------------------------------------------
努力不一定成功,但不努力肯定不会成功。
共勉。
相关文章推荐
- 一个简单的ajax与后台交互的例子
- Ajax 与后台 HttpServlet 的简单交互
- ajax简单后台交互
- ajax简单后台交互-我们到底能走多远系列(28)
- ajax前后台数据简单交互(ssm)
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)
- Ajax之前后台简单交互---登录实现
- json+ajax 在前后台的简单交互
- 简单的ajax让前端jquery与后台node.js交互
- TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
- 树结构ztree的 ajax交互的简单使用
- 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
- angular中采用ajax交互后台servlet问题
- SpringMVC+Hibernate利用ajax实现前端后台数据交互
- jq通过对象获取其ID值,再简单ajax传到后台改值
- AJAX如何与后台交互
- extjs 简单的ajax请求实例和后台返回格式
- 纯HTML页面为了避免频繁前后台Ajax交互方案
- android简单的UI与后台线程交互的框架
- 让我苦苦寻找的那段代码---springmvc的ajax前后台交互