doulizhi1247 2016-02-18 16:47
浏览 53
已采纳

在Ajax调用之后显示成功消息的问题

I have an html form, wich, Its data is sent trough an AJAX post to a php File.

After the insert to a database, I need to show to the user that, the data he just sent, has been successfully inserted.

Everything works fine, but the real problem is that, the page refreshes so fast that I don't get to even see the content of the message.

Thing's to consider:

  1. After the Ajax call I make a function call to the same page to refresh it, because if not, the page never does.
  2. I have a <div> in this html form, that is hidden, intended to just unhide itself after the response of the server.

So I have two questions:

  1. First of all, how I am doing it, is there an any better way?
  2. Is it possible to make the message persistent after the refreshing of the page?

I leave some of the JS code (to make it short since everything works just fine), and the html part that contains the div here:

$('#MiForm').on('submit', function( event )
{
   //Creating the necessary instances and data
   //Here is where I put different messages for the div "alert"

   xhttp.onreadystatechange = function()
  {  //Response from the server.
      if (xhttp.readyState < 4)
      {// Waiting response from server.
          document.getElementById('Alert').hidden = false;    
          document.getElementById('Alert').innerHTML = "Sending Request...";
      }
      else if (xhttp.readyState === 4) 
      {// 4 = Response from server has been loaded
          if (xhttp.status == 200 && xhttp.status < 300)  // (200-299) is succesful.
             document.getElementById('Alerta').innerHTML = 'Everything OK!';
      }
   };
   //the Send function and data. 

   event.preventDefault(); //-->preventing the submit of the normal form cause I use AJAX.

   window.location.href = '../Ui/WorkerForm.php' //--->this is where I load the same page where Im on, but it seems that it does it too fast.
  }); 

And the HTML:

<div id="Alert" class="alert alert-success" hidden="true" role="alert"></div>

One more thing, the php page that I send data to, does not return any value manually, It just get the data and calls the classes to make the insert.

  • 写回答

1条回答 默认 最新

  • duanquan1876 2016-02-18 16:54
    关注

    First off, you're refreshing the page as soon as you send out the AJAX. You should move the refresh instruction inside the onreadystatechange function listener, so it happens after the AJAX is done, and you have the response.

    If that doesn't help, you could add a small timed delay between displaying the message and refreshing:

    setTimeout(function(){window.location.href = '../Ui/WorkerForm.php';}, TIMEOUT_IN_MILISECONDS);
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥60 pb数据库修改或者求完整pb库存系统,需为pb自带数据库
  • ¥15 spss统计中二分类变量和有序变量的相关性分析可以用kendall相关分析吗?
  • ¥15 拟通过pc下指令到安卓系统,如果追求响应速度,尽可能无延迟,是不是用安卓模拟器会优于实体的安卓手机?如果是,可以快多少毫秒?
  • ¥20 神经网络Sequential name=sequential, built=False
  • ¥16 Qphython 用xlrd读取excel报错
  • ¥15 单片机学习顺序问题!!
  • ¥15 ikuai客户端多拨vpn,重启总是有个别重拨不上
  • ¥20 关于#anlogic#sdram#的问题,如何解决?(关键词-performance)
  • ¥15 相敏解调 matlab
  • ¥15 求lingo代码和思路