使用Javascript / Ajax運行php腳本

Question

我在表單底部有一個按鈕，如果用戶嘗試使用的電子郵件已在使用中，我將嘗試禁用它。 用戶提供的電子郵件為$ email

這是我的前端代碼。

        <script type="text/JavaScript">
        var email = '<?php echo $email; ?>';//Get the value in the username textbox
        $.ajax({  //Make the Ajax Request
            type: "POST",  
            url: "ajax_check_email.php",  //file name
            data: "email="+ email,  //data
            success: function(server_response){  

           $("#availability_status").ajaxComplete(function(event, request){ 

            if(server_response == '0')//if ajax_check_username.php return value "0"
            { 
             alert("Server response recieved: 0");
            $("#availability_status").html('<img src="/img/icon-success.png" align="absmiddle" style="height: 15px; width: auto; margin-top: -2px;"> <font color="#c9dc54" style="padding-top: 5px;"> Available </font>  ');
            $("#btn-submit-2").html('<button type="submit"  class="btn btn-danger btn-lg btn-block"   id="b"  style="font-family: "klavikaRegular"; letter-spacing: 1px;" name="skip" value="0">CONTINUE</button>');
            //add this image to the span with id "availability_status"
            }  
            else if(server_response == '1')//if it returns "1"
            {  
             alert("Server response recieved: 1");
             $("#availability_status").html('<img src="/img/icon-error.png" align="absmiddle" style="height: 15px; width: auto; margin-top: -2px;"> <font color="#b11116" style="padding-top: 5px;">Not Available </font>');
             $("#btn-submit-2").html('<a class="btn btn-default btn-lg btn-block" style="font-family: "klavikaRegular"; letter-spacing: 1px;">CONTINUE</a>');
            }  

           });
           } 

          }); 

        }
        else
        {
        alert("failed query");
        $("#availability_status").html('<font color="#b11116">Username too short</font>');
        $("#btn-submit").html('<a class="btn btn-default btn-lg btn-block" style="font-family: "klavikaRegular"; letter-spacing: 1px;">USERNAME TOO SHORT</a>');
        //if in case the username is less than or equal 3 characters only 
        }

        </script>

這是我的PHP文件源

    <?php

    include('database_connection.php');
    //Include The Database Connection File 
    if(isset($_POST['email']))//If a username has been submitted 
    {
    $email = mysql_real_escape_string($_POST['email']);//Some clean up :)

    $check_for_email = mysql_query("SELECT user_login FROM wp_users WHERE user_email='$email'");
    //Query to check if username is available or not 

    if(mysql_num_rows($check_for_email))
    {
    echo '1';//If there is a  record match in the Database - Not Available
    }
    else
    {
    echo '0';//No Record Found - Username is available 
    }

    }

    ?>

我的JavaScript語法有問題嗎？

$ email是硬編碼的，因為我知道應該會失敗。

Answer 1

嘗試在php頁面中編寫成功：

顯示頁面

<div id="availability_status"></div>
<script type="text/JavaScript">
    var email = '<?php echo $email; ?>';//Get the value in the username textbox

    $(document).ready(function() {
            $.ajax({  //Make the Ajax Request
                    url: "ajax_check_email.php?email="+email,  //data
                    cache: false,
                    success: function(server_response){
                            $("#availability_status").html(server_response);
                        }
                });
        });
</script>

** ajax_check_email.php **

<?php
    include('database_connection.php');
    //Include The Database Connection File 
    if(isset($_GET['email'])) {
            if(filter_var($_GET['email'], FILTER_VALIDATE_EMAIL)) {
                    $email              =   mysql_real_escape_string($_POST['email']);//Some clean up :)
                    $check_for_email    =   mysql_query("SELECT user_login FROM wp_users WHERE user_email='$email'");
                    //Query to check if username is available or not 
                    if(mysql_num_rows($check_for_email)) { ?>
        <img src="/img/icon-error.png" align="absmiddle" style="height: 15px; width: auto; margin-top: -2px;">
        <font color="#b11116" style="padding-top: 5px;">Not Available </font>
                <?php   }
                    else { ?>

        <img src="/img/icon-success.png" align="absmiddle" style="height: 15px; width: auto; margin-top: -2px;"> <font color="#c9dc54" style="padding-top: 5px;"> Available </font>
        <button type="submit"  class="btn btn-danger btn-lg btn-block"   id="b"  style="font-family: "klavikaRegular"; letter-spacing: 1px;" name="skip" value="0">CONTINUE</button>
                <?php   }
                }
            else { ?>
            <h2>Invalid Email Address.</h2>
            <?php }
        } ?>

Answer 2

是的，您的JavaScript出現語法錯誤。

    }
    else
    {
    alert("failed query");
    $("#availability_status").html('<font color="#b11116">Username too short</font>');
    $("#btn-submit").html('<a class="btn btn-default btn-lg btn-block" style="font-family: "klavikaRegular"; letter-spacing: 1px;">USERNAME TOO SHORT</a>');
    //if in case the username is less than or equal 3 characters only 
    }

支架真的不會關閉任何東西，再加上沒有如果是其他 （只有一個是真正的$ .ajaxComplete（）調用中）。

您不需要像這樣使用$ .ajaxComplete。

$.ajax({success: function(data){
       if(data == '1') {
        //If server returns 1 do...

       } else if(data == '0') {
         //If server returns 0 do...
       } else {
         //Nothing returned
       }
     }
});

另外，將AJAX的dataType指定為文本。

$.ajax({dataType: 'text',
        success: ... });