ajax简单后台交互

逃离我推掉我的手 2022-03-17 13:51 225阅读 0赞

分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！[https://blog.csdn.net/jiangjunshow][https_blog.csdn.net_jiangjunshow]

# 我们到底能走多远系列（28） #

**1，扯淡**

单身的生活，大部分时间享受自由，小部分时间忍受寂寞。

生活有时候，其实蛮苦涩，让人难以下咽。那些用岁月积累起来的苦闷，无处宣泄，在自己的脑海里蔓延成一片片荆棘，让你每每想坐下休息的时候刺痛你，让你在睡梦里惊醒，在快乐里落寞，在喜悦中突然感到悲伤。

可是，我们顺利熬到了今天，应该说：我们是那些还没有[和生活][Link 1]妥协的人。

**2，主题**

写页面总会遇到ajax的，用得多了自然熟练了，或会存着源码，要用了copy下就好了。

**这里是简单实现一个利用jquery 的ajax方法实现的查询后台信息的功能。**

1，页面上的控件：

页面效果：（看起都不nb的样子）

![03165956-b5ffbecdc8f84b34acb6e28722bcdfa7.jpg][]

2，js addWX()方法就是直接ajax调用后台的代码了：

**解释：**使用了POST的方式提交了信息，contentType:"application/json;charset=UTF-8"，返回的数据格式是**json**格式的。

**注意：这里使用了success触发回调，如果使用`Complete`触发回调，会有result无法很简单的如result.RC这样得到返回信息。result.RC会没有定义的问题。**

在回调中的js函数如下：

可以看到回调中吧查询到的内容展现在页面上，然后将查询的结果存在页面中，继续添加的时候就需要继续保存添加的微信，所以使用“|”分割开的一个字符串来存储多个数据如：123|124|125，存在页面的hidden的input中：

后台查询如果有数据，页面的效果就是：

![03171200-3c062c828a114b48bce0d60fd0e40784.jpg][]

从storeWX js方法 里看 产生的html，是一个a标签，带了个点击事件，点击 “[小道消息][Link 2]”，就可以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("发布成功！");            });

**让我们继续前行**

\----------------------------------------------------------------------

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

[https_blog.csdn.net_jiangjunshow]: https://blog.csdn.net/jiangjunshow/article/details/77338485
[Link 1]: https://www.baidu.com/s?wd=%E5%92%8C%E7%94%9F%E6%B4%BB&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[03165956-b5ffbecdc8f84b34acb6e28722bcdfa7.jpg]: /images/20220317/bd22ea2cd2564439b24439c7deb4b593.png
[03171200-3c062c828a114b48bce0d60fd0e40784.jpg]: /images/20220317/c4a3e1aff0074252b1ee5fb79a053a61.png
[Link 2]: https://www.baidu.com/s?wd=%E5%B0%8F%E9%81%93%E6%B6%88%E6%81%AF&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd