使用ajax实现聊天机器人效果

最新推荐文章于 2024-05-08 15:18:21 发布

yumch.

最新推荐文章于 2024-05-08 15:18:21 发布

阅读量389

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_36264753/article/details/107396728

版权

ajax发送get和post请求总结

1. 创建ajax 对象 var xhr = new XMLHttpRequest();

2. 设置请求

请求行

get 发送的数据写在url地址的后面

post 不是放到url后面, 是写在请求体中

xhr.open(方式, 请求地址);

请求头

get 无需处理, 浏览器自动设置上

post 一定要设置content-type这个请求头

content-type: "application/x-www-form-urlencoded"

xhr.setRequestHeader();

请求体

get 没有请求体, send中传参null即可

post 有请求体

xhr.send(请求体);

3. 处理响应

响应行(状态行) 状态码 xhr.status

响应头

xhr.getResponseHeader(); 指定的头

xhr.getAllResponseHeaders(); 所有的头

响应体响应回来的数据

xhr.responseText

ajax对象的状态的改变事件 onreadystatechange

状态的值 readyState === 4 响应结束了

配合status 状态码一起使用.

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

<head>
    <meta charset="UTF-8" />
    <title>Ajax</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #f7f7f7;
        }

        h3 {
            text-align: center;
        }

        .chatbox {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid #ccc;
            background-color: #fff;
            border-radius: 5px;
        }

        .messages {
            height: 350px;
            padding: 20px 40px;
            box-sizing: border-box;
            border-bottom: 1px solid #ccc;
            overflow: scroll;
        }

        .messages h5 {
            font-size: 20px;
            margin: 10px 0;
        }

        .messages p {
            font-size: 18px;
            margin: 0;
        }

        .self {
            text-align: left;
        }

        .other {
            text-align: right;
        }

        .form {
            height: 150px;
        }

        .form .input {
            height: 110px;
            padding: 10px;
            box-sizing: border-box;
        }

        .form .btn {
            height: 40px;
            box-sizing: border-box;
            border-top: 1px solid #ccc;
        }

        .form textarea {
            display: block;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border: none;
            resize: none;
            outline: none;
            font-size: 20px;
        }

        .form input {
            display: block;
            width: 100px;
            height: 30px;
            margin-top: 5px;
            margin-right: 20px;
            float: right;
        }
    </style>
</head>

<body>
    <h3>简单的Ajax实例</h3>
    <div class="chatbox">
        <!-- 聊天内容 -->
        <div class="messages">
            <div class="self">
                <h5>我说</h5>
                <p>你好</p>
            </div>
            <div class="other">
                <h5>对方说</h5>
                <p>你好</p>
            </div>
        </div>
        <div class="form">
            <div class="input">
                <textarea></textarea>
            </div>
            <div class="btn">
                <input type="button" value="发送" />
            </div>
        </div>
    </div>
    <script>
        // DOM对象.scrollIntoView();  会将元素滚动到可视区中
        // 步骤:
        //  1. 找对象(发送按钮 textarea messages)
        //  2. 给发送按钮注册click
        //  3. 获取到textarea里面的内容
        //  4. 创建self结构, 里面有 textarea里面的内容 
        //  5. 把self结构 添加到messages
        //  6. 用ajax发送post请求(内容带上)
        //  7. 接受响应的数据
        //  8. 把接受到数据展示到页面中(对方说的效果)

        var textarea = document.querySelector("textarea");
        var messages = document.querySelector(".messages");
        var btn = document.querySelector(".btn input");

        btn.onclick = function () {
            var str = textarea.value.trim();
            textarea.value = "";

            var self = document.createElement("div");
            self.className = "self";
            self.innerHTML = "<h5>我说</h5><p>" + str + "</p>";
            messages.appendChild(self);
            self.scrollIntoView();

            var xhr = new XMLHttpRequest();
            xhr.open("POST", "chatbot.php");
            xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
            xhr.send("content=" + str);

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var other = document.createElement("div");
                        other.className = "other";
                        other.innerHTML = "<h5>你说</h5><p>" + xhr.responseText + "</p>";
                        messages.appendChild(other);
                        other.scrollIntoView();

                    }
                }
            }

        }


    </script>
</body>

</html>

<?php
  header('content-type:text/html;charset=utf-8');
  // var_dump($_POST);
  // die;
  // 接收到用户的消息，并且返回一个对应的消息（人工智能）
  $arr = ['嗯', '杰哥真帅', '哦', '我去洗澡了', '你是个好人', '我们不合适', '真香', '最近有部电影，你看过吗', '走,带你爬山去'];

  // 获取前端传递的数据 ==> 后端只是获取,不去处理
  $content = $_POST["content"];
  
  // php随机返回
  // 从数组中随机一个下标
  $index = array_rand($arr);
  
  sleep(1);

  echo $arr[$index];
?>

yumch.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用ajax实现聊天机器人效果

ajax发送get和post请求总结1.创建ajax对象varxhr=newXMLHttpRequest();2.设置请求请求行get发送的数据写在url地址的后面post不是放到url后面,是写在请求体中xhr.open(方式,请求地址);...
复制链接

扫一扫