jQuery实现Ajax聊天机器人完成案例

<link rel="stylesheet" href="css/reset.css" rel="external nofollow"  /><link rel="stylesheet" href="css/index.css" rel="external nofollow"  /><script src="js/jquery-1.12.4.min.js"></script><script src="js/jquery-ui.min.js"></script><script src="js/jquery.mousewheel.js"></script>

        <div class="wrap">      <!--头部区域-->      <div class="header">        <h3>小向同学</h3>        <img src="images/person01.png" alt="icon" />      </div>       <!-- 聊天内容区域 -->      <div class="main">        <ul class="talk_list" style="top: 0px" id="talk_list">          <li class="left_word">            <img src="images/person01.png" /> <span>嗨，最近想我没有？</span>          </li>          <!-- <li class="right_word">            <img src="images/person02.png" /> <span>你好哦</span>          </li> -->        </ul>        <div class="drag_bar" style="display: none;">            <div              class="drager ui-draggable ui-draggable-handle"              style="display: none; height: 412.628px;"            ></div>          </div>      </div>       <!-- 播放语音 -->      <audio src="" id="voice" autoplay style="display: none;"></audio>       <!-- 消息编辑区域 -->      <div class="footer">          <img src="images/person02.png" alt="">          <input type="text" placeholder="说点什么吧..." class="input_txt" id="ipt" />          <input type="button" value="发 送" class="input_sub" id="btnSend">      </div>    </div>     <!-- 实现页面滚动 -->    <script src="js/scroll.js"></script>    <script src="js/chat.js"></script>

body {    font-family: 'Microsoft YaHei';} .wrap {    position: fixed;    width: 450px;    left: 50%;    margin-left: -225px;    top: 20px;    bottom: 20px;    border: 1px solid #ebebeb;    background-color: #fff;    border-radius: 10px;    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);    overflow: hidden;} .header {    height: 55px;    background: linear-gradient(90deg, rgba(246, 60, 47, 0.6), rgba(128, 58, 242, 0.6));    overflow: hidden;} .header h3 {    color: #faf3fc;    line-height: 55px;    font-weight: normal;    float: left;    letter-spacing: 2px;    margin-left: 25px;    font-size: 18px;    text-shadow: 0px 0px 5px #944846;} .header img {    float: right;    margin: 7px 25px 0 0;    border-radius: 20px;    box-shadow: 0 0 5px #f7f2fe;} .main {    position: absolute;    left: 0;    right: 0;    top: 55px;    bottom: 55px;    background-color: #f4f3f3;    box-sizing: border-box;    padding: 10px 0;    overflow: hidden;} .talk_list {    position: absolute;    width: 100%;    left: 0px;    top: 0px;} .talk_list li {    overflow: hidden;    margin: 20px 0px 30px;} .talk_list .left_word img {    float: left;    margin-left: 20px;} .talk_list .left_word span {    float: left;    background-color: #fe9697;    padding: 10px 15px;    max-width: 290px;    border-radius: 12px;    font-size: 16px;    color: #fff;    margin-left: 13px;    position: relative;    line-height: 24px;} .talk_list .left_word span:before {    content: '';    position: absolute;    left: -8px;    top: 3px;    width: 13px;    height: 12px;    background: url('../images/corner01.png') no-repeat;} .talk_list .right_word img {    float: right;    margin-right: 20px;} .talk_list .right_word span {    float: right;    background-color: #fff;    padding: 10px 15px;    max-width: 290px;    border-radius: 12px;    font-size: 16px;    color: #000;    margin-right: 13px;    position: relative;    line-height: 24px;} .talk_list .right_word span:before {    content: '';    position: absolute;    right: -8px;    top: 3px;    width: 13px;    height: 12px;    background: url('../images/corner02.png') no-repeat;} .drag_bar {    position: absolute;    right: 0px;    top: 0px;    background-color: #fff;    height: 100%;    width: 6px;    box-sizing: border-box;    border-bottom: 1px solid #f4f3f3;} .drager {    position: absolute;    left: 0px;    top: 0px;    background-color: #cdcdcd;    height: 100px;    width: 6px;    border-radius: 3px;    cursor: pointer;} .footer {    width: 100%;    height: 55px;    left: 0px;    bottom: 0px;    background-color: #fff;    position: absolute;} .footer img {    float: left;    margin: 8px 0 0 20px;} .input_txt {    float: left;    width: 270px;    height: 37px;    border: 0px;    background-color: #f4f3f3;    margin: 9px 0 0 20px;    border-radius: 8px;    padding: 0px;    outline: none;    text-indent: 15px;} .input_sub {    float: left;    width: 70px;    height: 37px;    border: 0px;    background-color: #fe9697;    margin: 9px 0 0 15px;    border-radius: 8px;    padding: 0px;    outline: none;    color: #fff;    cursor: pointer;}

    //重置滚动条位置    resetui();     //为发送按钮绑定鼠标点击事件    $("#btnSend").on('click', function () {        let text = $("#ipt").val().trim(); //要发送的内容        // 判断发送的内容是是否为空        if (text.length <= 0) {            return $("#ipt").val('');        }         //如果用户输入了聊天内容，则将聊天内容追加到页面上显示        $("#talk_list").append(`<li class="right_word"><img src="images/person02.png" /> <span>${text}</span></li>`);                //发送完后清空输入框        $("#ipt").val('');                //重置滚动条位置        resetui();    });