【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. wireshark in text mode: tshark

    tshark -i <interface> -w "output.data" 抓到的数据可用wireshark打开查看.

  2. openwrt U盘启动

    参考链接: http://m.blog.csdn.net/blog/zcynical/44892785

  3. 细节取胜的javadoc

    今个以为开发经验丰富的同事提出有个改动有问题,希望改一下.老前辈发话,心虚的紧,立即看了下,问题说是我的方法凝视中写了一个 ** doesn't ** 建议改为 does not 说这个生成javad ...

  4. 从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个可以直接引用的js文件)

    自己写的组件 有的也挺好的,为了方便以后用自己再用或者给别人用,把组件打包发布到npm是最好不过了,本次打包支持 支持正常的组件调用方式,也支持Vue.use, 也可以直接引用打包好的js文件, 配合 ...

  5. XStream的基本使用

    先准备两个bean public class Book { private int bookId; private String bookName; private String bookCode; ...

  6. Java逍遥游记读书笔记<三>

    异常处理 如何判断一个方法中可能抛出异常 该方法中出现throw语句 该方法调用了其他已经带throws子句的方法. 如果方法中可能抛出异常,有两种处理方法: 1.若当前方法有能力处理异常,则用Try ...

  7. std::function(3)

    #include <functional> #include <string> #include <iostream> using namespace std; v ...

  8. box-sizing与calc()与flex

    1,Syntax: /* Keyword values */ box-sizing: content-box; box-sizing: border-box; /* Global values */ ...

  9. [hihoCoder] 后序遍历

    The key of this problem is that we need not build the tree from scratch. In fact, we can direct obta ...

  10. delphi ----Raize(第三方控件) TRzNumericEdit

    一.Raize Edits 1.TRzNumericEdit IntegerOnly属性设置为false,可以输入小数. DisplayFormat := ',0.00;(,0.00)';;//小数默 ...