AJAX value sending error

Question

Hi I have problems with the script below. The problem I think lies on data that need to be sent to php via AJAX.

jQuery

$('.send').live("click", function(){

    $.ajax({

        url:'foobar.php',
        type:'post',
        data: 'id=' + $(this).attr('id'),
        dataType:'json',
        contentType: 'application/json; charset=utf-8',
        success: function(data) {

            switch (data.status)
            {
                case "a":

                    alert(data.text);

                    break;

                case "b":

                    alert(data.text);

                    break;

                }
            },
        error: function(XMLHttpRequest, textStatus, errorThrown) {

            alert ("error: "+textStatus);

            }
        })
    }

and, PHP

$id = $_REQUEST['id'];

switch ($id) {

    case "foo":

        $data["status"] = "a";
        $data["text"] = "foo-foo";
        echo json_encode($data);

        break;

    case "bar":

        $data["status"] = "b";
        $data["text"] = "bar-bar";
        echo json_encode($data);

        break;

    }

but, if I do this

//data: 'id=' + $(this).attr('id'),

and change this

$id = 'foo';

the script work just fine. What I need to do to make both script above can work? Thanks in advance.

can you check alert($(this).attr('id')) is 'undefined'?Or can you show the element with class "send" — Shijin TR, May 02 '13 at 12:24
live is deprecated try to use on .and for your problem use firebug and check console for post data and response .. Thanks — rahularyansharma, May 02 '13 at 12:27
Remove the `ContentType` line in your AJAX. You are **not** sending a JSON data, you are sending a plain percentile encoded data.. — UltraInstinct, May 02 '13 at 14:10

score 3 · Answer 1 · answered May 02 '13 at 12:26

3

change this

data: 'id=' + $(this).attr('id'),

to

data: {id :  $(this).attr('id')},

also use on here, live is deprecated

$('.send').on("click", function(){

answered May 02 '13 at 12:26

Yogesh Suthar

30,424
18
72
100

@Yogesy Suthar I've been try this solution but the code still not working, BTW I use the latest version of jQuery and PHP.. – ani May 02 '13 at 12:55

score 2 · Accepted Answer · answered May 02 '13 at 14:17

I will put my comment as an answer.

Apart from using a deprecated jQuery API, what others didn't point out is the following:

What you are doing in the below line:

contentType: 'application/json; charset=utf-8',

is that you are promising the server that the HTTP entity will be a JSON-string, which is not the case. It is actually the usual percentile-encoded string. (a=b&c=d&e=f).

If you remove that line, the browser sends a default value Content-Type as application/x-www-url-form-encoded. That would trigger PHP to parse the HTTP entity as such and give you as the $_REQUEST array properly populated.

It make sense now, thank you very much.. this solve my problem — ani, May 02 '13 at 14:24

score 0 · Answer 3 · answered May 02 '13 at 12:24

0

You need to JSON encode the data being sent.

It should look something like: '{"id":"' + $(this).attr('id') + '"}'

answered May 02 '13 at 12:24

Oskar

158
7

No need for all those additional quotes; `{id: $(this).attr('id')}` – Christian May 02 '13 at 12:26
I have changed the code to what you've told but still get parsererror – ani May 02 '13 at 12:48
Well you might need to decoded the JSON string on the server side, such as [link](http://stackoverflow.com/questions/4343596/parsing-json-file-with-php) – Oskar May 02 '13 at 12:52

score 0 · Answer 4 · answered May 02 '13 at 12:32

0

You can use ,

     $('.send').click(function(){

Insted of

  $('.send').live("click", function(){

There is an error showing

TypeError: Object [object Object] has no method 'live'(live is deprecated)

answered May 02 '13 at 12:32

Shijin TR

7,516
10
55
122

I've try this solution with same result as before. – ani May 02 '13 at 13:08

score 0 · Answer 5 · answered May 02 '13 at 14:15

There are a few issues present in the code in the question.

Don't use .live(). It was deprecated in jQuery 1.7 and removed entirely in jQuery 1.9 (the latest release version). Instead, use .on():

$('.send').on('click', function() {
    ...
});

Or, if you actually need the event delegation:

$(document).on('click', '.send', function() {
    ...
});

When setting the data property in your object literal passed as an argument of $.ajax(), you have two options: a string or an object literal. So either:

data: {id: this.id},

or

data: 'id=' + this.id,

Note that I'm using this.id, not $(this).attr('id');. Why? Because it avoids unnecessary usage of jQuery, and because .attr() isn't the correct function - you want the id property, so you should use .prop() (though, again, don't use jQuery unless you need to).

Finally, you haven't closed the call to .click(), so you need to add a ); to the end of your posted code.

The entire thing should look something like this:

$('.send').on("click", function () {

    $.ajax({

        url: 'foobar.php',
        type: 'post',
        data: 'id=' + this.id,
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function (data) {

            switch (data.status) {
            case "a":

                alert(data.text);

                break;

            case "b":

                alert(data.text);

                break;

            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {

            alert("error: " + textStatus);

        }
    })
});

AJAX value sending error

5 Answers5