Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jsFiddle testing jQuery AJAX request with echo

Tags:

jquery

ajax

The following code is alerting 'undefined' and not appending the html from the response data as I expected. Does anyone know why?

JavaScript:

$(function() {

    $('.document').on('click', '.ajax', function(e) {
        e.preventDefault();

        // ajax request
        $.ajax({
            async: true,
            cache: false,
            type: 'post',
            url: '/echo/html/',
            data: {
                html: '<p>This is echoed the response in HTML format</p>',
                delay: 1
            },
            dataType: 'html',
            beforeSend: function() {
                console.log('Fired prior to the request');
            },
            success: function(data) {
                console.log('Fired when the request is successfull');
                $('.document').append(data);
            },
            complete: function() {
                console.log('Fired when the request is complete');
            }
        });

    });

});​

HTML:

<div class="document">
    <a class="ajax" href="#">Fire an AJAX request</a>
</div>​

Example jsFiddle: http://jsfiddle.net/L6bJ2/3/

like image 925
RyanP13 Avatar asked Jan 17 '23 05:01

RyanP13


1 Answers

  1. The HTTP method is specified with by type rather than method, so you should be using;

    type: 'post',
    
  2. Because you've specified the response type as HTML, you get a String passed in the data parameter of the success callback; but it looks like you're expecting JSON as you're trying to use data.html. Instead, use data directly;

    success: function(data) {
        console.log('Fired when the request is successfull');
        $('.document').append(data);
    },
    

With these changes, you'll find it works: http://jsfiddle.net/L6bJ2/6/

like image 120
Matt Avatar answered Jan 28 '23 07:01

Matt