Good day! I am starting a front. I work with an AYAKSOMI for the first time, I ask for clarification, I did not help Google (I have the following task. When I click on the button, a pop-up pops up, which contains a chat window with one input. server. I wrote everything locally, without a server, it works, messages arrive in chat, but as it is uploaded to the server, a 404 transition occurs, or it is not submitted at all if you use event.preventDefault (); Please tell me how to specify the correct parameters in the function for ne Redirects to the server and how to make the code work like a local machine.

function code for sending data to the server:

$ (document) .ready (function () {

function AjaxFormRequest(formData, url) { var messages = [].slice.call(document.getElementById('chatbot-message').querySelectorAll('.from-user')); var lastMsg = document.getElementById('chatbot-input').value; var filteredMessages = messages.map( (msgBlock) => { return msgBlock.textContent.replace('Вы: ', '') }; ) console.log(filteredMessages); console.log(lastMsg); jQuery.ajax({ url: url, type: "POST", dataType: "html", data: JSON.stringify(filteredMessages + ' , ' + lastMsg) }); } $("#chatbot-submit").click( function () { AjaxFormRequest(formData, url); return false; } );

});

full code:

 $(document).ready(function() { // Annoying Chatbot //================================================================================================================== $('#chatbot').on('click', '#chatbot-submit', function(e) { e.preventDefault(); message = $('#chatbot-input').val(); message = message.toLowerCase(); sendMessage(); bot(message); clearInterval(botAuto); }); function botAutoMessage() { var messageArray = [ 'Вы ещё здесь?', 'Вы на связи?', '?' ]; sendMessage(messageArray); } var botAuto = setInterval(botAutoMessage, 30000); function bot(message) { if (message.indexOf('здравствуйте') >= 0) { var messageArray = [ 'Hello to you too!', 'I said hello first :)', 'Greeting, human.' ]; sendMessage(messageArray); } // else if (message.indexOf('good morning') >= 0) { // // var messageArray = [ // 'Good morning to you too. How are you this morning?', // 'Yeah, its good ', // 'Greeting, human.' // ]; // // sendMessage(messageArray); // } else if (message == '') { var messageArray = [ 'Вы прислали пустое сообщение', 'Вы не ввели данных' ]; sendMessage(messageArray); } else { var messageArray = [ 'blablabla', ]; sendMessage(messageArray); } } // scroll to the bottom of chat box function scrollToMessage() { var msgBox = $('#chatbot-message'); var height = msgBox[0].scrollHeight; msgBox.scrollTop(height); } // sending message function sendMessage(message) { if (message) { $('#chatbot-input').addClass('disabled'); $('#chatbot-input').attr('disabled', 'disabled'); $('#chatbot-submit').addClass('disabled'); $('#chatbot-submit').attr('disabled', 'disabled'); var respond = message[Math.floor(Math.random() * message.length)]; setTimeout(function() { botPre = '<span class="message">Врач печатает сообщение... <i class="glyphicon glyphicon-pencil"></i></span>'; botVal = respond; botMessage = $('#chatbot-message').html() + '<br><p class="from-bot"><span class="user">Врач: </span>' + botPre + '</p>'; $('#chatbot-input').attr('placeholder', 'Врач печатает сообщение...'); $('#chatbot-message').html(botMessage); scrollToMessage(); }, 1000); setTimeout(function() { botMessageReplace = $('#chatbot-message .from-bot:last-child()'); botMessage = '<span class="user">Врач: </span>' + botVal; $('#chatbot-input').attr('placeholder', 'Введите сообщение...'); botMessageReplace.html(botMessage); scrollToMessage(); $('#chatbot-input').removeClass('disabled'); $('#chatbot-input').removeAttr('disabled'); $('#chatbot-submit').removeClass('disabled'); $('#chatbot-submit').removeAttr('disabled'); }, 2800); } else { userVal = $('#chatbot-input').val(); userMessage = $('#chatbot-message').html() + '<br><p class="from-user"><span class="user">Вы: </span><span class="message">' + userVal + '</span></p>'; $('#chatbot-message').html(userMessage); scrollToMessage(); $('#chatbot-input').val(''); } } // time var date = new Date(); var now = (date.getHours() + '.' + date.getMinutes()); }); 
 #main-demo-body { margin: 30px auto 100px; width: 600px } #main-demo-body * { /*box-sizing: border-box;*/ } .demo-widget { margin: 0 auto 30px } .demo-widget .demo-widget-header { font-family: "Open Sans", Arial, Helvetica, sans-serif; color: #115c89; font-size: 18px; font-weight: 600; margin: 0; background-color: #f4f9fc; border-bottom: 1px solid #ccc; box-shadow: 0.5px 0.9px 5px rgba(36, 36, 36, 0.28); } .demo-widget-header__img { display: inline-block; vertical-align: middle; } .demo-widget-header__title { display: inline-block; padding-left: 30px; } .demo-widget .demo-widget-body { background-color: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05) } .demo-widget .demo-widget-body .form-group:last-of-type { margin: 0 } #chatbot-message p:nth-child(2n+1) { /*float: right;*/ padding: 10px; /*background-color: #d3ebff;*/ border-radius: 4px; box-shadow: 0.5px 0.9px 5px rgba(36, 36, 36, 0.28); } #chatbot-message p:nth-child(2n) { /*float: left;*/ padding: 10px; background-color: #f4f9fc; border-radius: 4px; box-shadow: 0.5px 0.9px 5px rgba(36, 36, 36, 0.28); } #chatbot #chatbot-message { padding: 0; height: 250px; margin: 0; font-size: 12px; overflow: hidden; overflow-y: auto } #chatbot #chatbot-message p { font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; padding: 6px 12px; margin: 10px; display: inline-block; color: #3f3f3f; } #chatbot #chatbot-message p:after { content: ''; display: block; clear: both; } #chatbot #chatbot-message p.from-bot { /*color: #0af;*/ background-color: #f4f9fc; } #chatbot #chatbot-message p.from-user { float: right; background-color: #d3ebff; /*color: #0af*/ } #chatbot #chatbot-message p.from-bot .user { /*color: #0af*/ } #chatbot #chatbot-message p:nth-child(even) { /*background-color: #d3ebff;*/ } #chatbot #chatbot-message .user { font-weight: bold; color: #333 } #chatbot #chatbot-message .message { font-style: italic; color: #bfbfbf } #chatbot #chatbot-message .message .glyphicon { font-size: 10px } #chatbot .input-group-btn .btn { border-left: 0 } .input-group { background-color: #eee; border-top: 1px solid #ccc; box-shadow: inset 2px 4px 10px 1px rgba(0, 0, 0, 0.24); padding: 13px; } .input-group > * { display: inline-block; vertical-align: top; } .input-group input { font-size: 14px; font-weight: 400; padding: 5px; /*width: 80%;*/ width: 484px; height: 33px; background-color: white; border: 1px solid #ccc; border-radius: 3px; } .input-group .input-group-btn { width: 65px; } .input-group .input-group-btn input { border: 0; background: transparent url(../img/submit-chat.png) no-repeat center center; width: 43px; height: 33px; display: block; cursor: pointer; float: right; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="pop-up fpopup"> <div id="main-demo-body"> <div class="container"> <div class="demo-widget"> <div class="demo-widget-header"> <div class="photo-doctor-popup"> <?if(!empty($cli)):?> <img src="<?=$cli['logo']?>" alt="" /> <?else:?> <img src="<?=($doc['avatar'])? $doc['avatar'] : '/img/nophoto.png'?>" alt="" /> <?endif;?> </div> <span class="demo-widget-header__title">Чат с врачом</span> </div> <div class="demo-widget-body"> <div id="chatbot"> <div id="chatbot-message"> <p class="from-bot"><span class="user">Врач: </span>Здравствуйте! Как Вас зовут?</p> </div> <form action="test4.php" method="post" id="chatForm" name="chatForm"> <div class="input-group"> <input id="chatbot-input" type="text" name="msg" class="form-control" placeholder="Введите сообщение и нажмите Enter..." autocomplete="off" required> <div class="input-group-btn"> <input id="chatbot-submit" class="btn btn-default" type="submit" value=""> </div> </div> <!-- .input-group --> </form> </div> <!-- #chatbot --> </div> <!-- .demo-widget-body --> </div> <!-- #demo --> </div> <!-- .container --> </div> <!-- #main-demo-body --> </div> <script> $(document).ready(function() { function AjaxFormRequest(formData, url) { var messages = [].slice.call(document.getElementById('chatbot-message').querySelectorAll('.from-user')); var lastMsg = document.getElementById('chatbot-input').value; var filteredMessages = messages.map( (msgBlock) => { return msgBlock.textContent.replace('Вы: ', '') }) console.log(filteredMessages); console.log(lastMsg); jQuery.ajax({ url: url, type: "POST", dataType: "html", data: JSON.stringify(filteredMessages + ' , ' + lastMsg) // data: $("#" + formData).serialize() // success: function(res) { // alert(res); // } // success: function(response) { // document.getElementById(result_id).innerHTML = response; // }, // error: function(response) { // document.getElementById(result_id).innerHTML = "<p>Возникла ошибка при отправке формы. Попробуйте еще раз</p>"; // } }); } $("#chatbot-submit").click( function() { AjaxFormRequest(formData, url); return false; } ); }); </script>

  • and where is the url of the script in the call to AjaxFormRequest (formData, url)? What is the second argument? what data? - Jean-Claude
  • @ Jean-Claude - what is the first argument, do you understand? - Igor
  • The first argument as far as I understand the form data, but I need to pass an array of json consisting of collected strings by getElementsByClassName (user answers), this is all I need to pass on - wannaBpro
  • @Igor and you, is it not clear? - Jean-Claude
  • @ Jean-Claude - now - it’s not clear: ru.stackoverflow.com/questions/551649/… - Igor

1 answer 1

 $("#chatbot-submit").click( function () { AjaxFormRequest(null, $("#chatForm").attr("action")); return false; } );
  • after submitting the form, the popup closes. How can you avoid this? - wannaBpro
  • change the button type to button , or make preventDefault . - Arnial pm
  • @Arnial did what they advised, now the messages do not move from the input to the correspondence window, but remain in it - wannaBpro