【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. [转]移动互联网应用技术架构简介-Restful服务

    Restful是基于网络的软件系统架构风格.其优先考虑分布性和扩展性,而不是安全.错误处理.对象映射. 所以Restful架构特别适用的场合为用户快速增长的互联网和移动互联网领域,看起来很容易理解,以 ...

  2. js Date操作

    new Date(new Date().getTime() - 24 * 24 * 60 * 60 * 1000)类似C#中的AddDays,返回一个月前的时间  //时间格式化方法        v ...

  3. 基于Jquery的实现回车键Enter切换焦点

    系统默认情况下,使用Tab按键切换页面元素的焦点,有没有想过回车键Enter也可以实现这种功能,并且具有良好的用户体验. 接下来我们使用Jquery实现回车键Enter切换焦点,此代码在常用浏览器IE ...

  4. 在ChemDraw中一键隐藏所有氢原子的方法

    在常见的化学结构中氢原子是非常常见的一种原子,而且在很多的结构中氢原子的数量是非常的多的.因此我们在使用ChemDraw化学绘图软件绘制化学结构的过程中,发现有的时候氢原子数量过多会影响到整体结构的美 ...

  5. Django 后台 无法显示文章标题

    我们会发现所有的文章都是叫 **object,这样肯定不好,比如我们要修改,如何知道要修改哪个呢? 我们修改一下 blog 中的models.py # coding:utf-8 from django ...

  6. Github初试~从安装到连接到版本库

    这里我就只说说从安装到连接到github库时出现的错误,以及如何解决 1. 下载github,安装后你就可以在系统中右键看到 Gui 和 Bush按钮 2. 此时你可能会去尝试着去连接你在github ...

  7. 让TextView的drawableLeft与文本一起居中显示

     TextView的drawableLeft.drawableRight和drawableTop是一个常用.好用的属性,可以在文本的上下左右放置一个图片,而不使用更加复杂布局就能达到,我也常常喜欢用R ...

  8. iOS UITextView 输入内容实时更新cell的高度

    iOS UITextView 输入内容实时更新cell的高度 2014-12-26 11:37 编辑: suiling 分类:iOS开发 来源:Vito Zhang'blog  11 4741 UIT ...

  9. 转载: Flex 布局教程

    demo:页面二等分 .flex-box { display: -webkit-flex; /* Safari */ display: flex; flex-direction: row; justi ...

  10. Java版接口自动化--初稿

    一.接口参数的获取: 1.参数通过Excel读取,并将结果写入Excel中 package org.fanqi.operateExcel; import java.io.FileInputStream ...