2020-10-22（利用ajax实现一个聊天机器人）

最新推荐文章于 2023-01-17 20:18:19 发布
最新推荐文章于 2023-01-17 20:18:19 发布
阅读量255 收藏
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46201220/article/details/109224942
版权
本文介绍了如何利用Ajax实现一个聊天机器人。通过html+css构建基础界面，js负责功能实现，包括点击发送按钮或按enter键时，机器人返回对应信息。文章还提及了事件绑定、DOM操作以及保持聊天窗口滚动至底部的逻辑，但未使用图灵机器人接口，也未涉及后端node.js的实现细节。
摘要由CSDN通过智能技术生成

聊天机器人的实现

思路分步实现

html+css
实现的效果
在这里插入图片描述
html结构：
在这里插入图片描述
css样式：
在这里插入图片描述
解决办法：
在这里插入图片描述
js：
功能以及思路：再点击发送按钮（或者是enter键）之后，机器人可以为我们发送相对应的信息。

  1. 为按钮绑定对应的事件
    在这里插入图片描述

  2. 创建一个相对应的dom对象
    在这里插入图片描述

  3. 使得每次在输入还有机器人回应之后的最终的视口都在最下面
    在这里插入图片描述

  4. enter键的输入实现
    在这里插入图片描述

总结与反思

  1. 上面的接口实现并没有使用图灵机器人
  2. 后端的node.js也没有手动实现
shjbsjiqjbsjdj
关注
专栏目录
自动聊天机器人简单实现（纯html5+jquery）
06-04
纯HTML5+jquery实现网页版机器人自动聊天
使用ajax实现聊天机器人效果
qq_36264753的博客
07-16 430
ajax发送get和post请求总结 1.创建ajax对象varxhr=newXMLHttpRequest(); 2.设置请求 请求行 get发送的数据写在url地址的后面 post不是放到url后面,是写在请求体中 xhr.open(方式,请求地址); ...
Ajax 聊天机器人
SheeranX的博客
04-14 1494
毕业设计开题报告里写了聊天机器人这一模块，对于学的不够好的我，差点没把自己坑进去。。。机智的我动了点小脑筋终于把问题解决了。 这是效果图 关键代码JS ， 主要是通过拼接html 实现的，如果页面刷新了的话， 那就GG了。不过感觉毕业设计应付一下已经够了。 function addmsg(username, msg) { var oldhtml =
利用Ajax技术完成简易版聊天机器人的制作
Eric_freestyle的博客
12-06 295
第一步：创建结构样式 下面先展示结构样式图，后期可以对结构及其样式做进一步的修改优化，现阶段主要是完成这样的一个效果： 上图就是初步的一个结构样式图，我们需要实现的效果就是当用户在输入框输入文字时，按下回车或点击发送，这时文字弹入上面的聊天界面，并自动回复一段文字内容。结构及样式代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=
聊天机器人---Ajax的应用
Aaaaater的博客
06-18 226
Ajax可以使网页实现异步更新,这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。所以我通过Ajax的原理完成了聊天机器人。以下是代码部分。 我通过jsp完成了简单的网页界面 ，通过一个text框和一个button按钮，按下按钮触发响应事情，在“ul”标签生成一个“li”标签将text框的文本内容显示，同时构建请求报文（请求行，请求头，请求主体）之前创建回调函数接受响应报文。在回调...
vue-mpvue-ChatRobot聊天机器人vue-mpvue-ChatRobot-master.zip
12-17
总的来说，`vue-mpvue-ChatRobot`项目提供了一个完整的端到端解决方案，展示了如何利用Vue.js和MPVue构建一个聊天机器人应用。通过学习和理解这个项目，开发者不仅可以提升前端开发技能，还能深入了解聊天机器人技术...
jquery实现聊天机器人
11-21
总结来说，这个jQuery实现的聊天机器人是一个基础的交互式界面，它利用jQuery简化了DOM操作和事件绑定。通过扩展，我们可以增加更多的功能，如历史记录、表情支持、更复杂的对话逻辑等，从而提升用户体验。
【JavaScript源代码】jQuery实现Ajax聊天机器人完成案例.docx
12-29
本文将详细介绍如何使用jQuery实现一个Ajax聊天机器人。 ### 1. 实现步骤 #### (1) 代码结构梳理 - **页面UI布局**：首先，我们需要设计聊天界面的HTML结构。案例中包含头部区域、聊天内容区域、播放语音区域和...
vue实现的微信机器人聊天功能案例【附源码下载】
10-17
这对于学习如何用Vue.js构建Web应用以及实现一个简单的聊天机器人是非常有帮助的。 在了解和掌握了上述知识点后，读者可以尝试自行搭建类似的聊天机器人应用。可以先从界面布局开始设计，再用Vue.js框架去实现动态...
SH+mysql+AJax框架实现的智能聊天机器人WADEBOT
03-24
标题中的“SH+mysql+AJax框架实现的智能聊天机器人WADEBOT”揭示了这个项目是基于特定技术栈构建的，主要包括Struts、Hibernate和Ajax框架...让我们详细探讨这些关键知识点： ...
jQuery仿手机app社交软件聊天特效
09-04
jQuery仿手机app社交软件聊天特效，采用HTML+css+jQuery实现，很厉害，很厉害，很厉害，很厉害，很厉害，很厉害，很厉害，很厉害
03-AJAX-聊天机器人
执手天涯@的博客
02-05 402
1、基本的html结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <l
AngularJS中的Ajax(聊天机器人)
gyq04551的博客
02-18 539
Ajax body { margin: 0; padding: 0; background-color: #F7F7F7; } h3 { text-align: center; } .chatbox { width: 500px; height: 500px; margin: 0 auto; border: 1px sol
Ajax--初识Ajax--案例 - 聊天机器人（黑马俩个新接口）
薛定谔的猫
11-04 1218
resetui()的作用是输入文字，会返回页面底部。这里又要注意keyCode的C是大写。将用户输入的内容渲染到聊天窗口。这里注意的是接口换成新的了。将机器人的聊天内容转为语音。这里注意的是也要用新接口。发起请求获取聊天消息。
ajax——聊天机器人案例
最新发布
weixin_51745081的博客
01-17 229
ajax——聊天机器人案例
AJAX编程第一天案例2：聊天机器人
m0_46597922的博客
05-20 776
综合案例2-聊天机器人 案例演示与分析 聊天机器人接口文档 请求的根路径 http://www.liulongbin.top:3006 获取机器人回应的内容 接口URL： /api/robot 调用方式： GET 参数格式： 响应格式： 返回示例： { "data": { "info": { "text": "今天天气不错哦~" }, "type": 5000 }, "message": "success" } 将文字转换为语音 接口URL：
利用Ajax实现智能回答的机器人
嗨，朋友你好！我是前端领域的工作者
12-21 786
本文利用Ajax实现人机交互的效果。本文知识点有：dom元素的创建与追加、渲染元素innerHTML、Ajax发送请求响应请求。
简易AI聊天机器人
小哥的博客
05-21 8506
最近我自己搞了个简单的聊天机器人（类似淘宝机器客服一般的），他可以帮你查询疫情的最新消息、汇报天气情况、给你讲笑话、陪你聊天等一些基本的功能。下面就来介绍一下它。
Ajax介绍及调用api接口实现聊天机器人功能
qq_41858795的博客
11-23 1635
AJAX
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值