Question

我试图在div.Ajax中显示ajax响应的值。当我得到答复时出现问题。响应仅在瞬间显示在div中，并自动隐藏。我尝试将id更改为class，但错误仍然存在。测试后，警报将正确显示。我想念什么？我的查看文件中包含以下代码。

div：

<div id="result"></div>

Ajax：

 $(document).ready(function() {
 $('#submit').click(function() {

 $.ajax
 ({
  type:'post',
  cache: false,
  url:'save.php',
  data: $("#action").serialize(),
  dataType: "html",

 success: function(response) {

if(response == 'success')
{
    alert('success');
}
if(response == 'empty')
{
    alert('empty');

}
if(response == 'bad')
{
     $("#result").html(response);

}
}

 });
});
});

save.php：

<?php
$co= 'aaa';

if(!empty($_POST['tosave']))
{

    if($_POST['tosave'] == $co)
{
    $foo = fopen("plik.txt","a+");

            flock($foo, 2);
            fwrite($foo,$_POST['tosave']."\r\n");
            flock($foo ,3);
            fclose($foo);
echo "success";
exit();
} else {

    echo 'bad';
    exit;
}

} else {

echo "empty";
exit;

}
?>

Answer 1

这可能是因为您没有阻止“提交”按钮上的默认行为，该行为会将表单数据发送到指定的链接，也许在这种情况下，该链接与您的PHP位于同一页面上，从而只会看到页面重新加载之前，div中的消息会持续一秒钟。

因此，要防止这种默认行为，您必须捕获事件并像这样使用preventDefault() function：

$('#submit').click(function(event) { //we pass the event as an attribute
event.preventDefault(); //we prevent its default behavior so we can do our own stuff below
 $.ajax
 ({
  type:'post',
  cache: false,
  url:'save.php',
  data: $("#action").serialize(),
  dataType: "html",

 success: function(response) {

    if(response == 'success')
    {
       alert('success');
    }
    if(response == 'empty')
    {
       alert('empty');

    }
    if(response == 'bad')
    {
        $("#result").html(response);

    }   
}

  });
 });
 });

Answer 2

首先，您在 Ajax调用代码中有一个错误，因为您在submit.click()下编写了document.ready()提交函数。删除document.ready()是因为{{1 }}将在您提交表单时运行。第二件事是您应该添加 submit.click()可以防止您提交表单的默认行为，否则它会显示一小段时间然后消失。请参阅下面的我的代码。

具有HTML格式的AJAX：

event.preventDefault()

PHP：

 <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>

    <form id="action">
        <input type="text" name="tosave" value="bbb">
        <button type="submit">clickme</button>>
    </form>

    <div id="result"></div>
    </body>
    </html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script type="text/javascript">

        $("#action").click(function(event) {
        event.preventDefault();//TO PREVENT THE DEFAULT BEHAVIOUR OF FORM
     $.ajax
     ({
      type:'post',
      cache: false,
      url:'https:save.php',
      data: $("#action").serialize(),
      dataType: "html",

     success: function(response) {

    if(response == 'success')
    {
        alert('success');
    }
    if(response == 'empty')
    {
        alert('empty');

    }
    if(response == 'bad')
    {
         $("#result").html(response);

    }
    }

     });
    });



    </script>

Ajax-div内的响应问题

2 个答案: