首页 > 解决方案 > 如何将从ajax调用返回的数据附加到html表?

问题描述

实际上,我在 ajax 调用中以 html 数据格式获取响应数据,这工作正常,我可以使用.html()方法轻松地将响应数据附加到表中,

下面我创建了一个示例脚本,当我们从下拉列表中选择“ALL”选项时,如何将 JSON 数据附加到 HTML 表中?

对此的任何帮助将不胜感激。谢谢

function get_leads_data(profile) {
		
		if (profile === 'all') {
			
			const response_data = "[{\"company\":\"Premier Property Management\", \"Property Type\":\"Single Home or Condo\", \"zip\":\"01255\"},\n" +
					"\t\t\t\n" +
					"\t\t\t{\"company\":\"Real Property Management\", \"Property Type\":\"Multi-Family (2-4 units)\", \"zip\":\"10001\"},\n" +
					"\t\t\t\n" +
					"\t\t\t{\"company\":\"Horde Property Management\", \"Property Type\":\"Homeowners Association (2-49 units)\", \"zip\":\"00688\"}\n" +
					"\t\t]";
			
			const jsonObject = JSON.parse(response_data);
			
			alert(JSON.stringify(jsonObject));
			$('#response_table').append(jsonObject);
			
		}
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="company_id" onchange="get_leads_data(this.value);">
	
	<option value="Premier Property Management"> Premier Property Management</option>
	<option value="all"> All</option>

</select>

<br><br>

<table id="response_table" border="1">
	<thead>
	<tr>
		<th>Company</th>
		<th>Property Type</th>
		<th>zipcode</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Premier Property Management</td>
		<td>Single Home or Condo</td>
		<td>01255</td>
	</tr>
	</tbody>
</table>

标签: jqueryajax

解决方案


var tr = document.createElement('tr');
var td = document.createElement('td');
td.innerHTML = YourValueHere;
tr.appendChild(td);
document.getElementByID('response_table').appendChild(tr);

推荐阅读