$ .ajax無法正常工作

Question

我想從如下所示的php文件中獲取一個值，我可以看到loader.gif但看不到avaiable.png或not_avaiable.png為什么呢？

$(document).ready(function()//When the dom is ready 
{
    $("#inputEmail").change(function()
    { //if theres a change in the username textbox

        var inputEmail = $("#inputEmail").val();//Get the value in the username textbox
        if (inputEmail.length > 2)//if the lenght greater than 3 characters
        {
            $("#availability_status").html('<img src="images/loader.gif" align="absmiddle">&nbsp;Checking availability...');
//Add a loading image in the span id="availability_status"

            $.ajax({//Make the Ajax Request
                type: "POST",
                url: "check_email.php", //file name
                data: "inputEmail=" + inputEmail, //data
                success: function(server_response) {

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

                        if (server_response === '0')//if ajax_check_username.php return value "0"
                        {
                            $("#availability_status").html('<img src="images/available.png" align="absmiddle">Yes');
                            $("#submit_button").css("display", "initial");
                            $("#inputEmail").attr('data-email','0');
                            //add this image to the span with id "availability_status"
                        }
                        else if (server_response === '1')//if it returns "1"
                        {
                            $("#availability_status").html('<img src="images/not_available.png" align="absmiddle">No');
                            $("#submit_button").css("display", "none");
                        }

                    });
                }
            });
        }
        else {
            $("#availability_status").html('<font color="#cc0000">Username too short</font>');
//if in case the username is less than or equal 3 characters only 
        }
        return false;
    });

});

check_email.php是

<?php

echo '1';

 ?>

如果jquery或div有問題，我在div中看不到loader.gif嗎？ 問題出在哪兒？

Answer 1

當您在AJAX調用的success()方法內部時，不需要使用ajaxComplete() 。 像這樣在success()方法中正確處理您的事情：

$.ajax({
    type: "POST",
    url: "check_email.php",
    timeout: 9000,
    data: "inputEmail=" + inputEmail,
    success: function(server_response) {
        if (server_response === '0') {
            $("#availability_status").html(
                '<img src="images/available.png" align="absmiddle">Geçerli'
            );
            $("#submit_button").css("display", "initial");
            $("#inputEmail").attr('data-email','0');
        } else if (server_response === '1') {
            $("#availability_status").html(
                '<img src="images/not_available.png" align="absmiddle">Geçersiz'
            );
            $("#submit_button").css("display", "none");
        }
    },
    error: function(xhr, textStatus, errorThrown){
        alert('request failed');
    }
});

也可能是timeout ，所以我在那里添加了timeout 。

Answer 2

嘗試這樣：

$.ajax({
          type: "POST",
          url: base_url,
          data: your data,
          dataType: "json",
          success: function(data)
              {
              }
           });

Answer 3

試試這個

formData = {
    inputEmail: $("#inputEmail")

}

$.ajax({ 
    type: "POST",
    url: "check_email.php",
    data: formData,
    success: function(server_response) {
        $("#availability_status").ajaxComplete(function(event, request) {
            if (server_response === '0') //if ajax_check_username.php return value "0"
            {
                $("#availability_status").html('<img src="images/available.png" align="absmiddle">Yes');
                $("#submit_button").css("display", "initial");
                $("#inputEmail").attr('data-email', '0');
                //add this image to the span with id "availability_status"
            } else if (server_response === '1') //if it returns "1"
            {
                $("#availability_status").html('<img src="images/not_available.png" align="absmiddle">No');
                $("#submit_button").css("display", "none");
            }
        });
    }
});