Question

如何提交表单以便它通过ajax脚本插入数据而不是PHP脚本。当我现在提交表单时，它会转到PHP脚本。我希望它保持在同一页面上。我安装了jquery，并在适当的位置安装了ajax脚本。

<form action="addsigningfee.php"  method="post">     
<input name="signingfee" type="text">
<input name="pid" type="hidden" value="<?php echo $pid ; ?>">
<p></p>
<button type="submit">Save</button>
</form>  


<script type="text/javascript">
    $(function() {
        $.ajax({
            type: 'POST',
            url: "addsigningfee.php",
            data: $("FORM").serialize(),
            success: function() {
                alert("It worked!");
            }
        });
    });
</script>

addsigningfee.php

<?php
        require_once("connect.php");

        $stmt = $db->prepare("INSERT INTO options(signingfee,pid)values(?,?)");
        $stmt->bindParam(1, $_POST['signingfee'], PDO::PARAM_STR, 250);
        $stmt->bindParam(2, $_POST['pid'], PDO::PARAM_INT, 11);
        $stmt->execute();

?>

Answer 1

试试这个：

<form id="myForm" action=""  method="post">     
    <input name="signingfee" type="text">
    <input name="pid" type="hidden" value="<?php echo $pid ; ?>">
    <p></p>
    <button type="submit">Save</button>
    </form>

<script type="text/javascript">
    $(document).on('submit','form.myForm',function(){
        $.ajax({
            type: 'POST',
            url: "addsigningfee.php",
            data: $("#myForm").serialize(),
            success: function() {
                alert("It worked!");
            }
        });
       return false; 
    });
</script>

Answer 2

使addsigningfee.php成为这样的独立文件：

<?php

    require_once("connect.php");

    $stmt = $db->prepare("INSERT INTO options(signingfee,pid)values(?,?)");
    $stmt->bindParam(1, $_POST['signingfee'], PDO::PARAM_STR, 250);
    $stmt->bindParam(2, $_POST['pid'], PDO::PARAM_INT, 11);
    $stmt->execute();

?>

和您的其他页面example.html：

<form action="addsigningfee.php"  method="post">     
<input name="signingfee" type="text">
<input name="pid" type="hidden" value="<?php echo $pid ; ?>">
<p></p>
<button id="form-submit" type="submit">Save</button>
</form>  


<script type="text/javascript">
    $(function() {
        $('#form-submit').click(function (event) {
           event.preventDefault();

           $.ajax({
                type: 'POST',
                url: "addsigningfee.php",
                data: $("FORM").serialize(),
                success: function() {
                    alert("It worked!");
                }
            });
        });
    });
</script>

Answer 3

将脚本标记替换为：

<script>
    $('form').submit(function(e) {
        e.preventDefault();

        $.ajax({
            type: 'POST',
            url: $('form').prop('action'),
            data: $('form').serialize(),
            success: function() {
                console.log("BAM!");
            }
        });
    });
</script>

Answer 4

试试这个：

<button id="mySubBtn" type="submit">Save</button>

$("#mySubBtn").click(function () {
  $.ajax({
            type: 'POST',
            url: "addsigningfee.php",
            data: $("FORM").serialize(),
            success: function() {
                alert("It worked!");
            }
  });
  return false;
});

Answer 5

目前，您的代码正在DocumentContentLoaded而不是表单提交上触发AJAX调用。

定位表单的submit事件，阻止默认的提交操作，然后触发AJAX调用。请尝试以下方法：

<script type="text/javascript">
    $('form').on('submit', function (evt) {
        // Prevent the page from reloading (default action of a form submit)
        evt.preventDefault();

        // Fire the AJAX call to your server
        $.ajax({
            type: 'POST',
            url: "addsigningfee.php",
            data: $("form").serialize(),
            success: function() {
                alert("It worked!");
            }
        });
    });
</script>

参考文档：

.submit()

请注意，.submit()是.on('submit' ...)

的简写

将我的表单提交给ajax脚本

5 个答案: