jQuery / Ajax-单击以显示

I want to basically create a link which says:

<a href="#" id="reveal" alt="928">Click here to show contact information</a>

Upon clicking it, it will ping a script via an ajax request, the ajax request will look up the user table where the ID is what is contained in the alt tag, it will return a certain field from the database and then the div will change from this link, to a contact number.

I'm sure some of you have seen this done before, for example:

Click to see persons phone number

They click it, and it changes to their phone number.

How would I go about doing this? I want to do it using ajax instead of having the phone number in the source code, because that really defeats the purpose of them having to click to reveal if bots can get it from the source code.

Thanks :)

<a href="#" id="reveal" alt="928">Click here to show contact information</a>
<div id="myHiddenDiv"></div>

$("#reveal").click(function(){
   $.get("test.php", { id: $(this).attr("alt") },
     function(data){
         $("#myHiddenDiv").html(data);
         $("#myHiddenDiv").show();
     });
});

This example works assuming you've only got one of these "plugins" on your site, if you'll have multiple, use this:

<a href="#" class="reveal" alt="928">Click here to show contact information</a>
<div class="myHiddenDiv"></div>

$(".reveal").click(function(){
   var divSelector = $(this).next("div");
   $.get("test.php", { id: $(this).attr("alt") },
     function(data){
         divSelector.html(data);
         divSelector.show();
     });
});

Somethign along the lines of

$("#reveal").click(function(){

$.get('getphoneNumber.php',{id:$(this).attr('alt')}, function(data) {

    $('#reveal').html(data);

   });
});

with a php script called getphoneNumber.php that accepts a get parameter of id

Try this one

$('#reveal').click(function () {
    var th = $(this);
    $.get('/get-the-phone-number', { id: th.attr('alt') }, function (response) {
        th.text(response);
    });
});

Also, I'd recommend you put the id number inside a data-contact-id attribute and access it via th.data('contact-id') instead of using the alt attribute. Ignore me if you have other reasons to do this.

$("#reveal").live('click',function(event) {
var link = $(this).attr('alt');
var dataString = 'alt=' + link ;

    $.ajax({
            type: "POST",
            url: "url",
            cache:false,
            data: dataString,

            success: function(data){

                this.href = this.href.replace(data);




            }

        });

}