毕业设计开题报告里写了聊天机器人这一模块,对于学的不够好的我,差点没把自己坑进去。。。机智的我动了点小脑筋终于把问题解决了。
这是效果图
关键代码JS , 主要是通过拼接html 实现的,如果页面刷新了的话, 那就GG了。不过感觉毕业设计应付一下已经够了。
function addmsg(username, msg) {
var oldhtml = $("#chat").html();
if (username == "me:") {
newhtml = "<div class='me'><span class='userimg'></span><span class='usermsg'>" + msg + "</span></div>";
}
else {
newhtml = "<div class='bot'><span class='robotimg'></span><span class='robotmsg'>" + msg + "</span></div>";
}
$("#chat").html(oldhtml + newhtml);
var scrollTop = $("#chat")[0].scrollHeight;
$("#chat").scrollTop(scrollTop);
}
Ajax 方法
$.ajax({
type: "post",
dataType: "text",
url: "/Chat/ChatContent?msg=" + $("#chatInput").val(),
success: function (
addmsg("客服:", data);
$("#chatInput").css({ "background-image": "none" });
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
Control 内的方法
还是省略掉吧,没调用数据库,或其他什么网上的接口,纯粹为了应付毕业设计用 if..else..判断了一下,并返回值