【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. 【BZOJ】3410: [Usaco2009 Dec]Selfish Grazing 自私的食草者（贪心）

    http://www.lydsy.com/JudgeOnline/problem.php?id=3410 太神了.... 按末端点排序然后贪心取即可. QAQ #include <cstdio& ...

  2. 对MathType做个介绍

    MathType是一款专门用来编辑数学公式的公式编辑器,它里面包含有超过1000种的符号与模板,完全能够满足你的使用需要.特别是对于专业人士,非常的方便.下面我们就来给大家介绍介绍. 1.安装过程 与 ...

  3. MAMP下配置虚拟主机域名

    第一步:修改虚拟主机地址: /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf 第二步:

  4. jQuery中如何给动态添加的元素绑定事件

    jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...

  5. 【BZOJ1067】[SCOI2007]降雨量 RMQ+特判

    [BZOJ1067][SCOI2007]降雨量 Description 我们常常会说这样的话:“X年是自Y年以来降雨量最多的”.它的含义是X年的降雨量不超过Y年,且对于任意Y<Z<X,Z年 ...

  6. quartz定时任务配置

    参考:http://www.cnblogs.com/kay/archive/2007/11/02/947372.html Quartz是一个强大的企业级任务调度框架,Spring中继承并简化了Quar ...

  7. input输入框输入小写字母自动转换成大写字母

    input输入框输入小写字母自动转换成大写字母有两种方法 1.用js onkeyup事件,即时把字母转换为大写字母: html里input加上 <input type="text&qu ...

  8. jQuery初始化$(function() { }

    $(document).ready(function () { }//没有双引号 $(function() { }

  9. 联想打字必须按FN+数字-fn打字

    对于联想G40.14英寸系列的本本,好多时候无意间可能把数字键锁定了. 这时候要做的是:打开运行--输入OSK--打开虚拟屏幕键盘.这时候可以找到 选项---打开数字键盘. 有时候某些电脑上没有NUM ...

  10. Pipeline inbound

    精进篇:netty源码死磕7  巧夺天工--Pipeline入站流程详解 1. Pipeline的入站流程 在讲解入站处理流程前,先脑补和铺垫一下两个知识点: (1)如何向Pipeline添加一个Ha ...