Javascript JQuery在表单提交时显示警报消息

我试图在jquery上显示来自客户端的警报消息。一旦单击submit按钮，就会调用jquery。然后表单将调用服务器端

php

。这是我的密码：

表格

<form action="branch_add_verifier.php" method="POST" id="formAdd">
<input type="text" name="id" id="id">
<input type="submit" value="submit">
</form>

<form action="branch_add_verifier.php" method="POST" id="formAdd">
<input type="text" name="id" id="id">
<input type="submit" value="submit">
</form>

总之，上面的代码可以工作，但我需要显示消息，告诉我查询是否成功。谢谢

---

我的新问题是，下面的代码将我带到另一个页面：

表格

<form action="branch_add_verifier.php" method="POST" id="formAdd">
<input type="text" name="id" id="id">
<input type="submit" value="submit">
</form>

<form action="branch_add_verifier.php" method="POST" id="formAdd">
<input type="text" name="id" id="id">
<input type="submit" value="submit">
</form>

---

我需要在json_编码之后返回，因为下面仍然有方法。

只需将

id=“id”

放在输入类型文本中即可

<input type="text" name="id">

工作代码

$（文档）.ready（函数（）{
变量$form=$（“#formAdd”）；
$form.submit（函数（）{
var id=$（“#id”）.val（）；
如果（id长度<12）{
警报（“输入错误”）；
返回false；
}
$.post（$form.attr（'action'），$（this.serialize（），函数（response）{
警报（“已成功添加数据”）；
}“json”）；
返回false；
});
});

HTML表单

<form action="branch_add_verifier.php" method="POST" id="formAdd">
    <input type="text" name="id" id="id">
    <input type="submit" value="submit">
</form>



脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(function() { 
        $(document).on('submit', "#formAdd", function(e) {
            e.preventDefault();

            $.ajax({  
                url: $(this).attr('action'),
                type: "post",  
                data: $(this).serialize(),
                error:function(){
                    alert("ERROR : CANNOT CONNECT TO SERVER");
                },
                success: function(data) {
                    alert(data);
                }
            });
            return false; 
        });
    });
</script>


$（函数（）{
$（文件）。关于（'submit'，'formAdd'，函数（e）{
e、 预防默认值（）；
$.ajax（{
url:$（this.attr（'action'），
类型：“post”，
数据：$（this）.serialize（），
错误：函数（）{
警报（“错误：无法连接到服务器”）；
},
成功：功能（数据）{
警报（数据）；
}
});
返回false；
});
});

PHP服务器端如下所示：

<?php 
$insert = mysqli_query($conn, "insert query here");
if($insert) {
    echo json_encode('ok');
} else {
    echo json_encode('no');
}
?>


希望这对您很有用。。。如果对您有帮助，请接受答案……：）@本杰明·汉克斯。代码解决了我的问题，但在我按下提交按钮后，它会将我指向操作url。我需要它停留在页面上，同时呼叫服务器端如果我的回答对您有帮助，请接受我的回答，如果您遇到任何问题，请在单击提交按钮后通知我此代码如果重定向表单操作url，您可以共享最新的提交脚本。或者跟随我的答案。我使用了
e.preventDefault（）
在
$（'#formAdd'）之后。在（'submit'，函数（e）{
。如果您使用
e.preventDefault（）；
调用服务器端时，它将停留在此页面上。我复制了您的解决方案，但它确实会将我带到另一个页面。显示最新的html表单和jqeury提交函数，请告诉我
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(function() { 
        $(document).on('submit', "#formAdd", function(e) {
            e.preventDefault();

            $.ajax({  
                url: $(this).attr('action'),
                type: "post",  
                data: $(this).serialize(),
                error:function(){
                    alert("ERROR : CANNOT CONNECT TO SERVER");
                },
                success: function(data) {
                    alert(data);
                }
            });
            return false; 
        });
    });
</script>

<?php 
$insert = mysqli_query($conn, "insert query here");
if($insert) {
    echo json_encode('ok');
} else {
    echo json_encode('no');
}
?>