Php Ajax-div内的响应问题_Php_Ajax

Php Ajax-div内的响应问题

php ajax

Php Ajax-div内的响应问题,php,ajax,Php,Ajax,我试图在div.ajax中显示ajax响应的价值。当我得到答复时，问题就出现了。响应仅在瞬间显示在div中，并自动隐藏。我尝试将id更改为class，但错误仍然存在。测试时，警报正确显示。我错过了什么？我的视图文件中有以下代码 div: <div id="result"></div> $(document).ready(function() { $('#submit').click(function() { $.ajax ({ type:'post',

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

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
$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;

}
?>

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

}
?>
**OUTPUT DISPLAY IN DIV: bad**

save.php:

<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
$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;

}
?>

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

}
?>
**OUTPUT DISPLAY IN DIV: bad**

这可能是因为您没有阻止submit按钮上的默认行为，即将表单数据发送到指定的链接，可能在您的情况下，该链接与PHP位于同一页面上，导致在重新加载页面之前的一瞬间只在div中看到消息

因此，为了防止这种默认行为，您必须捕获事件并使用如下类似方法：

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

    }   
}

  });
 });
 });

这可能是因为您没有阻止submit按钮上的默认行为，即将表单数据发送到指定的链接，可能在您的情况下，该链接与PHP位于同一页面上，导致在页面重新加载之前，在div中只看到消息一瞬间

因此，为了防止这种默认行为，您必须捕获事件并使用如下类似方法：

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

    }   
}

  });
 });
 });

首先，您编写的

submit.click（）

提交函数位于

document.ready（）

下。删除

document.ready（）

，因为

submit.click（）

将在提交表单时运行。第二件事是你应该补充

event.preventDefault（）

以防止提交表单的默认行为，否则它将在短时间内显示，然后消失。请参阅下面的“我的代码”，它正在工作

带有HTML表单的AJAX:

<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
$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;

}
?>

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

}
?>
**OUTPUT DISPLAY IN DIV: bad**


单击我>
$（“#操作”）。单击（函数（事件）{
event.preventDefault（）；//防止窗体的默认行为
$.ajax
({
类型：'post'，
cache:false，
url:'https:save.php'，
数据：$（“#操作”）.serialize（），
数据类型：“html”，
成功：功能（响应）{
如果（响应=‘成功’）
{
警惕（“成功”）；
}
如果（响应=='empty'）
{
警报（“空”）；
}
如果（响应=‘坏’）
{
$（“#结果”）.html（回复）；
}
}
});
});

PHP:

<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
$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;

}
?>

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

}
?>
**OUTPUT DISPLAY IN DIV: bad**


**DIV中的输出显示：错误**

首先，您编写的

submit的Ajax调用中有一个错误。请单击document.ready（）
下的submit函数。删除document.ready（）
，因为提交表单时将运行submit.click（）。第二件事是你应该补充
event.preventDefault（）
以防止提交表单的默认行为，否则它将在短时间内显示，然后消失。请参阅下面的“我的代码”，它正在工作
带有HTML表单的AJAX:
<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
$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;

}
?>

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

}
?>
**OUTPUT DISPLAY IN DIV: bad**


单击我>
$（“#操作”）。单击（函数（事件）{
event.preventDefault（）；//防止窗体的默认行为
$.ajax
({
类型：'post'，
cache:false，
url:'https:save.php'，
数据：$（“#操作”）.serialize（），
数据类型：“html”，
成功：功能（响应）{
如果（响应=‘成功’）
{
警惕（“成功”）；
}
如果（响应=='empty'）
{
警报（“空”）；
}
如果（响应=‘坏’）
{
$（“#结果”）.html（回复）；
}
}
});
});

PHP:
<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
$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;

}
?>

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

}
?>
**OUTPUT DISPLAY IN DIV: bad**


**DIV中的输出显示：错误**
我认为您所需要的是将响应放入嵌套的if-else中，否则将正常工作我认为您所需要的是将响应放入嵌套的if-else中，否则将正常工作event.preventDefault（）；修正了问题。非常感谢：）好的，没问题。完成：）事件。preventDefault（）；修正了问题。非常感谢：）好的，没问题。完成：）