Javascript 根据条件检查数据库结果_Javascript_Php_Html_Mysql_Ajax

Javascript 根据条件检查数据库结果

javascript php html mysql ajax

Javascript 根据条件检查数据库结果,javascript,php,html,mysql,ajax,Javascript,Php,Html,Mysql,Ajax,我的问题如下。我希望javascript检查数据库中是否存在值。我有一个javascript函数，可以检查数据库中是否存在电子邮件地址。这一个工作正常，所以我复制了它，并将其更改为匹配不同的输入字段，该字段应检查是否存在值（woonplaats）。现在，它总是显示信息“plaatsnaam bestaat niet”，即使它确实存在。HTML、PHP代码以及检查数据库的SQL和javascript都在同一个PHP文件中。我知道PHP检查echo，但我只希望javascript执行检查在我的代码

我的问题如下。我希望javascript检查数据库中是否存在值。我有一个javascript函数，可以检查数据库中是否存在电子邮件地址。这一个工作正常，所以我复制了它，并将其更改为匹配不同的输入字段，该字段应检查是否存在值（woonplaats）。现在，它总是显示信息“plaatsnaam bestaat niet”，即使它确实存在。HTML、PHP代码以及检查数据库的SQL和javascript都在同一个PHP文件中。我知道PHP检查echo，但我只希望javascript执行检查

在我的代码下面：

HTML:

Javascript:

<script>
function checkMailStatus(){
    //alert("came");
var email=$("#email").val();
$.ajax({
    type:'post',
        url:'',
        data:{email: email},
        success:function(msg){
        alert('Gebruik een ander e-mail adres'); 
        return false; //prevent submit from submitting     
        }

 });
}
</script>
<script>
function checkCityStatus(){
    //alert("came");
var keyword=$("#keyword").val();
$.ajax({
    type:'post',
        url:'',
        data:{keyword: keyword},
        success:function(msg){
        alert('Plaatsnaam bestaat niet');
        return false; //prevent submit from submitting     
        }

 });
}
</script>

除了在两个单独的文件中有两个函数外，没有必要为这两个函数创建多个脚本块。如果你愿意，这里有另一条路线供你选择：

HTML

    <form action="" method="post" id="registration">
        <input type="email" name="email"    id="email"      placeholder="E-mailadres" required/>
        <input type="text"  name="keyword"  id="keyword"    placeholder="Woonplaats"    value="">
        <button type="submit" name="register" class="btn-red">Registreren!</button>
    </form>


登记员！

JAVASCRIPT

    <script>

    // MAKE SURE YOU ADD THE FOLLOWING TO YOUR JAVASCRIPT AS YOU ARE USING JQUERY, NOT RAW JS.

    (function ($) {             //<== THIS LINE IS NEW
        $(document).ready(function(e) {     //<== THIS LINE IS NEW
        var regForm     = $("#registration");

        regForm.submit(function(evt){
            // PREVENT FORM FROM DEFAULT BEHAVIOUR: SUBMITTING...
            evt.preventDefault();

            // IF BOTH CONDITIONS ARE SATISFIED... SUBMIT THE FORM MANUALLY...
            if(checkMailStatus() && checkCityStatus()){
                // SHIP THE FORM
                $(this).submit();
            }

        });


        function checkMailStatus(){
            var email       = $("#email").val();
            var returnVal   = 0;
            $.ajax({
                type:'post',
                    url:'check.php',
                    dataType:'json',
                    data:{email: email},

                    success:function(msg){
                        if(msg){
                            if(msg.message){
                                alert(msg.message); 
                            }
                        }else{
                            returnVal = 1;
                        }
                    }

             });
             return returnVal;
        }

        function checkCityStatus(){
            var keyword     = $("#keyword").val();
            var returnVal   = 0;
            $.ajax({
                type:'post',
                    url:'check.php',
                    dataType:'json',
                    data:{keyword: keyword},

                    success:function(msg){
                        if(msg){
                            if(msg.message){
                                alert(msg.message); 
                            }                                
                        }else{
                            returnVal = 1;
                        }  
                    }
            });
             return returnVal;
        }
        });      //<== THIS LINE IS NEW
    })(jQuery); //<== THIS LINE IS NEW
    </script>


//确保在使用JQUERY时将以下内容添加到JAVASCRIPT中，而不是原始JS。
（function（$）{/除了在两个单独的文件中有这两个函数外，没有必要为这两个函数创建多个脚本块。如果愿意，下面是另一个方法：
HTML
    <form action="" method="post" id="registration">
        <input type="email" name="email"    id="email"      placeholder="E-mailadres" required/>
        <input type="text"  name="keyword"  id="keyword"    placeholder="Woonplaats"    value="">
        <button type="submit" name="register" class="btn-red">Registreren!</button>
    </form>


登记员！

JAVASCRIPT
    <script>

    // MAKE SURE YOU ADD THE FOLLOWING TO YOUR JAVASCRIPT AS YOU ARE USING JQUERY, NOT RAW JS.

    (function ($) {             //<== THIS LINE IS NEW
        $(document).ready(function(e) {     //<== THIS LINE IS NEW
        var regForm     = $("#registration");

        regForm.submit(function(evt){
            // PREVENT FORM FROM DEFAULT BEHAVIOUR: SUBMITTING...
            evt.preventDefault();

            // IF BOTH CONDITIONS ARE SATISFIED... SUBMIT THE FORM MANUALLY...
            if(checkMailStatus() && checkCityStatus()){
                // SHIP THE FORM
                $(this).submit();
            }

        });


        function checkMailStatus(){
            var email       = $("#email").val();
            var returnVal   = 0;
            $.ajax({
                type:'post',
                    url:'check.php',
                    dataType:'json',
                    data:{email: email},

                    success:function(msg){
                        if(msg){
                            if(msg.message){
                                alert(msg.message); 
                            }
                        }else{
                            returnVal = 1;
                        }
                    }

             });
             return returnVal;
        }

        function checkCityStatus(){
            var keyword     = $("#keyword").val();
            var returnVal   = 0;
            $.ajax({
                type:'post',
                    url:'check.php',
                    dataType:'json',
                    data:{keyword: keyword},

                    success:function(msg){
                        if(msg){
                            if(msg.message){
                                alert(msg.message); 
                            }                                
                        }else{
                            returnVal = 1;
                        }  
                    }
            });
             return returnVal;
        }
        });      //<== THIS LINE IS NEW
    })(jQuery); //<== THIS LINE IS NEW
    </script>


//确保在使用JQUERY时将以下内容添加到JAVASCRIPT中，而不是原始JS。
（function（$）{/代码中需要更改的内容很少，例如：

正如我在中所说，您必须将AJAX请求发送到另一个页面并在那里进行处理。因此，创建一个check.php页面来处理AJAX请求
不要创建两个不同的函数，即checkMailStatus（）
和checkCityStatus（）
，而只使用一个函数，例如checkStatus（）
函数来验证输入字段
将dataType
设置添加到AJAX请求中，并将json对象作为服务器响应发送。dataType
是您期望作为服务器响应的数据类型
使用，它将防止您的数据库受到任何类型的SQL注入攻击

我假设电子邮件地址和WoonPaats都是必填字段
因此，在index.php页面上，您的HTML和jQuery脚本应该如下所示：
<?php

    // Your connection code
    $conn = new mysqli("localhost", "USERNAME", "PASSWORD", "DATABASE_NAME");

    if(isset($_POST['email'], $_POST['keyword'])){
        $email = $_POST['email'];
        $keyword = $_POST['keyword'];

        $stmt = $conn->prepare("SELECT id FROM users WHERE email=?");
        $stmt->bind_param("s", $email);
        $stmt->execute();
        $stmt->store_result();
        if($stmt->num_rows == 0){

            $stmt = $conn->prepare("SELECT woonplaats FROM `locatie` WHERE woonplaats=?");
            $stmt->bind_param("s", $keyword);
            $stmt->execute();
            $stmt->store_result();
            if($stmt->num_rows){
                echo json_encode(array('status' => 'success', 'msg' => 'no error'));
            }else{
                echo json_encode(array('status' => 'error', 'msg' => 'Place name does not exist'));
            }

        }else{
            echo json_encode(array('status' => 'error', 'msg' => 'Use a different email address'));
        }
    }else{
        echo json_encode(array('status' => 'error', 'msg' => 'missing fields'));
    }

?>

HTML:
<form action="" onSubmit="return checkStatus(this);" method="post" id="registration">
    <input type="email" name="email" id="email" placeholder="E-mailadres" value="" required>
    <input type="text" name="keyword" id="keyword" placeholder="Woonplaats" value=""  required>
    <button type="submit" name="register" class="btn-red">Registreren!</button>
</form>

<script>
    function checkStatus(f){
        var email=$("#email").val();
        var keyword=$("#keyword").val();

        $.ajax({
            type:'post',
            url:'check.php',
            data:{email: email, keyword: keyword},
            dataType: 'json',
            success:function(data){
                if(data.status == "success"){
                    f.submit();
                }else{
                    alert(data.msg);
                }
            }
        });
        return false;
    }
</script>


登记员！

jQuery:
<form action="" onSubmit="return checkStatus(this);" method="post" id="registration">
    <input type="email" name="email" id="email" placeholder="E-mailadres" value="" required>
    <input type="text" name="keyword" id="keyword" placeholder="Woonplaats" value=""  required>
    <button type="submit" name="register" class="btn-red">Registreren!</button>
</form>

<script>
    function checkStatus(f){
        var email=$("#email").val();
        var keyword=$("#keyword").val();

        $.ajax({
            type:'post',
            url:'check.php',
            data:{email: email, keyword: keyword},
            dataType: 'json',
            success:function(data){
                if(data.status == "success"){
                    f.submit();
                }else{
                    alert(data.msg);
                }
            }
        });
        return false;
    }
</script>


功能检查状态（f）{
var email=$（“#email”）.val（）；
var关键字=$（“#关键字”）.val（）；
$.ajax({
类型：'post'，
url:'check.php'，
数据：{电子邮件：电子邮件，关键字：关键字}，
数据类型：“json”，
成功：功能（数据）{
如果（data.status==“成功”）{
f、 提交（）；
}否则{
警报（data.msg）；
}
}
});
返回false；
}

在check.php页面上，按如下方式处理AJAX请求：
<?php

    // Your connection code
    $conn = new mysqli("localhost", "USERNAME", "PASSWORD", "DATABASE_NAME");

    if(isset($_POST['email'], $_POST['keyword'])){
        $email = $_POST['email'];
        $keyword = $_POST['keyword'];

        $stmt = $conn->prepare("SELECT id FROM users WHERE email=?");
        $stmt->bind_param("s", $email);
        $stmt->execute();
        $stmt->store_result();
        if($stmt->num_rows == 0){

            $stmt = $conn->prepare("SELECT woonplaats FROM `locatie` WHERE woonplaats=?");
            $stmt->bind_param("s", $keyword);
            $stmt->execute();
            $stmt->store_result();
            if($stmt->num_rows){
                echo json_encode(array('status' => 'success', 'msg' => 'no error'));
            }else{
                echo json_encode(array('status' => 'error', 'msg' => 'Place name does not exist'));
            }

        }else{
            echo json_encode(array('status' => 'error', 'msg' => 'Use a different email address'));
        }
    }else{
        echo json_encode(array('status' => 'error', 'msg' => 'missing fields'));
    }

?>




不要忘记在您的check.php页面中更改这一行$conn=new mysqli（“localhost”、“USERNAME”、“PASSWORD”、“DATABASE_NAME”）；
。
您需要在代码中更改的内容很少，例如：

正如我在中所说，您必须将AJAX请求发送到另一个页面并在那里进行处理。因此，创建一个check.php页面来处理AJAX请求
不要创建两个不同的函数，即checkMailStatus（）
和checkCityStatus（）
，而只使用一个函数，例如checkStatus（）
函数来验证输入字段
将dataType
设置添加到AJAX请求中，并将json对象作为服务器响应发送。dataType
是您期望作为服务器响应的数据类型
使用，它将防止您的数据库受到任何类型的SQL注入攻击

我假设电子邮件地址和WoonPaats都是必填字段
因此，在index.php页面上，您的HTML和jQuery脚本应该如下所示：
<?php

    // Your connection code
    $conn = new mysqli("localhost", "USERNAME", "PASSWORD", "DATABASE_NAME");

    if(isset($_POST['email'], $_POST['keyword'])){
        $email = $_POST['email'];
        $keyword = $_POST['keyword'];

        $stmt = $conn->prepare("SELECT id FROM users WHERE email=?");
        $stmt->bind_param("s", $email);
        $stmt->execute();
        $stmt->store_result();
        if($stmt->num_rows == 0){

            $stmt = $conn->prepare("SELECT woonplaats FROM `locatie` WHERE woonplaats=?");
            $stmt->bind_param("s", $keyword);
            $stmt->execute();
            $stmt->store_result();
            if($stmt->num_rows){
                echo json_encode(array('status' => 'success', 'msg' => 'no error'));
            }else{
                echo json_encode(array('status' => 'error', 'msg' => 'Place name does not exist'));
            }

        }else{
            echo json_encode(array('status' => 'error', 'msg' => 'Use a different email address'));
        }
    }else{
        echo json_encode(array('status' => 'error', 'msg' => 'missing fields'));
    }

?>

HTML:
<form action="" onSubmit="return checkStatus(this);" method="post" id="registration">
    <input type="email" name="email" id="email" placeholder="E-mailadres" value="" required>
    <input type="text" name="keyword" id="keyword" placeholder="Woonplaats" value=""  required>
    <button type="submit" name="register" class="btn-red">Registreren!</button>
</form>

<script>
    function checkStatus(f){
        var email=$("#email").val();
        var keyword=$("#keyword").val();

        $.ajax({
            type:'post',
            url:'check.php',
            data:{email: email, keyword: keyword},
            dataType: 'json',
            success:function(data){
                if(data.status == "success"){
                    f.submit();
                }else{
                    alert(data.msg);
                }
            }
        });
        return false;
    }
</script>


登记员！

jQuery:
<form action="" onSubmit="return checkStatus(this);" method="post" id="registration">
    <input type="email" name="email" id="email" placeholder="E-mailadres" value="" required>
    <input type="text" name="keyword" id="keyword" placeholder="Woonplaats" value=""  required>
    <button type="submit" name="register" class="btn-red">Registreren!</button>
</form>

<script>
    function checkStatus(f){
        var email=$("#email").val();
        var keyword=$("#keyword").val();

        $.ajax({
            type:'post',
            url:'check.php',
            data:{email: email, keyword: keyword},
            dataType: 'json',
            success:function(data){
                if(data.status == "success"){
                    f.submit();
                }else{
                    alert(data.msg);
                }
            }
        });
        return false;
    }
</script>


功能检查状态（f）{
var email=$（“#email”）.val（）；
var关键字=$（“#关键字”）.val（）；
$.ajax({
类型：'post'，
url:'check.php'，
数据：{电子邮件：电子邮件，关键字：关键字}，
数据类型：“json”，
成功：功能（数据）{
如果（data.status==“成功”）{
f、 提交（）；
}否则{
警报（data.msg）；
}
}
});
返回false；
}

在check.php页面上，按如下方式处理AJAX请求：
<?php

    // Your connection code
    $conn = new mysqli("localhost", "USERNAME", "PASSWORD", "DATABASE_NAME");

    if(isset($_POST['email'], $_POST['keyword'])){
        $email = $_POST['email'];
        $keyword = $_POST['keyword'];

        $stmt = $conn->prepare("SELECT id FROM users WHERE email=?");
        $stmt->bind_param("s", $email);
        $stmt->execute();
        $stmt->store_result();
        if($stmt->num_rows == 0){

            $stmt = $conn->prepare("SELECT woonplaats FROM `locatie` WHERE woonplaats=?");
            $stmt->bind_param("s", $keyword);
            $stmt->execute();
            $stmt->store_result();
            if($stmt->num_rows){
                echo json_encode(array('status' => 'success', 'msg' => 'no error'));
            }else{
                echo json_encode(array('status' => 'error', 'msg' => 'Place name does not exist'));
            }

        }else{
            echo json_encode(array('status' => 'error', 'msg' => 'Use a different email address'));
        }
    }else{
        echo json_encode(array('status' => 'error', 'msg' => 'missing fields'));
    }

?>




别忘了更改$conn=new mysqli（“localhost”、“USERNAME”、“PASSWORD”、“DATABASE_NAME”）；
在您的check.php页面中的这一行。
评论不用于扩展讨论；此对话已被删除。评论不用于扩展讨论；此对话已被删除。