CODEWITHSUNDEEP
jqueryajaxcallback
venkatachalam
venkatachalam

Reputation: 102439

Extracting Ajax return data in jQuery

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?

Upvotes: 44

Views: 201813

Answers (5)

redsquare
redsquare

Reputation: 78677

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();
}

Upvotes: 87

Rel
Rel

Reputation: 2814

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();
}

Upvotes: 2

aya
aya

Reputation: 1613

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);
}

Upvotes: 4

VinnyBenson
VinnyBenson

Reputation: 121

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);
    }
});

Upvotes: 12

redsquare
redsquare

Reputation: 78677

Change the .find to .filter...

Upvotes: 17

Related Questions