【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. javascript屏蔽浏览器右键功能按钮

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. hdu 3001(状压dp）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3001 思路:这道题类似于TSP问题,只不过题目中说明每个城市至少要走一次,至多走2次,因此要用到三进制 ...

  3. Node.js 入门 资源

    Node.js 入门 <快速搭建 Node.js 开发环境以及加速 npm> http://fengmk2.com/blog/2014/03/node-env-and-faster-npm ...

  4. Havel-Hakimi定理（推断是否可图序列）

    给定一个非负整数序列{dn},若存在一个无向图使得图中各点的度与此序列一一相应.则称此序列可图化.进一步.若图为简单图,则称此序列可简单图化 至于能不能依据这个序列构造一个图,就须要依据Havel-H ...

  5. Bootstrap组件之下拉菜单

    .dropdown--设置父元素为下拉菜单组件,向下弹出子菜单: .dropup--设置父元素为下拉菜单组件,向上弹出子菜单: .dropdown-toggle--设置button为下拉菜单切换but ...

  6. springboot如何直接读取webapp下页面？

    公司改用springboot的时候,将页面相关的文件都放在了src/main/webapp下,我直接通过main方式启动的时候,无法读取到src/mian/webapp下文件,但是通过spring-b ...

  7. JS循环语句的理解

    循环语句就是让程序重复性去做某些工作 最常见的就是for循环 那它的写法都有哪些呢? 1.必须要有初始值 2.要有条件判断 3.状态的改变 4.循环体 一定要控制循环多少次结束,否则就变成了死循环,消 ...

  8. 【BZOJ4597】[Shoi2016]随机序列 线段树

    [BZOJ4597][Shoi2016]随机序列 Description 你的面前有N个数排成一行.分别为A1, A2, … , An.你打算在每相邻的两个 Ai和 Ai+1 间都插入一个加号或者减号 ...

  9. 《从零开始学Swift》学习笔记（Day60）——Core Foundation框架

    原创文章,欢迎转载.转载请注明:关东升的博客 Core Foundation框架是苹果公司提供一套概念来源于Foundation框架,编程接口面向C语言风格的API.虽然在Swift中调用这种C语言风 ...

  10. eslint Rules

    Rules 为了让你对规则有个更好的理解,ESLint 对其进行了分门别类. 所有的规则默认都是禁用的.在配置文件中,使用 "extends": "eslint:reco ...