Как заполнить мой html с помощью json-объекта?

Вопрос:

Я новичок в ajax. Я пытаюсь получить значение и хочу заполнить фрагмент кода html. У меня есть html-код и json-объект, который имеет значение. Теперь я хочу показать конкретное значение в другой части HTML-кода. Вот мой html-код: –

<div>
<div class="borb clearfix">
<div class="profileholder fleft">
<img src="images/users/1.png" class="userpic">
<div class="icon state green"></div>
</div>
<div class="remainder">
<div class="padl10">
<div class="username">Anurag Shivpuri</div>
<div class="desig">Cheif Information Officer</div>
<div class="loc">Credit Operation  |  Pune</div>
</div>
</div>
</div>
<ul class="userdata">
<li>
<span class="lbl">Employee Code :</span>
<span> 2007</span>
</li>
<li>
<span class="lbl">Role_Designation :</span>
<span> Senior HR</span>
</li>
<li>
<span class="lbl">Department :</span>
<span> HR</span>
</li>
<li>
<span class="lbl">Sub_Department :</span>
<span> Talent Acquisition</span>
</li>
<li>
<span class="lbl">Official E-mail Id :</span>
<span> [email protected]</span>
</li>
<li>
<span class="lbl">Mobile No :</span>
<span> 9844333932</span>
</li>
</ul>
<div class="footbar">
<a href="#" class="btn">Reward</a>
<a href="#" class="btn">Incentive</a>
<a href="#" class="btn">Movement</a>
<a href="#" class="btn">Leaves</a>
<a href="#" class="btn">LnD</a>
</div>

При успехе ajax я получаю значение теперь, когда хочу заполнить его в своем html-коде. Пожалуйста, помогите мне.

Ответ №1

Вы можете использовать библиотеку (например, нокаут) для этого, или вы можете использовать jQuery для создания элементов:

$("<div>").append("some text").appendTo("body");//creates a div, append some text and...

Ответ №2

Если у вас уже есть событие успеха в вашем ajax, вы можете захватить пустой элемент DOM и установить его содержимое.

document.getElementById('placeholder').innerHTML = jsonData.myProperty;

Ответ №3

Вы должны использовать innerHTML в javascript.

Установите идентификатор элемента, который необходимо обновить:

<li>
<span class="lbl">Employee Code :</span>
<span id='employeeCode'> 2007</span>
</li>

Затем обновите его с помощью значения json:

document.getElementById('employeeCode').innerHTML= yourJsonObject.employeeCodeValue;