jQuery
快速填充非form
数据
先看看jQuery
根据name
填充form
表单数据
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="myForm">
<input type="text" name="username" />
<input type="email" name="email" />
<input type="password" name="password" />
</form>
<script>
// 模拟数据
const formData = {
username: 'JohnDoe',
email: '[email protected]',
password: 'secretpassword'
};
// 填充表单
$('#myForm input').each(function () {
const inputName = $(this).attr('name');
if (formData[inputName]) {
$(this).val(formData[inputName]);
}
});
</script>
</body>
</html>
按照相同的思路,渲染<span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table>
<tr>
<td class="tbox03tdr" width="20%"><span prop="salesOrgName"></span></td>
<td class="tbox03tdr" width="20%"><span prop="clientName"></span></td>
</tr>
</table>
<script>
// 发起 Ajax 请求
$.ajax({
url: 'yourDataUrl', // 替换为实际的后端数据接口 URL,这里假设为给定的 JSON 数据的模拟 URL
method: 'GET',
success: function (data) {
// 获取具有 prop 属性的 span 元素
const spans = $('span[prop]');
// 遍历 span 元素并设置内容
spans.each(function () {
const propValue = $(this).attr('prop');
$(this).html(data[propValue]);
});
},
error: function (error) {
console.error('Ajax 请求失败:', error);
}
});
</script>
</body>
</html>
通过这样的方式,只要将span
中定义prop
属性和json
中的key
保持一致,即可填充数据