Ajax - div 内部的响应问题 - Ajax - problem with response inside a div 小贝子编程网

我试图在div.Ajax中显示ajax响应的值。当我得到响应时出现问题。响应仅在div 中显示一瞬间并自动隐藏。我尝试将id更改为类，但错误仍然存在。测试时，警报会正确显示。我错过了什么？我的视图文件中有以下代码。

该div：

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

阿贾克斯：

 $(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);
}
}
 });
});
});

保存.php：

<?php
$co= 'aaa';
if(!empty($_POST['tosave']))
{
    if($_POST['tosave'] == $co)
{
    $foo = fopen("plik.txt","a+");
            flock($foo, 2);
            fwrite($foo,$_POST['tosave']."rn");
            flock($foo ,3);
            fclose($foo);
echo "success";
exit();
} else {
    echo 'bad';
    exit;
}
} else {
echo "empty";
exit;
}
?>

这可能是

因为您没有阻止提交按钮的默认行为，即将表单的数据发送到指定的链接，也许在您的情况下，链接与您的 PHP 在同一页面上，导致在页面重新加载之前只在div 中看到消息一秒钟。

因此，为了防止这种默认行为，您必须捕获事件并使用 preventDefault(( 函数，如下所示：

$('#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);
    }   
}
  });
 });
 });

首先，

您的Ajax调用代码中存在一个错误，您在.remove document.ready()下编写了submit.click()提交函数document.ready()因为submit.click()将在您提交表单时运行。第二件事是你应该添加 event.preventDefault()防止提交表单的默认行为，否则它将显示很短的时间，然后消失。请参阅下面的代码，它正在工作。

带有 HTML 表单的 AJAX：

 <!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>

.PHP：

<?php
$co = 'aaa';
if (!empty($_POST['tosave'])) {
    if ($_POST['tosave'] == $co) {
        $foo = fopen("plik.txt", "a+");
        flock($foo, 2);
        fwrite($foo, $_POST['tosave'] . "rn");
        flock($foo, 3);
        fclose($foo);
        echo "success";
        exit();
    } else {
        echo 'bad';
        exit;
    }
} else {
    echo "empty";
    exit;
}
?>
**OUTPUT DISPLAY IN DIV: bad**

Ajax - div 内部的响应问题

相关内容

最新更新

热门标签：