ajxs实现移动端聊天机器人

最新推荐文章于 2023-11-24 10:39:50 发布
最新推荐文章于 2023-11-24 10:39:50 发布
阅读量722 收藏
点赞数 1
文章标签： js html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45118138/article/details/116349462
版权

ajxs实现移动端聊天机器人（附源码含注释）

1、首先看图成品

我们使用谷歌浏览器上的移动端调式程序，直接进行代码编辑与调式

这个是目录结构

2、HTML与css设计样式

HTML代码

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>聊天机器人</title>
		<link rel="stylesheet" href="./css/index.css">
	</head>

	<body>
		<div class="header">人工智能机器人</div>
		<div id="mainContainer" class="main">
			<div class="chat-container robot-container">
				<img src="./img/robot.jpg" alt="">
				<div class="chat-txt">
					您好！我是腾讯机器人，非常欢迎您的到来，有什么想和我聊聊的吗？
				</div>
			</div>
			<!-- <div class="chat-container self-container">
            <img src="./img/avatar.jpg" alt="">
            <div class="chat-txt">
                你好
            </div>
        </div> -->
		</div>
		
		<div class="footer">
			<input id="inputNode" class="input" type="text" placeholder="请在这里输入聊天信息">
			<span id="sendBtn" class="send-btn">发送</span>
		</div>
		
		<script src="./js/ajax.js"></script>
		<script src="./js/index.js"></script>
	</body>

</html>

css代码

*{
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
	font-size: 14px;
}


/* 头部文件 */

.header {
	height: 56px;
	line-height: 56px;
	background-color: #3b3a3f;
	text-align: center;
	font-size: 18px;
	color: #fff;
	font-weight: bold;
}


/* 主体样式 */

.main {
	overflow-y: scroll;
	height: calc(100% - 108px);
	padding: 20px;
	box-sizing: border-box;
}

.main img {
	width: 40px;
	border-radius: 50%;
}

.chat-container {
	margin-bottom: 20px;
}

.chat-container>* {
	float: left;
}

.chat-container.self-container>* {
	float: right;
}

.chat-container.self-container>.chat-txt {
	margin-right: 10px;
	background-color: #98e855;
}

.chat-container.self-container>.chat-txt:after {
	content: "";
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-left-color: #98e855;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: -12px;
}

.chat-container:after {
	content: "";
	display: block;
	clear: both;
}

.chat-txt {
	max-width: 251px;
	padding: 8px;
	background-color: #fff;
	box-sizing: border-box;
	border: 1px solid #d8d8d8;
	color: #333;
	border-radius: 6px;
	margin-left: 10px;
	position: relative;
}


/* footer样式 */

.footer {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	height: 52px;
	line-height: 52px;
	background-color: #ebebeb;
	box-sizing: border-box;
	box-shadow: 0 -2px 5px #d8d8d8;
	text-align: center;
}

.input {
	width: 270px;
	height: 36px;
	margin: 0;
	padding: 5px 10px;
	border: 1px solid #d8d8d8;
	color: #333;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 18px;
	outline: none;
}

.send-btn {
	width: 54px;
	height: 34px;
	line-height: 34px;
	display: inline-block;
	text-align: center;
	color: #fff;
	background-color: #02cb0b;
}

3、结构样式代码不是重点，接下来我们来看看js代码块


1、初始化获取按钮，绑定事件

2、获取输入的value值，实现内容的渲染(判断一下用户是否输入了文字，如果为空，禁止的动作)

3、实现内容的渲染操作 
  3-1: 渲染我们自己输入的内容
  3-2： 发送数据请求，获取机器人的响应内容
  3-3： 渲染机器人的内容 
  3-4  定义一个公共的渲染函数

4、 滚动条每一次都有触底的操作

(function() {
	var sendBtn = document.getElementById('sendBtn')
	var inputNode = document.getElementById('inputNode')
	var mainContainer = document.getElementById('mainContainer')
	/* 程序的入口函数 */
	var init = function() {
		initEvent()
	}

	/* 事件绑定入口函数 */
	var initEvent = function() {
		sendBtn.addEventListener('click', onSendBtnClick)
	}

	/* 按钮的事件绑定函数 */

	var onSendBtnClick = function() {
		var txt = inputNode.value.trim()
		if (!txt) return
		renderHtml(txt, 'right')
		sendChatInfo(txt)
		inputNode.value = ''
	}

	/* 发送数据请求，获取后端的响应内容 */

	var sendChatInfo = function(txt) {
		ajax({
			url: 'https://api.hyfarsight.com/test/testRequest/robotChat',
			method: "POST",
			data: {
				txt: txt
			},
			type: "json",
			onSuccess: function(res) {
				renderHtml(res.responseTxt, 'left')
			}
		})
	}

	/* 渲染函数 */
	var renderHtml = function(txt, direction) {
		var parentDiv = document.createElement('div')
		parentDiv.className = direction === 'right' ? 'chat-container self-container' :
			'chat-container robot-container'
		var img = document.createElement('img')
		img.src = direction === 'right' ? './img/avatar.jpg' : './img/robot.jpg'
		var childDiv = document.createElement('div')
		childDiv.className = 'chat-txt'
		childDiv.innerHTML = txt
		parentDiv.appendChild(img)
		parentDiv.appendChild(childDiv)
		mainContainer.appendChild(parentDiv)
		var bottomDistance = parentDiv.offsetTop
		console.log(bottomDistance)
		mainContainer.scrollTo(0, bottomDistance)
	}

	init();
})()


4、我们直接调用腾讯的接口




router.post('/robotChat', async ctx => {
	/* 获取前端的请求的参数 */
	let {
		txt: question
	} = ctx.request.body
	question = question.replace(/\s+/g, '')

	/* 注册了腾讯账号，免费获取的key，自己找 */
	const app_key = '你的API';

	/* 准备请求腾讯ai 的参数 */
	const params = {
		'app_id': 2170573887,
		'nonce_str': stringRandom(5, 'abcdefghijklmnopqrstuvwxyz'),
		question,
		'session': '10001',
		'time_stamp': Math.floor(Date.now() / 1000)
	}

	/* 生成腾讯需要的签名 */
	params.sign = generateFn(params, app_key)

	/* 真正的调用腾讯的接口 */
	const response = await axios.post(`https://api.ai.qq.com/fcgi-bin/nlp/nlp_textchat`, qs.stringify(
		params))

	/* 返回给同学们 */
	if (response.data.ret !== 0) {
		ctx.body = {
			code: 1,
			responseTxt: '我不知道你在讲什么!!!'
		}
	} else {
		ctx.body = {
			code: 0,
			responseTxt: response.data.data.answer
		}
	}
})

/* 生成md5函数 */
const generateFn = (params, app_key) => {
	let str = '';
	Object.keys(params).forEach(key => {
		str += `${key}=${urlencode(params[key])}&`
	})

	str += `app_key=${app_key}`
	return md5(str).toUpperCase()
}

因为目前腾讯接口申请不了了，我直接把自己的源码全部拿出来，可以直接使用，实现聊天功能，需要的直接提取

链接：https://pan.baidu.com/s/16SxB53QsLc3_Uc6DMZSNBA 
提取码：79ek 
 

飞翔的牛仔
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自适应AI chatgpt智能聊天创作官网html源码
百创科技
08-15 1338
自适应自适应AI chatgpt智能聊天创作官网html源码将为您展示我们最新的技术成果和创新应用，让您亲身体验这一智能化交流工具的无限潜力。我们致力于开发先进的自适应AI智能聊天技术，旨在为用户提供前所未有的聊天体验。通过融合自然语言处理、机器学习和深度学习等领域的顶尖技术，我们的智能聊天系统能够准确理解用户的需求并给出相应的回应。请访问自适应自适应AI chatgpt智能聊天创作官网html源码，与我们的智能AI展开一场令人惊艳的交流之旅！
使用Ajxs和jQuery实现异步请求
lu__lala的博客
12-03 3474
Ajxs的全称是Asynchronous JavaScript and XML,他并不是一种全新的技术，而是由JavaScript、XML、CSS等集中现有的技术整合而成的。 HMLHttpRequest对象 HMLHttpRequest对象是Ajxs技术的核心，用于与服务器进行交互。他可以在不刷新当前页面的情况下向服务器上特定的URL异步发送请求、获取数据，从而在当前页面中实现布局更新的效果。 语法 xmlHttpRequest = new XMLHttpRequest(); js代码 &lt
运用Ajax简单发起API请求
CharliePuthJJ的博客
04-27 604
之前学习的vue里发送api请求大多数都是直接导入axios库，之前学js的时候没有怎么接触到ajax部分的内容，现在重新回过来复习js，希望可以重新将这一部分学习一下
AI人工智能对话系统网页版源码系统 附带完整的搭建教程
最新发布
codeji的博客
11-24 1569
此外，随着互联网的普及和人们对智能对话系统的需求不断增加，AI人工智能对话系统网页版源码系统也逐渐成为了企业和个人的首选。该系统可以通过网页进行访问和交互，方便快捷地解决用户的问题和需求，同时还可以为企业提供定制化的服务，提高企业的竞争力和用户体验。AI人工智能对话系统网页版源码系统采用了自然语言处理技术，可以理解和分析用户输入的自然语言，从而进行智能化的回答和交互。用户可以通过对话系统进行连续的交互和提问，系统可以根据用户的意图和问题，进行自我学习和回答，从而完成复杂的任务。
AJXS传值，实现动态下拉框效果
qq_36766417的博客
04-20 221
Controller: @PostMapping("/alllist") @ResponseBody public List<ArtProject> alllist() { List<ArtProject> list = artProjectMapper.selectAllArtProjectList(); ...
jquery实现聊天机器人
11-21
本文实例为大家分享了jquery实现聊天机器人的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=...
python 实现语音聊天机器人的示例代码
12-23
前言 在不远的将来，实现一定程度上的语音支持将成为日常科技的基本要求，整合了语音识别的python程序提供了其他技术无法...本文做的聊天机器人是基于百度语音识别和图灵机器人二者之上共同实现的。大致的流程如下图：
python实现微信聊天机器人
12-27
用python实现微新聊天机器人，调用了图灵机器人的API，亲测可用，也可以花钱买更加智能的机器人，可以通过不断聊天训练使得他更智能。
java实现自动回复聊天机器人
08-27
"java实现自动回复聊天机器人" 本文主要介绍了使用Java语言实现自动回复聊天机器人的方法和技术。该机器人能够自动回复用户的消息，并提供了详细的代码示例供大家参考。 一、聊天机器人的基本工作流程 聊天机器人...
jQuery——ajxs参数小节一
weixin_45652863的博客
09-27 711
ajxs概念 ajax() 方法通过 HTTP 请求加载远程数据。 该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, .post等。.post 等。.post等。.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。 jQuery.ajax()函数用于通过后台HTTP请求加...
AJXS flas教程
04-21
关于asp.net.ajxs
自动聊天机器人简单实现（纯html5+jquery）
06-04
纯HTML5+jquery实现网页版机器人自动聊天
ChatBot-JS:简单的 JavaScript 聊天机器人
05-29
简单的 JavaScript 聊天机器人 文件
使用Ajxs完成分页、模糊查询
lu__lala的博客
12-03 539
js代码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <script src="../js/jquery.js"></script> <script> function f(t) { ...
ajxs 动态加载select，前端源码有数据，但是下拉框中没有数据：
S15031618的博客
05-16 647
js源码： function initnode(){ $.ajax({ url: path+"/node/initnode", dataType: "json", type: "post", data: {}, success: function (req){ var inithtml=""; $("#nodeModal #nodeid").html(""); for(var i=0;i<req.length;i++){
初识Ajax(初章)——原生ajax及ajax封装
qq_41558265的博客
05-29 551
原生ajax        关于什么是ajax上一篇文章中已简单介绍，在此再次对ajax进行详细介绍，已帮助刚入坑前端的学子了解ajax，揭开ajax的神秘面纱。许多刚接触ajax的朋友会觉得ajax十分神秘、不可思议、难以理解。ajax是啥？能用来做什么？ajax都包含哪些内容？ajax的工作原理是什么？ajax是如何和后端进行交互的？又是怎样接收处理后端返回的数据......其实ajax并不难...
Ajax的工作原理
weixin_30708329的博客
04-27 125
　　Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。 　　在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能： ...
AJAX及其在JavaScript中的应用
Hopefully Sky的博客
06-03 4891
1、什么是AJAX(远程脚本编程)　　AJAX不是JavaScript的规范，它只是一个哥们“发明”的缩写：Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。AJAX是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。 　　如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交
AJAX请求
weixin_44289771的博客
09-29 159
Ajax基础使用 1.创建一个get请求 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>get请求</title> <style> #result{ width: 200px; height: 100px; border:
python实现智能聊天机器人
11-04
Python实现智能聊天机器人是通过使用自然语言处理（NLP）和机器学习技术来模拟人类对话的过程。以下是一个简单的步骤来实现智能聊天机器人。 1. 语料库收集和预处理：构建一个包含对话例子的语料库，这将用于训练...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值