Fallstudie zur Implementierung eines jQuery Ajax-Chatbots

<link rel="stylesheet" href="css/reset.css" rel="externes nofollow" />
<link rel="stylesheet" href="css/index.css" rel="externes 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 Klasse="wrap">
      <!--Kopfbereich-->
      <div Klasse="Header">
        <h3>Klassenkamerad von Xiao Xiang</h3>
        <img src="images/person01.png" alt="Symbol" />
      </div>
 
      <!-- Chat-Inhaltsbereich-->
      <div Klasse="Haupt">
        <ul Klasse="Talklist" Stil="oben: 0px" ID="Talklist">
          <li Klasse="linkes_Wort">
            <img src="images/person01.png" /> <span>Hallo, hast du mich in letzter Zeit vermisst? </span>
          </li>
          <!-- <li Klasse="richtiges_Wort">
            <img src="images/person02.png" /> <span>Hallo</span>
          </li> -->
        </ul>
        <div Klasse="Drag_Bar" Stil="Anzeige: keine;">
            <div
              Klasse = "Drager, ui-draggable, ui-draggable-Handle"
              Stil="Anzeige: keine; Höhe: 412,628 Pixel;"
            ></div>
          </div>
      </div>
 
      <!-- Audio abspielen -->
      <audio src="" id="voice" autoplay style="display: none;"></audio>
 
      <!-- Nachrichtenbearbeitungsbereich-->
      <div Klasse="Fußzeile">
          <img src="images/person02.png" alt="">
          <input type="text" placeholder="Sag etwas..." class="input_txt" id="ipt" />
          <input type="button" value="Senden" class="input_sub" id="btnSend">
      </div>
    </div>
 
    <!-- Seiten-Scrollen implementieren -->
    <script src="js/scroll.js"></script>
    <script src="js/chat.js"></script>

Körper {
    Schriftfamilie: „Microsoft YaHei“;
}
 
.wickeln {
    Position: fest;
    Breite: 450px;
    links: 50%;
    Rand links: -225px;
    oben: 20px;
    unten: 20px;
    Rand: 1px durchgezogen #ebebeb;
    Hintergrundfarbe: #fff;
    Rahmenradius: 10px;
    Kastenschatten: 0 0 30px rgba (0, 0, 0, 0,1);
    Überlauf: versteckt;
}
 
.header {
    Höhe: 55px;
    Hintergrund: linearer Farbverlauf (90 Grad, RGBA (246, 60, 47, 0,6), RGBA (128, 58, 242, 0,6));
    Überlauf: versteckt;
}
 
.header h3 {
    Farbe: #faf3fc;
    Zeilenhöhe: 55px;
    Schriftstärke: normal;
    schweben: links;
    Buchstabenabstand: 2px;
    Rand links: 25px;
    Schriftgröße: 18px;
    Textschatten: 0px 0px 5px #944846;
}
 
.header img {
    schweben: rechts;
    Rand: 7px 25px 0 0;
    Rahmenradius: 20px;
    Kastenschatten: 0 0 5px #f7f2fe;
}
 
.hauptsächlich {
    Position: absolut;
    links: 0;
    rechts: 0;
    oben: 55px;
    unten: 55px;
    Hintergrundfarbe: #f4f3f3;
    Box-Größe: Rahmenbox;
    Polsterung: 10px 0;
    Überlauf: versteckt;
}
 
.Gesprächsliste {
    Position: absolut;
    Breite: 100 %;
    links: 0px;
    oben: 0px;
}
 
.talk_list li {
    Überlauf: versteckt;
    Rand: 20px 0px 30px;
}
 
.talk_list .left_word img {
    schweben: links;
    Rand links: 20px;
}
 
.talk_list .left_word span {
    schweben: links;
    Hintergrundfarbe: #fe9697;
    Polsterung: 10px 15px;
    maximale Breite: 290px;
    Rahmenradius: 12px;
    Schriftgröße: 16px;
    Farbe: #fff;
    Rand links: 13px;
    Position: relativ;
    Zeilenhöhe: 24px;
}
 
.talk_list .left_word span:vor {
    Inhalt: '';
    Position: absolut;
    links: -8px;
    oben: 3px;
    Breite: 13px;
    Höhe: 12px;
    Hintergrund: URL('../images/corner01.png') keine Wiederholung;
}
 
.talk_list .right_word img {
    schweben: rechts;
    Rand rechts: 20px;
}
 
.talk_list .right_word span {
    schweben: rechts;
    Hintergrundfarbe: #fff;
    Polsterung: 10px 15px;
    maximale Breite: 290px;
    Rahmenradius: 12px;
    Schriftgröße: 16px;
    Farbe: #000;
    Rand rechts: 13px;
    Position: relativ;
    Zeilenhöhe: 24px;
}
 
.talk_list .right_word span:vor {
    Inhalt: '';
    Position: absolut;
    rechts: -8px;
    oben: 3px;
    Breite: 13px;
    Höhe: 12px;
    Hintergrund: URL('../images/corner02.png') keine Wiederholung;
}
 
.Drag_Bar {
    Position: absolut;
    rechts: 0px;
    oben: 0px;
    Hintergrundfarbe: #fff;
    Höhe: 100%;
    Breite: 6px;
    Box-Größe: Rahmenbox;
    Rahmen unten: 1px durchgezogen #f4f3f3;
}
 
.drager {
    Position: absolut;
    links: 0px;
    oben: 0px;
    Hintergrundfarbe: #cdcdcd;
    Höhe: 100px;
    Breite: 6px;
    Rahmenradius: 3px;
    Cursor: Zeiger;
}
 
.Fußzeile {
    Breite: 100 %;
    Höhe: 55px;
    links: 0px;
    unten: 0px;
    Hintergrundfarbe: #fff;
    Position: absolut;
}
 
.footer img {
    schweben: links;
    Rand: 8px 0 0 20px;
}
 
.eingabe_txt {
    schweben: links;
    Breite: 270px;
    Höhe: 37px;
    Rand: 0px;
    Hintergrundfarbe: #f4f3f3;
    Rand: 9px 0 0 20px;
    Rahmenradius: 8px;
    Polsterung: 0px;
    Gliederung: keine;
    Texteinzug: 15px;
}
 
.Eingabe_Sub {
    schweben: links;
    Breite: 70px;
    Höhe: 37px;
    Rand: 0px;
    Hintergrundfarbe: #fe9697;
    Rand: 9px 0 0 15px;
    Rahmenradius: 8px;
    Polsterung: 0px;
    Gliederung: keine;
    Farbe: #fff;
    Cursor: Zeiger;
}

    //Position der Bildlaufleiste zurücksetzen resetui();
 
    //Binde das Mausklickereignis an die Senden-Schaltfläche$("#btnSend").on('click', function () {
        let text = $("#ipt").val().trim(); //Zu sendender Inhalt// Bestimmen Sie, ob der zu sendende Inhalt leer ist, if (text.length <= 0) {
            return $("#ipt").val('');
        }
 
        //Wenn der Benutzer Chat-Inhalte eingibt, hängen Sie die Chat-Inhalte zur Anzeige an die Seite an $("#talk_list").append(`<li class="right_word"><img src="images/person02.png" /> <span>${text}</span></li>`);
        
        //Eingabefeld nach dem Senden löschen$("#ipt").val('');
        
        //Position der Bildlaufleiste zurücksetzen resetui();
    }); 

    //Definieren Sie eine Funktion zum Anfordern von Daten vom Server – holen Sie sich die von der Chatbot-Funktion getMsg(text){ zurückgesendeten Daten
        $.ajax({
            Methode: 'GET',
            URL: „http://www.liulongbin.top:3006/api/robot“,
            Daten: {// Senden Sie die vom Benutzer gesendete Nachricht an den Server, sprach: Text
            },
            Erfolg: Funktion (Res) {
                // konsole.log(res);
 
                //Beurteilen Sie, ob die Anfrage erfolgreich ist data.info.text
                wenn(res.message === "Erfolg"){
                    //Empfangen Sie die vom Server zurückgegebene Chat-Nachricht let msg = res.data.info.text;
                    // konsole.log(msg);
 
                    // Rendern Sie die vom Server an die Chat-Schnittstelle zurückgegebene Chat-Nachricht $("#talk_list").append(`<li class="left_word"><img src="images/person01.png" /> <span>${msg}</span></li>`);
                    //Position der Bildlaufleiste zurücksetzen resetui();
                }
            }
        })
    } 

    //Konvertiere den Chat-Inhalt des Roboters in Sprache function getVoice(text){
        $.ajax({
            Methode: 'GET',
            URL: „http://www.liulongbin.top:3006/api/synthesize“,
            Daten: {
                text: text
            },
            Erfolg: Funktion (Res) {
                // konsole.log(res);
 
                //Beurteilen Sie, ob die Anfrage erfolgreich war, wenn (res.status === 200) {
                    //Stimme abspielen$("#voice").attr("src",res.voiceUrl);
                }
            }
        })
    } 

    //Ereignisse an das Texteingabefeld binden – Chat-Inhalte automatisch senden, wenn die Eingabetaste gedrückt und losgelassen wird $("#ipt").on('keyup',function(e){
        // console.log(e.Schlüsselcode); // 13
 
        //Feststellen, ob der Benutzer die Eingabetaste gedrückt hat if(e.keyCode === 13){
            //Rufen Sie die Klickfunktion des Schaltflächenelements auf, um dessen Inhalt zu senden $("#btnSend").click();
        }
    })