【JSP与Servlet之前台页面自动回复之实现】

该内容 来自于imooc的一个视屏教程。http://www.imooc.com/video/4562

就是当点击 发送 的时候把这个对话框内容添加上去，然后由Servlet接收对话框内容参数 并调Service把取得 自动回复 的内容再添加到对话框去。

至于具体的Service实现暂时不关心。

1、首先打开JSP页面找到发送对应的button，添加事件，取名为 send()

2、下一步就是实现这个 send() 方法，这需要用到 AJAX 参考 -->

参考上面的就可以轻易看懂下面的代码了

function send() {

    var content = $("#content").val();

    if(!content) {

        alert("请输入内容！");

        return;

    }

    $.ajax({

        url : $("#basePath").val() + "AutoReplyServlet.action",

        type : "POST",

        dataType : "text",

        timeout : 10000,

        success : function (data) {

            appendDialog("talk_recordboxme","My账号",content);

            appendDialog("talk_recordbox","公众号",data);

            $("#content").val("");

            render();

        },

        data : {"content":content}

    });

} 

很典型的 $("#content").val() 既充当了 getter 也充当了 setter

完整的代码贴在底部 -->

3、把这个 .js 文件包含进JSP页面

    <script type="text/javascript" src="<%= basePath %>resources/js/front/talk.js"></script>

4、随便写个 Servlet 测试一下

package com.imooc.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

// import com.imooc.service.QueryService;

/**

 * 自动回复功能控制层，

 * 针对AJAX的

 */

@SuppressWarnings("serial")

public class AutoReplyServlet extends HttpServlet {

    @Override

    protected void doGet(HttpServletRequest req, HttpServletResponse resp)

            throws ServletException, IOException {

        resp.setContentType("text/html;charset=utf-8");

        PrintWriter out = resp.getWriter();

        out.write("我听不懂你在说啥"); // 本来这里是需要调Service的

        out.close();

    }

    @Override

    protected void doPost(HttpServletRequest req, HttpServletResponse resp)

            throws ServletException, IOException {

        this.doGet(req, resp);

    }

}

完善 Service 之后就大功告成了。。。

JSP页面

<%@ page contentType="text/html; charset=UTF-8" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>微信公众号</title>

    <!--讨论区滚动条begin-->

    <link rel="stylesheet" type="text/css" href="<%= basePath %>resources/css/jscrollpane1.css" />

    <script src="<%= basePath %>resources/js/common/jquery-1.8.0.min.js" type="text/javascript"></script>

    <!-- the mousewheel plugin -->

    <script type="text/javascript" src="<%= basePath %>resources/js/common/jquery.mousewheel.js"></script>

    <!-- the jScrollPane script -->

    <script type="text/javascript" src="<%= basePath %>resources/js/common/jquery.jscrollpane.min.js"></script>

    <script type="text/javascript" src="<%= basePath %>resources/js/common/scroll-startstop.events.jquery.js"></script>

    <!--讨论区滚动条end-->

    <script type="text/javascript" src="<%= basePath %>resources/js/front/talk.js"></script>

    </head>

    <body>

        <input type="hidden" value="<%= basePath %>" id="basePath"/>

        <br/>

        <div class="talk">

            <div class="talk_title"><span>正在与公众号对话</span></div>

            <div class="talk_record">

                <div id="jp-container" class="jp-container">

                </div>

            </div>

            <div class="talk_word">

                &nbsp;

                <input class="add_face" id="facial" type="button" title="添加表情" value="" />

                <input id="content" class="messages emotion"   />

                <input class="talk_send" onclick="send();" type="button" title="发送" value="发送" />

            </div>

        </div>

        <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div>

    </body>

</html>

JS函数（太长。。。不贴了

JSP与Servlet之前台页面自动回复之实现的更多相关文章

  1. JSP与Servlet之后台页面单条删除与多条删除的页面跳转之实现

    单条删除页面跳转 1.首先打开JSP页面,找到删除 2.这个时候要把它改成servlet的URL,并决定要传给后台什么数据,例如我需要传一个待删数据的ID id并不是什么见不得人的东西(而且是后台也不 ...

  2. SpringMVC内容略多 有用 熟悉基于JSP和Servlet的Java Web开发，对Servlet和JSP的工作原理和生命周期有深入了解，熟练的使用JSTL和EL编写无脚本动态页面，有使用监听器、过滤器等Web组件以及MVC架构模式进行Java Web项目开发的经验。

    熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器.过滤器等Web组件以及MVC架构 ...

  3. 前台页面获取servlet传过来的数据

    servlet中的代码: public void doGet(HttpServletRequest request, HttpServletResponse response) throws Serv ...

  4. 一、JSP、servlet、SQL三者之间的数据传递(前台与后台数据交互)

    背景: 目前业界很流行的MVC(model-view-control)开发模式,理解为 模型是Bean, 视图是 Html/Jsp, 控制是Servlet, 关联数据库的Dao web的运行机制: 数 ...

  5. Jsp与servlet之间页面跳转及参数传递实例(转)

    原网址:http://blog.csdn.net/ssy_shandong/article/details/9328985 11. jsp与servlet之间页面跳转及参数传递实例 分类: Java ...

  6. jsp页面中某个src，如某个iframe的src，应该填写什么？可以是html、jsp、servlet、action吗？是如何加载的？

    jsp页面中某个src,如某个iframe的src,应该填写什么?可以是html.jsp.servlet.action吗?是如何加载的? 如有个test工程,其某个jsp中有个iframe,代码如下: ...

  7. JSP、Servlet中的相对路径和绝对路径 页面跳转问题

    转自:http://blog.csdn.net/wym19830218/article/details/5503533/ 1.JSP.Servlet中的相对路径和绝对路径 前提:假设你的Http地址为 ...

  8. 【转】（超详细）jsp与servlet之间页面跳转及参数传递实例

    初步学习JavaEE,对其中jsp与Servlet之间的传值没弄清楚,查看网上资料,发现一篇超详细的文章,收获大大,特此记录下来.具体链接:http://blog.csdn.net/ssy_shand ...

  9. jsp和servlet的区别

    servlet是服务器端的程序,动态生成html页面发到客户端,但是这样 程序里有许多out.println(),java和html语言混在一起很乱.所以 后来推出了jsp.其实jsp就是servle ...

随机推荐

  1. canvas图片base64编码后，ajax提交到后台

    如题,直接上JS var imgData = canvas.toDataURL("image/png"); var data = imgData.substr(22); $.pos ...

  2. 重写ListView解决ListView内部ViewPaper滑动事件冲突问题

    非常easy 重写ListView 其它类似问题解决ScrollView嵌套ViewPager出现的滑动冲突问题 http://blog.csdn.net/zhangyiacm/article/det ...

  3. java中Comparator的用法 -- 实现集合和数组排序

    在java中,如果要对集合对象或数组对象进行排序,需要实现Comparator接口以达到我们想要的目标. 接下来我们模拟下在集合对象中对日期属性进行排序 一.实体类Step package com.l ...

  4. library和libraryTarget使用场景组件开发

    https://segmentfault.com/q/1010000004676608 https://github.com/zhengweikeng/blog/issues/10

  5. 修改MyEclipse内存

    Window --->   preferrences-->installed JREs :点击JDK修改argument为:-Xms512m -Xmx1024m -XX:PermSize= ...

  6. IOS学习笔记28—SQLite3第三方库之FMDB

    本文转载至 http://blog.csdn.net/happyrabbit456/article/details/11609451 SQLite是一种小型的轻量级的关系型数据库,在移动设备上使用是非 ...

  7. 60、常规控件（3）Snackbar-可操作的提示框,Toast升级版

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app=&quo ...

  8. Python调用外部程序

    通过os.system和subprocess.call()函数调用其他程序 预备知识:cmd中打开和关闭程序 cmd中打开程序 a.打开系统自带程序 系统自带的程序的路径一般都已加入环境变量之中,只需 ...

  9. 《程序员级别鉴定书》 ----中级.NET开发者

    面向接口.面向对象和面向方面编程区别 面向接口编程 是面向对象编程体系中的思想精髓之一 (博客园文章链接面向接口编程详解(一)——思想基础) 面向接口编程 接口是一组规则集合 面向对象编程 对具有相同 ...

  10. 穿透Session 0 隔离（二）

    上一篇我们已经对Session 0 隔离有了进一步认识,如果在开发过程中确实需要服务与桌面用户进行交互,可以通过远程桌面服务的API 绕过Session 0 的隔离完成交互操作. 对于简单的交互,服务 ...