使用 AJAX 更新数据后页面重新加载 & 数据更新后不显示 ALERT答案

【问题标题】：Page Reloading after data update using AJAX & also ALERT not showing after data update使用 AJAX 更新数据后页面重新加载 & 数据更新后不显示 ALERT
【发布时间】：2021-07-10 17:01:38
【问题描述】：

我正在尝试使用 PHP 和 AJAX 更新一些数据，但我的警报没有显示。在函数（响应）中，我从 PHP 文件中收到“成功”消息。请指教

<link rel="stylesheet" 
<body>
  <div style="margin: auto;width: 60%;">
    <div class="alert alert-success alert-dismissible" id="success" style="display:none;">
      <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
</div>

--------- 我的 AJAX 脚本 ----------

<script>
$(document).ready(function(){
    $(".upr").click(function(){
        var $form = $(this).closest('form');
        var request=$form.find('[name="request"]').data("request");
        var userid=$form.find('[name="userid"]').data("userid");
        var pr=$form.find('[id="pr"]').val()
        
        //alert(+pr+"/"+userid+"/"+request);
            $.ajax({
            url:'update.php',
            method:'POST',
            data:{
                request:request,
                userid:userid,
                pr:pr
                
                },
                success:function(response){
                 //alert(response);
                 $("#success").show();
                $('#success').html(response);
                
                }
            });
    });
});
</script>

【问题讨论】：

标签： php ajax

【解决方案1】：

您需要在浏览器中检查Network标签，并确保在生成AJAX时有200+ HTTP代码，否则您将无法到达success回调。此外，您可以添加error 回调并执行一些console.log。这可能会给你一些线索：

$.ajax({
    url:'update.php',
    method:'POST',
    data:{
        request:request,
        userid:userid,
        pr:pr

    },
    success:function(response){
        //alert(response);
        $("#success").show();
        $('#success').html(response);

    },
    error:function(jqXHR, textStatus, errorThrown) {
        console.log('Error happened', jqXHR, textStatus, errorThrown);
    }

});

【讨论】：

谢谢！我对其进行了测试并在“网络”选项卡中获得了 200。我从 php 文件中得到了 SUCCESS 响应，但是我的警报没有出现“SUCCESS”消息
如果您在success 回调中执行console.log(response)，您会看到任何响应吗？还有，你有没有从update.php 返回任何东西？是 JSON 响应还是一些 HTML？
我确实成功返回了 ECHO 输出：功能（响应），唯一的问题是警报
让我们检查一些其他的东西。检查页面上是否只有一个 ID success，同时尝试在控制台中运行 $('#success')。你看到了哪些 DOM 元素？你看到一个你希望被展示的吗？如果你得到你想要的，尝试在你的控制台中手动执行成功回调的一部分，看看它是否适合你。
嗨，Alex，它已解决。谢谢！！重新加载的问题是因为我没有使用 preventDefault(); .由于它正在重新加载警报没有显示。现在一切都按预期工作

【解决方案2】：

$(document).ready(function(){
    $(document).on("click", '.upr', function(e){
        e.preventDefault();
        var $form = $(this).closest('form');
        var req=$form.find('[name="request"]').data("req");
        var uid=$form.find('[name="userid"]').data("uid");
        var notes=$('#tab'+request).children('td[data-target=notes]').text();
        var pr=$form.find('[id="pr"]').val()

    
    $.ajax({
            url:'update.php',
            method:'POST',
            data:{
                req:req,
                uid:uid,
                pr:pr
                },
                success:function(response){

          var newHtml = 'C P = ' + pr;
             $('.proo'+request).html(newHtml);
                 alert(response);
                 
                },
                error:function(jqXHR, textStatus, errorThrown) {
              console.log('Error happened', jqXHR, textStatus, errorThrown);
                 }
            });
    
    })
});

【讨论】：