php-机器人聊天（3个版本）_php+mysql+ajax 聊天机器人

1.超超超超级简易的聊天机器人，只会说“你好”
连接php之后，不管后端接收到啥信息只输出“你好”给前段，这样前段就可以发啥对面都会说“你好”。

–php部分

<?php
    echo "你好！";
1
2

-html部分

    <h2>第一版</h2>
    <input type="text" class="myContent">
    <input type="button" value="发送" class="sentBtn">
    <h3>聊天框</h3>
    <ul class="allContent"></ul>

    <script>
        var sentBtn = document.getElementsByClassName('sentBtn')[0];
        var allContent = document.getElementsByClassName('allContent')[0];
        var my = document.getElementsByClassName('myContent')[0]
       
       sentBtn.onclick = function(){
            // 获取到“我”在聊天输入框的内容
            var myCon = my.value;
            // 创建li
            var myCon_li = document.createElement('li');
            // 给li设置class名，有已经设置好的样式
            myCon_li.className = "my";
            // 把在输入框获取到的内容 赋值给li的innerHTML
            myCon_li.innerHTML = myCon;
            // 把li插入到界面的ul中
            allContent.append(myCon_li);
        
        
           // 一步步的写异步请求，引入了jquery之后可以用ajax简洁一下代码
            var xhr = new XMLHttpRequest();
           // 随机回复消息，不加数据；后端也不接受，so whatever
            xhr.open('get','chat_robot_1.php');
            xhr.send();
            // 检测状态变化，确认数据接收并成功之后，进行下一步
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >=200 && xhr.status < 300 || xhr.status ===304){
                    //    确认状态都正确，此时，是已经接收到后端传来的“你好”了，跟“我”的聊天
                    // 内容一样，创建li，插入到聊天框ul中
                        var herCon = document.createElement('li');
                        herCon.innerHTML = xhr.responseText;
                        herCon.className = "her";
                        allContent.append(herCon);
                    }else{
                       console.log('没有收到信息');
                    }
                }
        }
        }
      
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

2.第二个版本的会说其他话啦。在php中人工创建一个数组，在里面放了常用的几句话，输出的使用array_rand，随机输出。
这次使用JQuery，代码简洁。借鉴一下不同的思路。
注意：①这也是不需要用到信息发送和接收查询哒，所以前段可以不发任何数据。
②在第一版的基础上，对聊天框布局优化了一下，有头像和聊天内容，分别用a和p标签包裹。
③创建聊天内容的方法也不同，第一版使用了创建元件、设置元素内容、插入元素，这里是预先写好一段对话，设为display ：none，在点击“发送”按钮之后，克隆预先写好的“我”的聊天，更改为当前输入的内容；在接收到后端返回的数据之后，也使用克隆预先写好的，更改内容。

—php

<?php
    header('content-type:text/html;charset=utf-8');
    sleep(1);
    $chatArr = array(
    "不喜欢你啦",
    "讨厌你啦",
    "吃醋！",
    "哼╭(╯^╰)╮"
);
// array_rand返回的是一个随机的下标
    $num = array_rand($chatArr,1);

    echo $chatArr[$num];
1
2
3
4
5
6
7
8
9
10
11
12
13

—html部分（使用了Jquery）

<h2>第二版在线机器人</h2>
    <div class="container">
        <div class="message">
            <div class="robot">
                <a href="#" class="f_r"></a>
                <p class="f_r">雯宝宝</p>
            </div>
             <!-- 已经存在并且隐藏的自己的聊天框 -->
            <div id="hidden_self" class="self" style="display:none;">
                <a href="#" class="f_r"></a>
                <p class="f_r">123</p>
            </div>
        </div>
        <div class="control">
            <input type="text" name="" id="" class="inputBox">
            <button class="sentBtn">发送</button>
        </div>
    </div>
   

    <script> 
        $(function(){
            $('.sentBtn').click(function(){
                // 创建自己的聊天框
                // 每次都克隆初始的第一个
                var $cloneSelf = $('.self').first().clone();
                // 添加到容器中
                $('.message').append($cloneSelf);
                $cloneSelf.show();
                // 获取输入框的内容，设置给克隆的 元素内部的p标签
                $cloneSelf.find('p').html($('.inputBox').val());
                
                // ajax请求部分
                var xhr = new XMLHttpRequest();
                xhr.open('post','chat_robot_2.php');
                // 随机返回消息，不需要对输入的信息进行获取，所以post的请求头可以不加数据
                xhr.onload = function(){
                    var $cloneRobot = $('.robot').first().clone();
                    $('.message').append($cloneRobot);
                    $cloneRobot.find('p').html(xhr.responseText);
                }
                xhr.send()
            });
        });
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

3.第三个版本使用了图灵机器人，我的哪里出现了问题，没有出现预期的效果。
注意：在第二版的基础上改动了一些。②xhr.open（）中接入的地址就是图灵机器人的地址，而不是之前的php地址，

—有改动部分

$(function(){
$('.sentBtn').click(function(){
// 创建自己的聊天框
// 每次都克隆初始的第一个
var $cloneSelf = $('.self').first().clone();
// 添加到容器中
$('.message').append($cloneSelf);
$cloneSelf.show();
// 获取输入框的内容，设置给克隆的 元素内部的p标签
$cloneSelf.find('p').html($('.inputBox').val());
                
// ajax请求部分
var xhr = new XMLHttpRequest();

// 接入图灵机器人的地址
xhr.open('post','header("Access-Control-Allow-Origin:http://openapi.tuling123.com/openapi/api/v2")');

// 在这里需要获取post请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr.onload = function(){
var $cloneRobot = $('.robot').first().clone();
$('.message').append($cloneRobot);
$cloneRobot.find('p').html(xhr.responseText);
  }
// 在send中加入post的数据
xhr.send('key=244105773c424facb37c5b0866368958&info='+$('.inputBox').val())
            });
        });
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30