Как отображать данные обновления записи до следующего события в функции javascript ajax? - PullRequest
Новая
       4

Как отображать данные обновления записи до следующего события в функции javascript ajax?

0 голосов
/ 27 апреля 2019

После отправки входных данных, успешно загруженных на внутреннем сервере, однако требуется помощь, чтобы отобразить «Добавлено: идентификатор страны» прямо под кнопкой отправки после успешного завершения POST-метод, который остается в течение нескольких секунд, пока не будет вызвана функция datapull сервера.Метод POST был успешным и смог загрузить и отобразить данные, однако ему было трудно отображать заметку об успехе в течение нескольких секунд вместе с извлечением данных из функции datapull

добавлено под строкой внутри функции завершения ajax, предполагая, что POST прошел успешно и работает нижестрока после завершения

$ ('# необязательно'). append ('Added:' + state.id + 'из' + state.ctry) .show (5000);}, 

HTML code
<!DOCTYPE html>
<html>
  <head>
    <title>State Sq Mile</title>
    <script type = "text/javascript" 
        src  = "http://code.jquery.com/jquery-latest.min.js">
    </script>
      </head>
  <body>
      <form>
          Country: <input type="text" id="ctry" name="city"><br>
          State: <input type="text" id="state" name="state"><br>
          Area: <input type="text" id="area" name="area"><br>
          <button id="addValue">Submit</button>
        </form>
        <p id='optional'></p>
        <ul id = 'entry'></ul>
    <script type = "text/javascript" src="sample.js"></script>
  </body>
</html>

sample.js
(there are addition data pull code which i havent included)

$.ajax({
url: urlpost,
type:     'POST',
data:       {"Country":"ctry","State":"state","Area":"area"},
success:    function(state){
    $('#entry').append('<li>' +  state.ctry + ': ' + state.state + ': ' + state.area + '</li>');
error:      function(state){console.log(state);},
complete:   function () {
$('#optional').append('Added :' + state.id + ' of the ' + state.ctry).show(5000);},
setTimeout(function() { datapull()}, 6000)}
});

Ожидаемый вывод HTML-страницы 

Country:  <html input text>
State:  <html input text>
Area:  <html input text>

Submit <Button>

Added: id of the Country 

•   USA: Texas : 268,596.46 sq mile 
•   USA: California: 163,696.32 sq mile

1 Ответ

0 голосов
/ 27 апреля 2019

Ваше описание проблемы может быть немного более подробным.Однако я пытался работать с тем, что у меня есть.

Моя идея состоит в том, чтобы добавить внутрь success: function() {... внешний вызов функции, подобный этому:

Внутри мы делаем 2 вещи, добавляем абзац ссообщение, и мы запускаем другую функцию, которая будет выполнена через timeToHide промежуток времени (3000 мс в примере) 

function displayMessage(target, content, timeToHide) {
  $(target).append('<p class="message">' + content + '</p>')

  return setTimeout(function() {
    $('.message').remove()
  }, timeToHide)
}


success:    function(state){
    $('#entry').append('<li>' +  state.ctry + ': ' + state.state + ': ' + state.area + '</li>'

    displayMessage($('.target', 'Succcess!', 3000))
    );

Вот простой JSfiddle, который должен помочь: https://jsfiddle.net/mkbctrlll/bc60t92e/25/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...