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

我试图从客户端在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之后返回，因为在它下面仍然有方法。

<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 
$insert = mysqli_query($conn, "insert query here");
if($insert) {
    echo json_encode('ok');
} else {
    echo json_encode('no');
}
?>

<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>