javascript - Put AJAX Response in HTML format - Stack Overflow

admin管理员组

文章数量:1432230

I've AJAX response which needs to be rendered in HTML setup in PHP file. I'm confused regarding how to render it as there are multiple data in AJAX response and each of them must be put in specific places in html

for example AJAX response has two(or n) objects like this:

0:Object
     id: "111"
     Name: "abc"
1:Object
     id: "112"
     Name: "xyz"

Then, There already would be two(or n) divs with user class in HTML

<div class='user'>
    <div class='userId'> 
        <div class='usernm'>  </div>
    </div>
</div>

<div class='user'>
    <div class='userId'> 
        <div class='usernm'> </div>
    </div>
</div>

What I need is put those response values in this divs like this:

<div class='user'>
    <div class='userId'> 111
        <div class='usernm'> abc </div>
    </div>
</div>

 <div class='user'>
    <div class='userId'> 112
        <div class='usernm'> xyz</div>
    </div>
</div>

I'm lost as to how can I achieve that on AJAX Success here using jQuery:

$.ajax({
    type: 'GET',
    url: '/url/goes/here',
    dataType: "json",
    success: function(data) {
        $.each(data, function(key, value){
            console.log(value); //this outputs response as Objects shown above                   
        });
    }
});

I've AJAX response which needs to be rendered in HTML setup in PHP file. I'm confused regarding how to render it as there are multiple data in AJAX response and each of them must be put in specific places in html

for example AJAX response has two(or n) objects like this:

0:Object
     id: "111"
     Name: "abc"
1:Object
     id: "112"
     Name: "xyz"

Then, There already would be two(or n) divs with user class in HTML

<div class='user'>
    <div class='userId'> 
        <div class='usernm'>  </div>
    </div>
</div>

<div class='user'>
    <div class='userId'> 
        <div class='usernm'> </div>
    </div>
</div>

What I need is put those response values in this divs like this:

<div class='user'>
    <div class='userId'> 111
        <div class='usernm'> abc </div>
    </div>
</div>

 <div class='user'>
    <div class='userId'> 112
        <div class='usernm'> xyz</div>
    </div>
</div>

I'm lost as to how can I achieve that on AJAX Success here using jQuery:

$.ajax({
    type: 'GET',
    url: '/url/goes/here',
    dataType: "json",
    success: function(data) {
        $.each(data, function(key, value){
            console.log(value); //this outputs response as Objects shown above                   
        });
    }
});

• javascript
• php
• jquery
• html
• ajax

Share Improve this question Follow asked Oct 7, 2016 at 6:14 s develops develop 11544 silver badges1616 bronze badges 7

• Why you put 2 div before the response. Create div at the place when currently you wrote console.log(); and append it to the parent div – Keyur Mistry Commented Oct 7, 2016 at 6:17
• @KinjalMistry I'm not allowed to create div in response, I only have to put the data – s develop Commented Oct 7, 2016 at 6:19
• Check Madalin ivascu's answer. And if you don't allow to create let me know the reason. Why you are not allowed? – Keyur Mistry Commented Oct 7, 2016 at 6:21
• @KinjalMistry I'm told that this AJAX req is to called multiple times (probably every 1sec), so in that case it would increase the load if I create the html content in response every sec. so instead, i've to only append the new data that response has – s develop Commented Oct 7, 2016 at 6:24
• Is your response count fix? I mean to say every time you have only 2 records on your response? or there is a case to get differ count of records? – Keyur Mistry Commented Oct 7, 2016 at 6:33

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 3

Use the append function in your loop to add the elements to the page

$('body').append('<div class="user">
    <div class="userId"> '+value.id+'
        <div class="usernm">'+value.name+'</div>
    </div>
</div>');//note change the body element to your desired parent element

if you only need to put the data do the following:

success: function(data) {
     $('.userId').each(function(key, value){
                $(value).prepend(data[key].id);   
                $(value).find('.usernm').text(data[key].name);              
            });
}

demo:https://jsfiddle/gf32wd7L/1/

Can you please try

 $.ajax({
     type: 'GET',
     url: '/url/goes/here',
     dataType: "json",
     success: function(data) {
       $.each(data, function(key, value) {
         $('<div/>', {
           'class': 'user'
         }).append(
           $('<div/>', {
             'class': 'userId'
           }).text(this.id).append(
             $('<div/>', {
               text: 'usernme'
             }).text(this.Name)
           });
       });
     }
   });

This is another way, Use if it is convenient,

Let us say ur HTML,

<div class="append-div"></div>

Your JSON,

{
"Objects":[
    {
        "id": "111",
        "name": "abc"
    },
    {
        "id": "112",
        "name": "xyz"
    }
 ]
}

The JS,

$(document).ready(function() {
$.ajax({
    type: 'GET',
    url: 'json.js',
    dataType: "json",
    success: function(data) {
        var userDiv = "";
        $.each(data.Objects, function(key, value){
            console.log(value); //this outputs response as Objects shown above
            userDiv += '<div class="user"><div class="userId">' + value.id + '</div>' + value.name + '</div>';
        });

        $(".append-div").append(userDiv);  // Append the results
    }
});
}); 

本文标签： javascriptPut AJAX Response in HTML formatStack Overflow