关于智能机器人模块功能。智能读取数据库的数据，不能介入人工客服，比较小的功能
2015-05-19 23:35
811 查看
这里表现出来的主要是前台HTML页面代码。第一次发博客，见谅。后台Java代码会贴出少量，主要是从数据库把数据读取出来，然后再通过json格式传到前台。前台解析出来，解析的数据包括单挑数据，也包括数据集合。写这篇博客，主要是看这种代码让你知道怎样运用，并不是照搬抄写。自己原创。因为某些原因只能贴出部分主要代码。前台页面人在聊天时，比如你输入“你好”，他会弹出事先设定好的答案。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>**客服机器人</title>
<link href="/${res}/css/html5.css" rel="stylesheet" type="text/css"/>
<link href="${resSys}/jqueryUI/jquery.ui.css" rel="stylesheet" type="text/css"/>
<script src="${resSys}/jquery.js" type="text/javascript"></script>
<script src="${resSys}/jqueryUI/jquery-ui.js" type="text/javascript"></script>
<script src="${resSys}/front.js" type="text/javascript"></script>
<style type="text/css">
#search {
text-align: center;
position: relative;
}
.autocomplete {
border: 1px solid #9ACCFB;
background-color: white;
text-align: left;
}
.autocomplete li {
list-style-type: none;
}
.clickable {
cursor: default;
}
.highlight {
background-color: #9ACCFB;
}
div{border:0px solid red;}
.div_box{
width:500px;
min-height:300px; /**ie7版本下支持*/
max-height:300px; /**最大的高度*/
—height:300px; /**ie6下支持*/
margin-left:auto;
margin-right:auto;
padding:3px;
outline:0; /**鼠标点进去，外边框去掉*/
border:1px solid #a0b3d6;
font-size:12px;
word-wrap:break-word; /**当输入文字，单词超过父容器宽度，会自动转下一行，最后一个单词，不会拆分*/
overflow-x:hidden; /**水平滚动条隐藏*/
overflow-y:auto; /**垂直滚动条，当超出一定高度时出现*/
}
.input1{
width:60px;height:60px;
}
.div_option{
width:100px;
height:100px;
padding:3px;
outline:0;
border:1px solid #a0b3d6;
font-size:12px;
word-wrap:break-word;
overflow-x:hidden;
overflow-y:auto;
float:left;
}
</style>
<script src="${resSys}/jquery.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
var u = 1;
var t =1;
$(document).ready(function(){
//know为提交按钮id
$("#know").click(function(){
//获取文本域的值
var keyword=$("#keyword").val();
$.ajax({
url:"${base}/knowledge/index.jspx", //需要传递到后台的地址
type:"post", //传递的方式，post更安全
dataType: "json",//返回json格式的数据
data: "op=2&mp=mp&keyword="+keyword, //传递到后台的数据
success: function (data) {
if(data.success==true){
//表示输入的问题在数据库当中有多个
if(data.key>1){
addAttachLine1();
$("#knowman1"+u).html(data.knowman);
$("#other"+u).html(data.other);
$("#time1a"+u).html(data.time2);
u++;
scrollToHeight();
}else if(data.key==1){
addAttachLine2();
$("#adminkeyword"+u).html(data.keyword);
$("#time2a"+u).html(data.time2);
$("#knowman2"+u).html(data.knowman);
$("#answer1"+u).html(data.answer);
$("#time1b"+u).html(data.time1);
u++;
//使滚动条往下滚动
scrollToHeight();
}
//从后台接收到的判断条件
}else if(data.success==false){
//从后台间接收到的判断条件
if(data.status==1){
addAttachLine3();
$("#knowman3"+u).html(data.knowman);
$("#empty"+u).html(data.empty);
$("#time1c"+u).html(data.time2);
u++;
scrollToHeight();
}else if(data.status==2){
addAttachLine4();
$("#adminkeyword1"+u).html(data.keyword);
$("#time2b"+u).html(data.time2);
$("#knowman4"+u).html(data.knowman);
$("#notfound"+u).html(data.notfound);
$("#time1d"+u).html(data.time1);
scrollToHeight();
//声明一个空字符串
var str1='';
//循环遍历从后台接收到的问题分类集合
for(var i=0;i<data.Classifcation.length;i++){
var h = $("#button").html();
h = h.replace("_index",i);
h = h.replace("dateIndex",i);
h = h.replace("datevalue",(data.Classifcation)[i]);
str1 = str1 +h;
}
//加上换行
var br="<br/><br/>";
$("#answer").append(str1+br);
u++;
//使滚动条往下滚动
scrollToHeight();
}
}
}
});
});
});
//问题分类点击事件方法，传了一个形参
function getList(i){
//通过问题分类对应id获取相应问题分类值
var param=$("#b"+i).val();
$.ajax({
type:'post',
url:'${base}/knowledge/index.jspx',
dataType:'json',
data: "op=1&mp=mp¶m="+param,
success: function(data){
if(data.b==true){
var str='';
//接收从后台传过来的对应问题分类，便历每个问题分类的所有问题
for(var n=0;n<data.problemList.length;n++){
str=str+"<option value='"+(data.problemList)
+"' title='"+(data.problemList)
+"'>"+(data.problemList)
+"</option>"
}
var paramA="<select size='5' style='width:100px;' multiple='multiple'>"+"<option style='color:blue'>"+param+"分类所有问题<option>"+str+"</select>"
$("#answer").append(paramA);
scrollToHeight();
//使滚动条向下滚动
scrollToHeight1();
}
}
});
}
//打开机器人页面时，机器人的欢迎语句
function knowman(){
$.ajax({
type:'post',
url:'${base}/knowledge/index.jspx',
dataType:'json',
data:"mp=mp&op=3",
success:function(data){
addAttachLine0();
$("#knowman0"+u).html(data.knowman);
$("#welcome"+u).html(data.welcome);
u++;
scrollToHeight();
}
});
}
/**是滚动条随内容的增加自动往下滚动*/
function scrollToHeight(){
var div=document.getElementById("answer");
div.scrollTop=div.scrollHeight;
}
function scrollToHeight1(){
var div=document.getElementById("divList");
div.scrollTop=div.scrollHeight;
}
//智能提示js代码
$(function(){
//取得div层
var $search=$('#search');
//取得输入框JQuery对象
var $searchInput=$search.find('#keyword');
//关闭浏览器提供给输入框的自动完成
$searchInput.attr('autocomplete','off');
//创建自动完成的下拉列表，用于显示服务器返回的数据，插入在搜索按钮的后面，等显示的时候在调整位置
var $autocomplete=$('<div class="autocomplete"></div>').hide().insertAfter('#know');
//晴空下拉列表的内容并且影藏下拉了表区
var clear=function(){
$autocomplete.empty().hide();
};
//注册事件，当输入框失去焦点的时候晴空下拉列表鬓影藏
$searchInput.blur(function(){
setTimeout(clear,500);
});
//下拉列表中高亮的项目索引，当显示下拉列表项的时候，移动鼠标或键盘的上下键就会移动高亮得项目，像百度那样
var selectedItem=null;
//timeout的id
var timeoutid=null;
//设置下拉项的高亮背景
var setSelectedItem=function(item){
//更新索引变量
selectedItem=item;
//按上下键是循环现实的，小于0就置成最大的值，大于最大值就置成0
if(selectedItem<0){
selectedItem=$autocomplete.find('li').length-1;
}else if(selectedItem>$autocomplete.find('li').length - 1){
selectedItem=0;
}
//首先移除其他列表项的高亮背景，然后再高亮当前索引的背景
$autocomplete.find('li').removeClass('highlight').eq(selectedItem).addClass('highlight');
};
var ajax_request=function(){
$.ajax({
'url':'${base}/knowledge/problemlist.jspx',//服务器地址
'data':{'search-text':$searchInput.val()},//参数
'dataType':'json',//返回数据类型
'type':'post',//请求类型
'success':function(data){
if(data.length){
//便历data，添加到自动完成区
$.each(data,function(index,term){
//创建li标签，添加到下拉列表中
$('<li></li>').text(term).appendTo($autocomplete)
.addClass('clickable').hover(
function(){
//下拉列表每一项的事件，鼠标移进去的操作
$(this).siblings().removeClass(
'highlight');
$(this).addClass('highlight');
selectedItem = index;
},
function(){
//下拉列表每一项的事件，鼠标离开的操作
$(this).removeClass('highlight');
//当鼠标离开时索引置-1，当做标记
selectedItem=-1;
}).click(function(){
//鼠标单击下拉列表的这一项的话，就将这一项的值添加到输入框中
$searchInput.val(term);
//清空并隐藏下拉列表
$autocomplete.empty().hide();
});
});//事件注册完毕
//设置下拉列表的位置，然后显示下拉列表
var ypos=$searchInput.position().top;
var xpos=$searchInput.position().left;
$autocomplete.css('width',$searchInput.css('width'));
$autocomplete.css({
'position' : 'relative',
'left' : xpos + "px",
'top' : ypos + "px"
});
setSelectedItem(0);
//显示下拉列表
$autocomplete.show();
}
}
});
};
//对输入框进行事件注册
$searchInput.keyup(function(event){
//字母数字，退格，空格
if(event.keyCode > 40 || event.keyCode == 8
|| event.keyCode == 32){
//首先删除下拉列表中的信息
$autocomplete.empty().hide();
clearTimeout(timeoutid);
timeoutid=setTimeout(ajax_request, 100);
}else if(event.keyCode==38){
//上
//selectedItem = -1 代表鼠标离开
if(selectedItem == -1){
setSelectedItem($autocomplete.find('li').length - 1);
}else{
//索引减1
setSelectedItem(selectedItem - 1);
}
event.preventDefault();
}else if(event.keyCode==40){
//下
//selectedItem = -1 代表鼠标离开
if(selectedItem == -1){
setSelectedItem(0);
}else{
//索引加1
setSelectedItem(selectedItem + 1);
}
event.preventDefault();
}
}).keypress(
function(){
//enter回车键
if(event.keyCode==13){
//列表为空或者鼠标离开导致当前没有索引值
if($autocomplete.find('li').length == 0
|| selectedItem == -1){
return;
}
$searchInput.val($autocomplete.find('li').eq(
selectedItem).text());
$autocomplete.empty().hide();
event.preventDefault();
}
}).keydown(function(event){
//esc键
if(event.keyCode==27){
$autocomplete.empty().hide();
event.preventDefault();
}
});
//注册窗口大小改变的事件，重新调整下拉列表的位置
$(window).resize(function(){
var ypos = $searchInput.position().top;
var xpos = $searchInput.position().left;
$autocomplete.css('width', $searchInput.css('width'));
$autocomplete.css({
'position' : 'relative',
'left' : xpos + "px",
'top' : ypos + "px"
});
});
});
var attachIndex = 1;
function addAttachLine0() {
var attachTpl = $.format($("#attachTr0").val());
$('#answer').append(attachTpl(attachIndex++));
}
function addAttachLine1() {
var attachTpl = $.format($("#attachTr1").val());
$('#answer').append(attachTpl(attachIndex++));
}
function addAttachLine2(){
var attachTpl = $.format($("#attachTr2").val());
$('#answer').append(attachTpl(attachIndex++));
}
function addAttachLine3() {
var attachTpl = $.format($("#attachTr3").val());
$('#answer').append(attachTpl(attachIndex++));
}
function addAttachLine4() {
var attachTpl = $.format($("#attachTr4").val());
$('#answer').append(attachTpl(attachIndex++));
}
</script>
</head>
<body onload="knowman()">
<!-- 机器人欢迎页面语句 -->
<textarea id="attachTr0" style="display:none;">
<div id="attachTr0{0}">
<div style='color:blue;'>
<span id="knowman0{0}"></span>：
<span id="welcome{0}"></span>
</div>
</div><br/>
</textarea>
<!-- 问题有多个的处理语句 -->
<textarea id="attachTr1" style="display:none;">
<div id="attachTr1{0}">
<div style="color:green;">
<span id="knowman1{0}"></span>回答：
<span id="other{0}"></span>
(<span id="time1a{0}"></span>)
</div><br/>
</div>
</textarea>
<!-- 正常流程处理问答语句 -->
<textarea id="attachTr2" style="display:none;">
<div id="attachTr2{0}">
<div style='color:blue;'>您的问题是：
<span id="adminkeyword{0}"></span>
(<span id="time2a{0}"></span>)
</div>
<div style="color:green;">
<span id="knowman2{0}"></span>回答：
<span id="answer1{0}"></span>
(<span id="time1b{0}"></span>)
</div><br/>
</div>
</textarea>
<!-- 问题为空处理语句 -->
<textarea id="attachTr3" style="display:none;">
<div id="attachTr3{0}">
<div style="color:green;">
<span id="knowman3{0}"></span>回答：
<span id="empty{0}"></span>
(<span id="time1c{0}"></span>)
</div><br/>
</div>
</textarea>
<!-- 问题所属答案不存在处理语句 -->
<textarea id="attachTr4" style="display:none;">
<div id="attachTr4{0}">
<div style='color:blue;'>您的问题是：
<span id="adminkeyword1{0}"></span>
(<span id="time2b{0}"></span>)
</div>
<div style="color:green;">
<span id="knowman4{0}"></span>回答：
<span id="notfound{0}"></span>
<span style='color:red'>(分类问题可点击)</span>：
(<span id="time1d{0}"></span>)
</div><br/>
<div id="button" style="display:none;">
<input id="b_index" type="button" onclick="disabled=true;getList(dateIndex)" style="color:blue;background-color:#ccc;cursor: pointer;" value="datevalue"/>
</div><br/>
</div>
</textarea>
<div class="container">
[#include "../include/header.html"/]
[#include "../include/search_csi.html"/]
[#include "../include/navi.html"/]
<div class="w670">
<div class="clear-10"></div>
<div class="hundred100">
<div class="AreaTitle">问政客服</div>
<div class="lybCon">
<table width="500" border="1" style="float:left;">
<tr>
<td>
<p align="center">聊天页面</p>
<!-- 下面定义聊天使用的文本域，该文本域用于显示当前聊天信息 -->
<p align="center">
<!-- contenteditable="true"表示可以输入文本信息 -->
<div id="answer" name="answer" class="div_box" readonly="readonly">
</div>
</p>
<div align="center" id="search">
<!-- 下面是输入聊天信息所使用的文本 -->
<input id="keyword" name="keyword" size="60"/>
<!-- 下面是输入聊天信息的文本框， -->
<input type="button" class="input1" name="know" id="know" value="提交" />
</div>
<p> </p>
</td>
</tr>
</table>
<form action="" name="tableForm" id="tableForm" method="post">
<table style="width:150px;height:300px;" border="1px solid #ccc" style="margin-left: 50px;">
<tr>
<td>热门问题</td>
<td width="25px;">提问次数</td>
</tr>
[@cms_knowledge_page]
[#list tag_list as mail]
<tr>
<td>${mail.problem!}</td>
<td>${mail.clicks!}</td>
</tr>
[/#list]
[/@cms_knowledge_page]
</table>
</form>
</div>
</div>
</div>
[#include "../include/right4.html"/]
[#include "../include/friend_link.html"/]
[#include "../include/footer.html"/]
</div>
</body>
</html>这段HTML代码，主要是前台部分，js部分主要包括两部分。一部分是用jQuery无刷新的形式把数据传到Java后台去，这其中也包括jQuery如何解析从后台传过来的json数据，解析出来的数据在聊天页面显示出来。另一部分是智能提示功能，这一部分js代码，我是参考了网上的部分，非原创。主要智能提示你输入部分问题，他就能提示有哪些相似的问题，类似于百度的提示功能。我先对这一份HTML代码进行一下说明，稍后会贴出Java后台代码。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 从数据库读取text属性数据，并比较内容是否相等的问题。
- 关于.net程序中读取不规则的excle表格中的数据，并插入到数据库的方法
- Android；sql数据库：关于删除数据库数据无法刷新listview并且新listview的修改增加功能出现bug的问题
- 几种从数据库读取数据生成excel文件的比较
- 数据库和XML数据读取性能比较。
- 数据库和XML数据读取性能比较。
- 关于mybatis读取数据库字段text类型时，读出数据为地址，并不是字符串的问题
- php把从数据库读取出来的数据存放到数组里，然后数组不能直接使用，要转为字符串
- 数据库和XML数据读取性能比较
- 模块-----向数据库里面建表，写入数据，在读取数据
- 关于jquery.datatable插件从数据库动态读取数据-动态分页
- 关于数据库中两个数据值的比较判断，如果没有时向另一个数据库追加新的记录。
- 【原创】SSH开发框架中，实现系统启动加载类，读取数据库常用数据进入内存，利用Spring托管，并完成reload功能
- laravel5.4 关于select下拉框读取数据库数据案例
- 比较C#三种方法实现读取Execl数据到数据库
- 关于Patition模块读取外部数据
- 关于“Asp.net 中后台CS读取数据库数据生成数组传递给前台页面JS使用”
- 关于数据库的数据是String时与前台传进的值比较的问题
- 关于数据库image数据类型数据的读取和写入
- SSH开发框架中，实现系统启动加载类，读取数据库常用数据进入内存，利用Spring托管，并完成reload功能