標籤：href 對話方塊 void pac oge end sch images pat
【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"> <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之前台頁面自動回複之實現
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
