阿贾克斯正在躲避我。 如何执行一个简单的ajax请求？

Question

Okay background i am a js and ajax noob. I work mainly in php and mysql html 5, i decided to get with the times and stop having to reload the page for simple things.

I am trying to make a simple ajax request to a php file and print the result.

So on my page i have a text bax with the id password(leftover from another experiment) a jquery ui tabs setup with a tab with the id galleries and a div with the id my-galleries. The idea is that upon click on the galleries tab the value of the password field is pulled and sent to the php file my-galleries.php and the result is printed to the div my-galleries and displayed.

The code:

<input type="password" id="password"/>    
<div id="tabs">
    <ul>
        <li id="welcome"><a href="content/welcome.html">Welcome</a></li>
        <li><a href="content/about.html">About</a></li>
        <li><a href="#my-galleries" id="galleries">Galleries</a></li>
        <li><a href="content/contact.html">Contact</a></li>
    </ul>
    <div id="my-galleries"></div>
</div>

Then the js

$("#galleries").click(function(){
    $.ajax({
        type : 'POST',
        url : 'my-galleries.php',
        dataType : 'json',
        data: {
            password : $('#password').val()
        },
        success: function(msg){
            $("#my-galleries").html(msg)
        }           
    })
});

Then the php

$password= $_REQUEST['password'];
$salt= uniqid();
$str= $salt.$password;
$hash= hash("sha512", $str);
echo $hash;

According to the tuts i have been reading it should work but it doesn't. I cant figure it out.

Answer 1

Your problem is that you're requesting JSON; your data is definitely not JSON. It's plain text, so use the 'text' dataType :

$("#galleries").click(function(){
    $.ajax({
        type: 'POST',
        url: 'my-galleries.php',
        dataType: 'jsontext',
        data: {
            password : $('#password').val()
        },
        success: function(msg) {
            $("#my-galleries").html(msg)
        }
    });
});

Answer 2

Use debugging tools from your browser, eg. Firebug in Firefox or Developer Tools in Google Chrome / Chromium.

This will show you possible problems. They may be the following:

1. There is an error in your JavaScript.
2. You may be asking wrong destination.
3. There may be a redirection after request.
4. There may be an error on the server (resulting in success() callback not being executed). Check the response using debugging tools.
5. The data type may not be what you have specified. Check if it is JSON.
6. $ may not be defined. Check if it is.
7. Your JS may be executed before the DOM objects (specifically the one with " galleries " ID) are available. Put your code eg. in $(function(){/* your code here */}); .
8. etc.

Answer 3

You should change

echo $hash;

to

echo json_encode(array('response' => $hash));

then access it like so in your success block:

$("#my-galleries").html(msg.response);

assuming you really want json for some reason. Otherwise definitely use minitech's answer .

...also, just my opinion, you should die($hash); and not echo $hash; : kill the script on response.