如何在Ajax请求的响应中优雅地处理JSON对象？

发布时间：2020-12-16 02:50:34 所属栏目：百科来源：网络整理

导读：我真的很想使用 JSON来处理我的Ajax请求和响应周期.我之前只使用了作为POST数据传递的普通旧参数,并且我在响应中呈现了直接HTML,然后将其放入DOM中.当我查看各种示例并阅读各种教程时,简单地从混合了HTML的JSON对象构建字符串似乎是一种相当普遍的做法,该字

我真的很想使用 JSON来处理我的Ajax请求和响应周期.我之前只使用了作为POST数据传递的普通旧参数,并且我在响应中呈现了直接HTML,然后将其放入DOM中.当我查看各种示例并阅读各种教程时,简单地从混合了HTML的JSON对象构建字符串似乎是一种相当普遍的做法,该字符串已被硬编码到字符串中,然后将字符串作为innerHTML分配给某个元素.

一个常见的例子看起来像这样：

var jo = eval(req.responseText);

var strTxt = '<span>' + jo.f_name + ' ' + jo.l_name + '</span><br/>' + 'Your Age Is: ' + jo.age + '<br/>'; 

$('myDiv').innerHTML = strTxt;

是否有一种更优雅(或更正确)的方式来处理JSON响应,这样我就不会在javascript中对HTML进行硬编码？或者这是人们如何做到的？

附：赞赏教程或其他来源的链接.

解决方法

我避免在JavaScript字符串中编写大量HTML.我更喜欢将结构与数据操作分开.更好的选择是将该代码放在页面中,根据ID加载值,并在必要时显示/隐藏它：

<div id="codeBlock" style="visible=false;">
<span id="val1"></span>
<br/>
<span id="val2"></span>
<br/>
</div>
............
<script>
var jo = eval(req.responseText);
$('val1').innerHTML = jo.f_name + ' ' + jo.l_name;
$('val2').innerHTML = 'Your Age Is: ' + jo.age;
$('codeBlock').show();
</script>

这可能不是你想要做的,但你明白了.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!