在JS库中调用外部Web服务

时间:2019-04-03 11:15:53

标签: javascript jquery html jquery-ui jquery-plugins

我正在尝试使用聊天模拟器的JS库构建聊天小部件,并尝试将其与Web服务一起使用,其中一个问题如下:

  1. 当用户到达最后一条虚拟聊天消息(即“键入您的关注点”)时,调用外部Web服务
  2. 将收集的数据传递到Web服务API
  3. 在最后一条虚拟聊天消息之后回复来自外部Web服务的真实聊天消息

当用户到达“键入您的关注点”时,我无法从Web服务获取响应数据,目前,正在发生的事情是当到达“键入您的关注点”并且清除了所有内容时,聊天框会重新加载自身

请帮助我。

JS:

var chatInfo = {chatInfo: [...]};

        alert ('aaa');
        function getinfo(convState, ready) {
            alert ('bbb');
            var chatMsg = $('#chatConcern').val();
                if(chatMsg>=0) {
                    alert ('ccc');
                    jQuery.ajax({
                        url: 'https://example.webservice/',
                        type: "POST",
                        dataType: "json",
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify(chatInfo),
                        success: function (response) {
                            console.log("Thanks!");
                        },
                        error: function (response) { alert(response.d); }

                    });
                } else {
                    convState.current.next = false;
                }
        }

        jQuery(function($){
            var count = 0;
            var original = false;
            var convForm = $('#chat').convform({
                eventList:{
                    onInputSubmit: function(convState, ready) {
                        console.log('input is being submitted...');
                //here you send the response to your API, get the results and build the next question
                //when ready, call 'ready' callback (passed as the second parameter)
                if(convState.current.answer.value ==='end') {
                    convState.current.next = original;
                    //emulating random response time (100-600ms)
                    setTimeout(ready, Math.random()*500+100);
                } else {

                    setTimeout(ready, Math.random()*500+100);
                }
                count++;

                /* function getinfo(stateWrapper, ready) {
                    window.open("https://google.com");
                    ready();
                } */
                    }
                }
            });
        });

HTML:

<section id="demo">
        <div class="vertical-align">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 col-sm-offset-3 col-xs-offset-0">
                        <div class="card no-border">
                            <div id="chat">
                                <form action="" method="GET" class="hidden">
                                    <select data-conv-question="Hello! This is an example use of the plugin to dynamically generate questions (like using an API). This is the only question that was written on the initial HTML. To end the loop, select END." name="first-question">
                                        <option value="understood">Understood</option>
                                        <option value="okay">Okay, captain!</option>
                                    </select>

                                    <div data-conv-case="understood">
                                        <input type="text" name="fullName" data-conv-question="What is your full name?">
                                        <input type="email" data-pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" name="email" data-conv-question="What is your e-mail address?">
                                        <input type="concern" name="cs" data-conv-question="Type your concern">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</section>

0 个答案:

没有答案