Question

我有一个简单的表单页面，它将提交用户的姓氏和名字

<?php
include 'dbconnect.php';

if (isset($_POST['lname']) && isset($_POST['fname'])){
$ln = $_POST['lname'];
$fn = $_POST['fname'];
    $sql = "INSERT INTO user_tbl (`lastname`,`firstname`) VALUES ('$ln','$fn')";
    $result = mysql_query($sql);
}
?>

 <!DOCTYPE html>
 <html>
<head>
    <script >var frm = $('#nameFrm');
            frm.submit(function (ev) {
                $.ajax({
                    type: frm.attr('method'),
                    url: frm.attr('action'),
                    data: frm.serialize(),
                    success: function (data) {
                        alert('ok');
                    }
                });

                ev.preventDefault();
            });
    </script>
</head>
<body>
    <form id = "nameFrm" name = "frmName" method = "POST" >
        Last Name : <input type = "text" name = "lname"><br />
        First Name: <input type = "text" name = "fname"><br />
        <input type = "submit" value = "submit" name= "subbtn"  >
    </form>
</body>

我的脚本不起作用，脚本是为了避免页面重新加载，我很确定每次提交页面时都会重新加载

当我分开php代码时

if (isset($_POST['lname']) && isset($_POST['fname'])){
$ln = $_POST['lname'];
$fn = $_POST['fname'];
$sql = "INSERT INTO user_tbl (`lastname`,`firstname`) VALUES ('$ln','$fn')";
$result = mysql_query($sql);
}

它仍然将其重定向到新的php文件

Answer 1

浏览器在知道表单之前执行javascript。将javascript放在表单之后或放入$（窗口）.load（）：

<script>
    $( window ).load(function() {

        var frm = $('#nameFrm');
        frm.submit(function (ev) {
            $.ajax({
                type: frm.attr('method'),
                url: frm.attr('action'),
                data: frm.serialize(),
                success: function (data) {
                    alert('ok');
                }
            });

            ev.preventDefault();
        });
    });
</script>

Answer 2

该怎么做是创建一个名为 requests.php /或其他的新文件

此文件中的

有一个switch语句..

<强> requests.php

<?php
if(isset($_POST['action']) && ($_POST['action']!='')){

   $action = $_POST['action'];
   switch($action){
     case "submitForm" :
         include 'dbconnect.php';
         if ( (isset($_POST['lname'])) && (isset($_POST['fname'])) ){
           $ln = mysql_real_escape_string($_POST['lname']);
           $fn = mysql_real_escape_string($_POST['fname']);
           $sql = "INSERT INTO user_tbl (`lastname`,`firstname`) VALUES ('$ln','$fn')";
           mysql_query($sql);
           echo "New values updated: ".$fn." ".$ln;
        }
     break;
   }

}
?>

然后复制这个原始的HTML ..

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){ 

    jQuery("#nameFrm").submit(function (e) {
        e.preventDefault();
        var frm = jQuery('#nameFrm');
        var outPut = jQuery('#results');
        var loadImg = jQuery('#loadingImage');

        var fname = jQuery('#fname').val();
        var lname = jQuery('#lname').val();

        jQuery.ajax({
           type: 'POST',
               data:'action=submitForm&fname='+fname+'&lname='+lname,
               url: 'requests.php',
               beforeSend: function(){ 
                loadImg.show(); 
               },
               complete: function(){ 
                loadImg.hide();
               },
            success: function(data) { 
                frm.hide();
                outPut.html(data);
           }
           });
    });

});
</script>
</head>
<body>
    <form action="requests.php" id="nameFrm" name="frmName" method="POST" >
        Last Name : <input type="text" id="lname" name="lname"><br />
        First Name: <input type="text" id="fname" name="fname"><br />
        <input type = "submit" value = "submit" name= "subbtn"  >
    </form>
    <div id="loadingImage" style="display:none; text-align:center;">
        <img src="http://craigmaslowski.com/images/activity-indicator.gif" />
    </div>
    <div id="results"></div>
</body>

单击提交按钮时，它的作用是什么，jquery会触发，它将从fname＆amp;获取2个值lname（这些已被赋予id）然后将2个值添加到jquery.ajax URL，此url将是表单操作url，对此为requests.php

在requests.php中，2个帖子值被传递并处理，输出将被发送回原始页面，数据将被传递给div＃results，以显示输出....

此外，我为beforeSend调用和Complete添加了一些其他内容，例如加载图像，

**也请注意，你应该考虑从使用mysql_query语法转到mysqli_query ..看看MackieeE的评论！ **

玩弄它...希望它是你想要的...... 祝你好运..

玛蒂

提交表格而不重新加载

2 个答案: