$ .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调用的ajaxComplete()方法的内时，您不需要使用success()。只需在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。

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");
            }
        });
    }
});