jquery: calling invisible php-mailer? ajax?

hey guys, i know how to create a simple php file that mails some information to me.

However what I don't know is how to call that php-file with jquery and hand over a variable. Handing over a variable might work with isset()...

How can I call this PHP mailer from jquery and do that HIDDEN from the user. So there should not pop up a new window and shouldn't be a page refresh or anything like that.

$('a.report').click(function(e) {
        e.preventDefault();
        var id = $(this).attr('href');

        //call mail script and pass along the "id" variable

        //change text (maybe in a callback function IF THE MAILING WAS A SUCCESS.
        $(this).parent().text('Thank you for reporting.');

    })

So I have this a.report Link which should trigger the email script. In my email script I need to access the "id" variable set in jquery. And it would even be nice to have a callback function if the php script did it's th开发者_JAVA百科ing so I could output "Thank you for reporting".

How to do that?

Thank you guys.

I would use $.post():

<script type='text/javascript'>
$(function(){
    function onReportPosted(data) {
        // data.status - either 'error' or 'success', from mailer.php
        // data.message - some text, from mailer.php
        $('.result').text(data.message);
    }
    $('a.report').click(function(e) {
        $('.result').text('sending report...');
        var data = {
            text: $('textarea[name=text]').val()
        };
        $.post(
            'mailer.php',
            data,
            onReportPosted,
            'json'
        );
        return false;
    });
});
</script>

And in mailer.php:

<?php
    if ( isset($_POST['text']) ) {
        // mail()...
        $result = array(
            'status' => 'success',
            'message' => 'thank you for reporting',
        );
    } else {
        $result = array(
            'status' => 'error',
            'message' => 'some error occurred',
        );
    }
    header('Content-Type: application/json');
    echo json_encode($result);
    exit;

Update: here's a way how to "tie" callback to a specific element:

<script type='text/javascript'>
    $(function(){
        $('a.report').click(function(){
            var htmlElement = $(this).parent();
            var data = {
                // ...
            };
            $.post(
                document.location.toString(),
                data,
                function(data) {
                    htmlElement.html(data.message);
                },
                'json'
            );
            return false;
        });
    });
</script>

see $.post to know how to call and pass the id to the php script (http://api.jquery.com/jQuery.post/)

It will be somthing like

$.ajax({
  context: $(this),
  type: 'POST',
  url: 'script.php',
  data: {id: id },
  success: function() {
     $(this).parent().text('Thank you for reporting.');
  }
});

And in the php script, $id = $_POST['id'];

try:

 $.post('script.php', {variableName: value, variable2Name: value2});

in php: $value = $_REQUEST['variableName']; $value2 = $_REQUEST['variable2Name'];

jQuery provides some great AJAX methods for us under the AJAX API catagory. I think $.post would be what you're looking for. This is how I send JSON data to a simple PHP script in my Grooveshark userscript:

$.ajax({
type: 'POST',
url: 'http://path/to/script.php',
data: JSON.stringify({key: 'value', array: ['one', 'two', 'three']),
dataType: 'json',
success: function(data){
    console.log('Mailer returned with object ', JSON.parse(data) );
}
});

And here's how I parse it in PHP:

 $incoming = json_decode(file_get_contents("php://input"), true);

This returns nested associative arrays for the JSON content, very easy to parse! I highly recommend using JSON as your data interchange format. Much better than XML.