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?

Answer 1

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

Answer 2

Change the .find to .filter...

Answer 3

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

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

Answer 5

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

Answer 6

on success: function (response) { alert(response.d); }