关于智能机器人模块功能。智能读取数据库的数据，不能介入人工客服，比较小的功能

来源：互联网发布：文字录入赚钱软件编辑：程序博客网时间：2024/05/02 00:57
这里表现出来的主要是前台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)[n]+"' title='"+(data.problemList)[n]+"'>"+(data.problemList)[n]+"</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的idvar timeoutid=null;//设置下拉项的高亮背景var setSelectedItem=function(item){//更新索引变量selectedItem=item;//按上下键是循环现实的，小于0就置成最大的值，大于最大值就置成0if(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{//索引减1setSelectedItem(selectedItem - 1);}event.preventDefault();}else if(event.keyCode==40){//下//selectedItem = -1 代表鼠标离开if(selectedItem == -1){setSelectedItem(0);}else{//索引加1setSelectedItem(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后台代码。
0 0