Javascript Js聊天控制器_Javascript_Jquery_Html

Javascript Js聊天控制器

javascript jquery html

Javascript Js聊天控制器,javascript,jquery,html,Javascript,Jquery,Html,我是Javascript（纯Javascript）新手，我正在尝试创建一个聊天控制器应用程序，该应用程序可以执行以下操作用户输入内容对我的知识库进行了一次电话回访服务器响应消息目前，我无法通过单击按钮执行此post块下面是我的代码 <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=

我是Javascript（纯Javascript）新手，我正在尝试创建一个聊天控制器应用程序，该应用程序可以执行以下操作

用户输入内容

对我的知识库进行了一次电话回访

服务器响应消息

目前，我无法通过单击按钮执行此post块

下面是我的代码

<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />

<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!--[if IE]>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <![endif]-->
<title>Bootstrap Chat Box Example</title>
<!-- BOOTSTRAP CORE STYLE CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FONT AWESOME  CSS -->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- CUSTOM STYLE CSS -->
<link href="assets/css/style.css" rel="stylesheet" />

<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
    // jQuery Document

    $(document).keypress(function(e) {
        if (e.which == 13) {
            $("#submitmsg").click();
        }
    });

    $(document).ready(function() {
        $('#submitmsg').bind('click', function() {
            var message = $('#usermsg').val();
            $('#chatbox').append('<p>' + message + '</p>');
            $('#usermsg').val('');
            //alert(message);

        });
    });

    function serverResponse(message) {
        $('#chatbox').append('<p>Server: ' + message + '</p>');
    }

    $("#submitmsg")
            .click(
                    function() {
                        alert("Hi");
                        var inputtedText = $("#usermsg").val();
                        var params = {};

                        var controllerUrl = 'https://westus.api.cognitive.microsoft.com/qnamaker/v1.0/knowledgebases/bde3c190-58bd-40d8-9ff1-c35eb18588be/generateAnswer';
                        $.ajax({
                            url : controllerUrl,
                            type : 'POST',
                            data : {
                                "question" : inputtedText
                            },
                            beforeSend : function(xhrObj) {
                                // Request headers
                                xhrObj.setRequestHeader(
                                        "Ocp-Apim-Subscription-Key", "MyKey");
                                xhrObj.setRequestHeader('Content-Type',
                                        'application/json; charset=UTF-8');

                            },
                            success : function(data) {
                                var dataObj = data;
                                alert('Data:' + JSON.stringify(dataObj));
                                $('#resultvalue').html(data);
                                serverResponse(JSON.stringify(dataObj));
                                alert(data);
                            }
                        });
                    });
</script>


</head>
<body>

    <nav class="menu">
        <div class="container-fluid">
            <div class="navbar-header">
                <div class="back">
                    <img src="acn.jpg" draggable="false" />
                </div>
                <div class="name">Accenture Compliance</div>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span>
                        User Name</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-log-out"></span>
                        Logout</a></li>
            </ul>
        </div>
    </nav>
    <br />
    <br />
    <br />
    <div class="container">
        <div class="row pad-top pad-bottom">
            <div class="col-lg-3 col-md-3 col-sm-3">
                <div class="chat-box-new-div">
                    <div class="chat-box-new-head">Compliance Avatar</div>
                    <div class="panel-body chat-box-new">

                        <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
                        <br /> <br /> <br /> <br />

                    </div>
                </div>
            </div>
            <div class=" col-lg-6 col-md-6 col-sm-6">
                <div class="chat-box-div">
                    <div class="chat-box-head">
                        CHAT HISTORY
                        <div class="btn-group pull-right">
                            <button type="button" class="btn btn-info dropdown-toggle"
                                data-toggle="dropdown" aria-expanded="false">
                                <span class="fa fa-cogs"></span> <span class="sr-only">Toggle
                                    Dropdown</span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                            </ul>
                        </div>
                    </div>
                    <div class="panel-body chat-box-main">
                        <div class="chat-box-left">Hello, Welcome!. You can ask me
                            questions on Compliance Policy ..</div>
                        <div class="chat-box-name-left">
                            <img src="compiler-bot-static.gif"
                                alt="bootstrap Chat box user image" class="img-circle" /> - Bot
                        </div>
                        <hr class="hr-clas" />
                        <div class="chat-box-right" id="chatbox"></div>
                        <div class="chat-box-name-right">
                            <img src="smiley.jpg" alt="bootstrap Chat box user image"
                                class="img-circle" /> - You
                        </div>

                    </div>
                    <div class="chat-box-footer">
                        <div class="input-group">
                            <input type="text" class="form-control"
                                placeholder="Enter Text Here..." id="usermsg"> <span
                                class="input-group-btn">
                                <button class="btn btn-info" type="button" id="submitmsg">SEND</button>
                            </span>
                        </div>
                    </div>

                </div>

            </div>
            <div class="col-lg-3 col-md-3 col-sm-3">
                <div class="chat-box-new-div">
                    <div class="chat-box-new-head">Frequently Asked Questions ..
                    </div>
                    <div class="panel-body chat-box-new">
                        <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
                        <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
                        <br /> <br /> <br />
                    </div>
                </div>
            </div>
        </div>

        <!-- USING SCRIPTS BELOW TO REDUCE THE LOAD TIME -->
        <!-- CORE JQUERY SCRIPTS FILE -->
        <script src="assets/js/jquery-1.11.1.js"></script>
        <!-- CORE BOOTSTRAP SCRIPTS  FILE -->
        <script src="assets/js/bootstrap.js"></script>
</body>

</html>


引导聊天盒示例
//jQuery文档
$（文档）。按键（功能（e）{
如果（e.which==13）{
$（“提交”）。单击（）；
}
});
$（文档）.ready（函数（）{
$（'#submitsg'）.bind（'click'，function（）{
var message=$（'#usermsg'）.val（）；
$（“#聊天室”）.append（“”+message+””）；
$（'#usermsg'）.val（''）；
//警报（信息）；
});
});
功能服务器响应（消息）{
$（“#聊天室”）.append（“服务器：“+message+””）；
}
$（“提交”）
.点击(
函数（）{
警报（“Hi”）；
var inputedText=$（“#usermsg”）.val（）；
var params={}；
var控制器https://westus.api.cognitive.microsoft.com/qnamaker/v1.0/knowledgebases/bde3c190-58bd-40d8-9ff1-c35eb18588be/generateAnswer';
$.ajax({
url:controllerUrl，
键入：“POST”，
数据：{
“问题”：输入文本
},
发送前：函数（xhrObj）{
//请求头
xhrObj.setRequestHeader(
“Ocp Apim订阅密钥”、“MyKey”）；
xhrObj.setRequestHeader（'Content-Type'，
“application/json；charset=UTF-8”）；
},
成功：功能（数据）{
var dataObj=数据；
警报（'Data:'+JSON.stringify（dataObj））；
$（'#resultvalue'）.html（数据）；
serverResponse（JSON.stringify（dataObj））；
警报（数据）；
}
});
});
埃森哲合规性










合规化身



















聊天记录
切换
下拉列表


你好，欢迎！。你可以问我
关于合规政策的问题。。
-机器人

-你
发送
常见问题。。

为了检查函数是否真的被调用，我在

（“#submitsg”）中添加了一个警报。单击（function（）{…

），让我惊讶的是，它没有发出任何警报，这意味着它没有被调用

请让我知道我哪里出了问题，我怎样才能解决这个问题

谢谢

您的问题是由添加单击事件侦听器的计时引起的

在文档触发器就绪事件之前，DOM元素尚未加载

因此，js（jquery选择器）无法找到用于添加事件侦听器的“submitsg”元素

检查以下链接和代码


//可能已提醒[length=0]，因为尚未加载dom元素
警报（“准备就绪前：+$（“#submitsg”）.length）；
$（文档）.ready（函数（）{
//由于dom元素已完全加载，可能已发出警报[length=1]
警报（“准备就绪后：+$（“#提交”）.length）；
//需要在此时间添加事件侦听器（准备就绪后）
$（“#submitsg”）。单击（函数（）{
警报（“Hi”）；
});
});

然后再次检查源代码，为什么要加载jquery 3次

// called 1 time in head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

// called 2 time before body
<script type="text/javascript" src="assets/js/jquery.min.js"></script>

// called 3 time in body    
<script src="assets/js/jquery-1.11.1.js"></script>

//头中调用了1次
//在尸体前打了2次电话
//在身体里叫了3次

您是否检查了控制台中的错误？鉴于您正在进行跨域操作，我猜您被SOP阻止了call@RoryMcCrossan，我的控制台中没有任何错误。

连接到端口\u名称\u SYMANTEC\u PKI\u客户端\u内容\u到\u后台。。。
// called 1 time in head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

// called 2 time before body
<script type="text/javascript" src="assets/js/jquery.min.js"></script>

// called 3 time in body    
<script src="assets/js/jquery-1.11.1.js"></script>