Extracting Ajax return data in jQuery

Question

I have done jQuery and Ajax, but I am not able to get the response into a Div element. This is the code:

Index.html

$.ajax({
    type:"POST",
    url: "ajax.php",
    data:"id="+id ,
    success: function(html){
        $("#response").html(data);
    }
});

It is receiving the response to my <div id="response"></div>.

The ajax.php returns following code to the index.html file:

<div id ="one"> OneVal </div>
<div id ="sub"> SubVal </div>

Will I able to extract the OneVal and Subval into a variable, and how can I extract "OneVal" and "SubVal", instead of above response?

var plz=$response.find('#title').text(); alert(plz); It Throws Null Values ,Should I need to Do any other thing to Get Values — venkatachalam
– venkatachalam, Commented Dec 31, 2008 at 5:36

thumbtackthief · Accepted Answer · 2015-10-09 22:23:52Z

87

You can use .filter on a jQuery object that was created from the response:

success: function(data){
    //Create jQuery object from the response HTML.
    var $response=$(data);

    //Query the jQuery object for the values
    var oneval = $response.filter('#one').text();
    var subval = $response.filter('#sub').text();
}

edited Oct 9, 2015 at 22:23

thumbtackthief

6,25110 gold badges47 silver badges94 bronze badges

answered Dec 30, 2008 at 13:18

redsquare

78.8k21 gold badges155 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

IMAbev Over a year ago

I am a jQuery novice, but I needed var $response(data.d) to get this to work. added the .d

D.Tate Over a year ago

For me, i tweaked the above to use .html() instead of .text() b/c i needed to retrieve the full html instead of just a text string. i.e. var oneval = $response.filter('#one').html();

Brett Weber Over a year ago

if (data.d) { data = data.d }

Peter Mortensen · Accepted Answer · 2013-01-12 16:16:17Z

17

Change the .find to .filter...

edited Jan 12, 2013 at 16:16

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Dec 31, 2008 at 10:49

redsquare

78.8k21 gold badges155 silver badges159 bronze badges

3 Comments

Gats Over a year ago

Spent 30mins playing with this before I saw your follow up here. Edited to include filter :D

Yves Van Broekhoven Over a year ago

Can you give an explanation why you can't use .find() here? I've tested it and indeed you get result when using .filter() but not when using .find()..

redsquare Over a year ago

@Yves Van Broekhoven because there is no wrapping root element so the jquery object contains multiple root nodes which you have to filter

Peter Mortensen · Accepted Answer · 2013-01-12 16:17:08Z

12

I have noticed that your success function has the parameter "html", and you are trying to add "data" to your elements html()... Change it so these both match:

$.ajax({
    type:"POST",
    url: "ajax.php",
    data:"id="+id ,
    success: function(data){
        $("#response").html(data);
    }
});

edited Jan 12, 2013 at 16:17

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 23, 2011 at 23:44

VinnyBenson

1211 silver badge2 bronze badges

Comments

aya · Accepted Answer · 2013-09-12 04:52:42Z

4

You can use json like the following example.

PHP code:

echo json_encode($array);

$array is array data, and the jQuery code is:

$.get("period/education/ajaxschoollist.php?schoolid="+schoolid, function(responseTxt, statusTxt, xhr){
    var a = JSON.parse(responseTxt);
    $("#hideschoolid").val(a.schoolid);
    $("#section_id").val(a.section_id);
    $("#schoolname").val(a.schoolname);
    $("#country_id").val(a.country_id);
    $("#state_id").val(a.state_id);
}

edited Sep 12, 2013 at 4:52

answered Dec 9, 2012 at 6:17

aya

1,6134 gold badges32 silver badges62 bronze badges

1 Comment

Peter Mortensen Over a year ago

What about the ending "}"?

Rel · Accepted Answer · 2015-09-11 05:24:25Z

2

You may also use the jQuery context parameter. Link to docs

Selector Context

By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function

Therefore you could also have:

success: function(data){
    var oneval = $('#one',data).text();
    var subval = $('#sub',data).text();
}

answered Sep 11, 2015 at 5:24

Rel

2,8642 gold badges17 silver badges15 bronze badges

Collectives™ on Stack Overflow

Extracting Ajax return data in jQuery

5 Answers 5

3 Comments

3 Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

3 Comments

Comments

1 Comment

Comments

Linked

Related