Pass PHP variable back to jQuery $.ajax function

Question

1. HTML

I have an input requesting the user to enter their PIN code:

<input type="text" name="pin" maxlength="4" id="pin" />

2. javaScript

When the user types in 4 characters, the jQuery function fires off an ajax call to process the PIN in a PHP file and return the corresponding site name:

$("input#pin").keyup(function() {
    var PIN = $("this").val();

    if (PIN.length == 4) {

        var dataString = "PIN=" + PIN;

        $.ajax({
            type: "POST",
            url: "pins.php",
            dataType: "json",
            data: dataString,
            cache: false,
            success: function(site)
                {
                    console.log("site name is:" + site);
                }
        });
    }
});    

3. PHP

pins.php contains the following code:

<?php
$pin = $_POST["PIN"];

if ($pin == "faf9") {
    $site = "pgv";
}

echo $site;
?>

Problem

I cannot seem to get the value of $site back into the success function of the ajax call. Console log reports null as the value if the pin doesn't equal faf9 and there is no log if I enter the correct pin.

I can't seem to figure out where I'm going wrong?

Answer 1

Change dataType to:

dataType: 'HTML',

That is all :)

Answer 2

your php returns a string but you're expecting a JSON object. Change your datatype attribute inside $.ajax function

Answer 3

For dataType: "json" , you have to return json object. If not, chang that type with appropriate one like dataType: "html" or dataType: "text"

Also, you need to initialize $site if you don't want null return value.

Answer 4

Make following modifications as:

• Replace var PIN = $("this").val(); with var PIN = $(this).val();

• Replace var dataString = "PIN=" + PIN; with var dataString = PIN;

• Replace dataType: "json", with dataType: "html",

Answer 5

这个m8与你的确切问题无关，但我认为你应该使用$(this)而不引用