Php Ajax成功消失不显示_Php_Ajax_Form Submit

Php Ajax成功消失不显示

php ajax

Php Ajax成功消失不显示,php,ajax,form-submit,Php,Ajax,Form Submit,我这里有一些代码。ajax的成功并没有显示出来。相反，它只是在几秒钟内显示和消失。问题出在哪里 <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fi

我这里有一些代码。ajax的成功并没有显示出来。相反，它只是在几秒钟内显示和消失。问题出在哪里

 <html lang="en">
    <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
       <meta name="description" content="">
    </head>
    <body>
        <form method="post" id="resultform">
          <input type="text" name="rollno" id="rollno" maxlength="6" placeholder="rollno" required />
          <input type="submit" name="submit" value="submit" />
        </form>
        <div id="tabledata">
        </div>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script>
            $(document).ready(function(){
               $('#resultform').submit(function(){
                   var roll=$('#rollno').val();
                   $.ajax({
                       type:'POST',
                       url:'result.php',
                       data:'roll_id='+roll,
                       success:function(data)
                       {
                          $('#tabledata').html(data);
                       }
                      });
                     });
                   });
             </script>
         </body>
      </html>


$（文档）.ready（函数（）{
$（'#resultform'）。提交（函数（）{
var roll=$（'#rollno'）.val（）；
$.ajax({
类型：'POST'，
url:'result.php'，
数据：'roll_id='+roll，
成功：功能（数据）
{
$（'#tabledata'）.html（数据）；
}
});
});
});

使用

$（“#resultform”）。提交将导致在单击表单提交按钮后重新加载页面，我认为这是您的问题，ajax请求已成功完成，但一旦完成，页面将重新加载，因此网页内容将被重置
尝试使用$（“#resultform”）将ajax调用添加到一个单独的按钮，而不是使用正常的单击事件将其添加到另一个按钮。单击表单提交按钮后，提交将导致重新加载页面，我认为这是您的问题，ajax请求已成功完成，但一旦完成，页面将重新加载，因此网页内容将被重置
尝试将ajax调用添加到一个单独的按钮，而不是使用正常的单击事件使用返回false的提交按钮submit（）
回调的末尾添加code>，以防止表单提交
$(document).ready(function(){
    $('#resultform').submit(function(){
        var roll=$('#rollno').val();
        $.ajax({
            type:'POST',
            url:'result.php',
            data:'roll_id='+roll,
            success:function(data) {
                $('#tabledata').html(data);
            }
        });
        return false;
    });
});

或者，您可以将事件作为参数传递给回调函数，并对事件调用preventDefault（）

$(document).ready(function(){
    $('#resultform').submit(function(event){
        event.preventDefault();
        var roll=$('#rollno').val();
        $.ajax({
            type:'POST',
            url:'result.php',
            data:'roll_id='+roll,
            success:function(data) {
                $('#tabledata').html(data);
            }
        });
    });
});

如这里的文档所述
使用返回falsesubmit（）
回调的末尾添加code>，以防止表单提交
$(document).ready(function(){
    $('#resultform').submit(function(){
        var roll=$('#rollno').val();
        $.ajax({
            type:'POST',
            url:'result.php',
            data:'roll_id='+roll,
            success:function(data) {
                $('#tabledata').html(data);
            }
        });
        return false;
    });
});

或者，您可以将事件作为参数传递给回调函数，并对事件调用preventDefault（）

$(document).ready(function(){
    $('#resultform').submit(function(event){
        event.preventDefault();
        var roll=$('#rollno').val();
        $.ajax({
            type:'POST',
            url:'result.php',
            data:'roll_id='+roll,
            success:function(data) {
                $('#tabledata').html(data);
            }
        });
    });
});

如此处文档中所述
是重新加载页面吗？是的，是重新加载您需要防止自动提交表单。将提交触发器修改为：…submit（函数（e）{e.preventDefault（）；…..工作正常。但输入包含数字。如何清除输入的输入值在success函数$（'#rollno'）中用空字符串替换输入值。val（''）；
是否正在重新加载页面？是的，正在重新加载您需要阻止自动表单提交。将提交触发器修改为：…提交（函数（e）{e.preventDefault（）………是的，工作正常。但是输入包含数字。如何清除输入的输入值在成功函数$（'#rollno'）中用空字符串替换输入值。val（''）；
此返回false将阻止表单提交和重新加载页面此返回false将阻止表单提交和重新加载页面