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这样得到返回信息。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("发布成功!");
});

让我们继续前行

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

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

 
 

ajax简单后台交互的更多相关文章

  1. ajax简单后台交互-我们到底能走多远系列(28)

    我们到底能走多远系列(28) 1,扯淡 单身的生活,大部分时间享受自由,小部分时间忍受寂寞. 生活有时候,其实蛮苦涩,让人难以下咽.那些用岁月积累起来的苦闷,无处宣泄,在自己的脑海里蔓延成一片片荆棘, ...

  2. 通过PHP前端后台交互/通过ajax前端后台交互/php基础传输数据应用/简单的留言版/简单的注册账户/简单的登录页/

      前  言  PHP     通过上一篇博客,注册账号与登录页面--前后台数据交互  跳转转到index主页,接下来进入主页留言板功能,通过ajax向后台传输数据,同时发表留言. 具体的内容分析如下 ...

  3. 通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用

      前  言  PHP     学习了好久的PHP,今天做一个可以后台交互的登录页和注册页,没做什么判断,简单的了解一下. 具体的内容分析如下: ① PHP中的数据传输-->>由注册页传输 ...

  4. Spring Mvc模式下Jquery Ajax 与后台交互操作

    1.基本代码 1)后台控制器基本代码 @Controller @RequestMapping("/user") public class UserController { @Aut ...

  5. $Django ajax简介 ajax简单数据交互,上传文件(form-data格式数据),Json数据格式交互

    一.ajax  1 什么是ajax:异步的JavaScript和xml,跟后台交互,都用json  2 ajax干啥用的?前后端做数据交互:  3 之前学的跟后台做交互的方式:   -第一种:在浏览器 ...

  6. ajax与后台交互传输数据的工具类

    public class Result<T> implements Serializable { private static final long serialVersionUID = ...

  7. AJAX与后台交互传参的两种方式

    工作中的简单总结备忘,防遗失. 第一种:直接传入json数据(后台一个一个入参对接) 1- js请求: var data = {}; data = {"infoId":infoId ...

  8. ajax请求后台交互json示例

    ajax请求,首先需要服务器(首先你需要node) npm i -g http-server 其次,进入当前目录(默认服务器端口8080) http-server 点击进入:localhost:808 ...

  9. ajax与后台交互案例

    BBS项目 //BBS项目,注册页面ajax请求 // 1.实现照片预览 $("#up_myhead").change(function () { // 获取input选择的文件 ...

随机推荐

  1. linux c socket programming

    原文:linux c socket programming http://54min.com/post/http-client-examples-using-c.html 好文章 PPT http:/ ...

  2. 快速构建Windows 8风格应用7-页面视图概览

    原文:快速构建Windows 8风格应用7-页面视图概览 本篇博文主要介绍Windows 8风格应用中包含哪些视图.Visual Studio 2012和模拟器中如何开发和调试不同的页面视图.页面视图 ...

  3. 快速构建Windows 8风格应用8-贴靠视图

    原文:快速构建Windows 8风格应用8-贴靠视图 本篇博文主要介绍如何切换出贴靠视图.关于贴靠视图的设计.关于贴靠视图的应用程序栏和如何实现贴靠视图. 如何切换出贴靠视图 第一步:水平方向全屏视图 ...

  4. 1.2 如何使用LINQ

    LINQ作为一种数据查询编码方式,它本身不是独立的开发语言,也不能进行应用程序开发.但是在.NET 4.5中,可以在C#中集成LINQ查询代码. 在任何源代码文件中,要使用LINQ查询功能,必须引用S ...

  5. Servlet配置load-on-startup

    <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http:// ...

  6. Scala开发环境搭建与资源推荐

    Scala开发环境搭建与资源推荐 本文介绍了Scala的开发环境,包括SDK.IDE的设置.常用资源列表等.Scala是一门静态语言,很有可能就是Java的继承者. AD: 2014WOT全球软件技术 ...

  7. oracle中sql语句的优化

    oracle中sql语句的优化 一.执行顺序及优化细则 1.表名顺序优化 (1) 基础表放下面,当两表进行关联时数据量少的表的表名放右边表或视图: Student_info   (30000条数据)D ...

  8. Asp.Net Web Api 接口

    如何让你的 Asp.Net Web Api 接口,拥抱支持跨域访问.   由于 web api 项目通常是被做成了一个独立站点,来提供数据,在做web api 项目的时候,不免前端会遇到跨域访问接口的 ...

  9. “String.h” 源代码总结

    <String.h>  总结: 常用的函数:   一.memchr: 说明:当第一次遇到字符ch时停止查找.如果成功,返回指向字符ch的指针:否则返回NULL. 代码: #include ...

  10. 错误与修复:ASP.NET无法检测IE10,IE11,导致_doPostBack未定义JavaScript错误,恒处于F5卷动条位置

    <browsers>  <browser id="IE11" parentID="Mozilla">    <identifica ...