【聊天机器人】

最新推荐文章于 2023-10-19 17:51:37 发布

夜星639

最新推荐文章于 2023-10-19 17:51:37 发布

阅读量474

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_65923595/article/details/123187032

版权

<!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>Document</title>
    <style>
        .box{
            width: 800px;
            height: 500px;
            margin: 20px auto;
            border: 1px solid;
        }
        .messageBox{
            width: 800px;
            height: 450px;  
            background-color: skyblue;  
            overflow: scroll;
        }
        .inputBox{
            width: 800px;
            height: 50px;
            line-height: 50px;
        }
        .inputBox .messageText{
            width: 73%;
            height: 40px;
        }
        .inputBox .sendBtn{
            width: 25%;
            height: 50px;
            line-height: 50px;
            background-color: pink;
        }
        .messageBox div{
            height: 30px;
            border: 1px solid #d6d6d6;
            line-height: 30px;
        }
        .self{
            background-color: yellow;
        }
        .other{
            background-color: white;
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="messageBox"> </div>
        <div class="inputBox">
            <input type="text" class="messageText">
            <input type="button" class="sendBtn" value="发送">
        </div>
    </div>
    <script>
        var messageBox = document.getElementsByClassName("messageBox")[0];
        var messageText = document.getElementsByClassName("messageText")[0];
        var sendBtn = document.getElementsByClassName("sendBtn")[0];
        sendBtn.onclick = function(){
            var value = messageText.value;
            var div = document.createElement("div");
            div.innerHTML = value;
            div.className = "seft"
            messageBox.appendChild(div);
            var xhr = new XMLHttpRequest();
            xhr.open("post","http://127.0.0.1:3000/lt-server")
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
            xhr.send("mess="+value)
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        console.log(xhr.response);
                        var otherDiv = document.createElement("div");
                        otherDiv.innerHTML = xhr.response;
                        otherDiv.className = "other";
                        messageBox.appendChild(otherDiv)
                    }
                }
            }
        }
    </script>
</body>
</html>









var express = require("express");
var app = express();
var bodyParser = require('body-parser')
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())
app.get("/",function(request,response){
    response.send("hello ajax")
})
app.get("/server",function(request,response){
    response.setHeader("Access-Control-Allow-Origin","*")
    response.send("hello get")
})
app.all("/server",function(request,response){
    response.setHeader("Access-Control-Allow-Origin","*")
    response.setHeader("Access-Control-Allow-Headers","*");
    response.send("hello post")
})


app.all("/json-server",function(request,response){
    response.setHeader("Access-Control-Allow-Origin","*")
    response.setHeader("Access-Control-Allow-Headers","*")
    var data = {
        name:"zhangshan"
    }
    var str = JSON.stringify(data)
    response.send(str)
})










//聊天
app.all("/lt-server",function(request,response){
    response.setHeader("Access-Control-Allow-Origin","*")
    var mess = request.body.mess
    switch(mess){
        case '哈哈':
            var arr = ["哈哈","我爱你","我好高兴","开心"]
            var n = Math.floor(Math.random()*arr.length)
            response.send(arr[n])
            break;
        case '呵呵':
            response.send("呵呵")
            break;
        case '嘿嘿':
            response.send("嘿")
            break;
            default:
                response.send("qing'")
                break;
    }
})



app.listen(3000,function(){
    console.log("服务已启动!!!")
    
})

前面的是js代码，后面的是node.js服务器

夜星639

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【聊天机器人】

<!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>Do.
复制链接

扫一扫