如何只输出返回的JSON的字符串输入？
如何只输出返回的JSON的字符串输入？
提问于 2017-11-03 04:49:51
我很难将输入到span中的数据显示给AJAX请求，它是根据整个对象的外观来显示的。如何调整这一点，以便它只输出输入的字符串？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Random Input</title>
</head>
<body>
<form>
<fieldset>
<legend>Data Lookup</legend>
<label for="data"></label>
<input type="data" name="firstData" id="firstData" placeholder= "Input">
<input type="submit" id="inputSubmit">
</fieldset>
</form>
<h2>Output</h2>
<ul>
<li>
<span>Data Output: </span><span id="newData"></span></li>
</ul>
<script src="input.js"></script>
</body>
</html>Javascript
document.addEventListener('DOMContentLoaded', bindButtons);
function bindButtons(){
document.getElementById('inputSubmit').addEventListener('click', function(event){
var req = new XMLHttpRequest();
var payload = {firstData:null};
payload.firstData = document.getElementById('firstData').value;
req.open('POST', 'http://httpbin.org/post', true);
req.setRequestHeader('Content-Type', 'application/json');
req.addEventListener('load',function(){
if(req.status >= 200 && req.status < 400){
var response = JSON.parse(req.responseText);
document.getElementById('firstData').textContent = response.firstData;
document.getElementById('newData').innerHTML = response.data;
} else {
console.log("Error in network request: " + req.statusText);
}});
req.send(JSON.stringify(payload));
event.preventDefault();
});
}回答 1
Stack Overflow用户
回答已采纳
发布于 2017-11-03 05:04:26
将以下内容替换为：document.getElementById('newData').innerHTML = response.data;改为document.getElementById('newData').innerHTML = JSON.parse(response.data).firstData;。
希望这能帮上忙！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47088658
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号