jQuery在表单提交时显示警告消息

Question

我将尝试在客户端使用jQuery显示警告信息。一旦单击提交按钮，将调用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>

JQUERY

$(document).ready(function(){
        var $form = $('#formAdd');
        $form.submit(function(){
            var id= $("#id").val();
            if (id.length < 12) {
                alert("INPUT ERROR");
                return false;
            }

            $.post($form.attr('action'), $(this).serialize(), function(response){
                alert("DATA SUCCESSFULLY ADDED");
            },'json');
            return false;
        });
    });

但是警告消息不会在$.post方法内弹出。 我还想知道如何从服务器端弹出警告消息。这是我的示例代码： 服务器端：

<?php $query = mysqli_query($conn, "SELECT * FROM table1
        INNER JOIN table2
        ON table1.col1= table2.col1

        WHERE table2.col3= '".$_REQUEST['id']."'");

if (mysqli_num_rows($query) != 0) {
    echo "<script>alert('ERROR')</script>";
    return false;
} ?>

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

---

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

表单

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

JQUERY

$(document).ready(function(){
        $('#formAdd').on('submit', function (e) {
            e.preventDefault();

            var id= $("#id").val();
            if (id.length < 12) {
                alert("INPUT ERROR");
                return false;
            }

            $.ajax({
                context: this,
                url: $(this).attr('action'),
                type: 'POST',
                data: new FormData(this),
                dataType: 'json'
            }).done(function (data) {
                if(data == 'ok') {
                   alert("DATA SUCCESSFULLY ADDED");
                }
                if(data == 'no') {
                   alert("ERROR");
                }
            }).fail(function (data) {
                console.log('failed');
            });
        });
    });

服务器

$query = mysqli_query($conn, "SELECT * FROM table1
    INNER JOIN table2
    ON table1.col1= table2.col1

    WHERE table2.col3= '".$_REQUEST['id']."'");

    if (mysqli_num_rows($query) != 0) {
    mysqli_close($conn);
    echo json_encode('no');
    return false;
}

我需要在json_encode之后返回，因为下面还有其他方法。

- Benjamin G

Answer 1

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>

PHP服务器端代码如下：

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

- Razib Al Mamun

---

谢谢。这段代码解决了我的问题，但是在我点击提交按钮后，它会将我重定向到操作URL。我需要它在调用服务器端时仍然停留在页面上。 - Benjamin G

我复制了你的解决方案，但它确实将我带到了另一个页面。 - Benjamin G

展示你最新的HTML表单和jQuery提交函数，并且请告诉我。 - Razib Al Mamun

我在我的问题中添加了它。 - Benjamin G

我解决了这个问题。我用$(this).serialize()替换了new FormData(this)。 - Benjamin G

Answer 2

只需要在文本输入框的标签中添加id="id"即可。

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

工作中的代码

$(document).ready(function(){
        var $form = $('#formAdd');
        $form.submit(function(){
            var id= $("#id").val();
            if (id.length < 12) {
                alert("INPUT ERROR");
                return false;
            }

            $.post($form.attr('action'), $(this).serialize(), function(response){
                alert("DATA SUCCESSFULLY ADDED");
            },'json');
            return false;
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="branch_add_verifier.php" method="POST" id="formAdd">
<input type="text" id="id" name="id">
<input type="submit" value="submit">
</form>

- RJParikh

---

希望这对您有用...如果有帮助，请接受答案... :) @Benjamin G - RJParikh