如何在javascript ajax函数中显示记录更新数据，直到下一个事件

在后端服务器中成功加载提交输入数据后，需要帮助才能在成功后在提交按钮下方显示"已添加：国家/地区的ID"POST方法，该方法会停留几秒钟，直到调用服务器数据拉动函数。POST方法是成功的，并且能够加载和显示数据，但是很难显示成功说明几秒钟以及从数据拉动功能中检索数据

假设 POST 成功并在完成后在 ajax 完整函数中添加了以下行，并在完成后在下面运行

$('#optional'(.append('Add ：' + state.id + ' of the ' + 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

您的问题描述可以更详细一些。但是，我试图使用我所拥有的。

我的想法是在success: function() {...内部添加一个外部函数调用，如下所示：

在里面我们做两件事，我们附加一个带有消息的段落，然后触发另一个将在timeToHide时间后执行的函数(示例中为 3000ms(

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/

相关内容

最新更新

热门标签：