我想在页面上附加一个json对象。我通过ajax成功地获得了它,但它没有出现。
<form onsubmit="return false;">
{% csrf_token %}
Search:<input type="text" name="artist" id="artist" />
<button class="updateButton" onclick="createlist()">submit</button>
</form>
function createlist(){
$.ajax({
type: "POST",
url: "/rest/",
dataType: "json",
data: {
artist: $('#artist').val()
},
headers: {
'X-CSRFTOKEN': "{{ csrf_token }}",
},
success: function(data){
$('#output').html(data); //also tried data.content
}
});
}
当我在devtools中查看响应和预览时,响应似乎在一个长的转义字符串中。
"[{\"fields\": {\"artist\": \"Leonardo da Vinci\", \"link\": \"https://trove2.storage.googleapis.com/leonardo-da-vinci/galloping-rider-and-other-figures.jpg\", \"title\": \"Galloping Rider and other figures\"}, \"model\": \"serve.art\", \"pk\": 63057}
我怎么能把它变成可用的东西?
答案 0 :(得分:1)
使用
JSON.parse
你会得到数据。
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
答案 1 :(得分:1)
否则您无法将对象附加到HTML元素。
请勿解析 JSON ,只需按照您的格式附加格式(字符串)。
我已尝试并成功附加到HTML元素,但采用字符串格式。
答案 2 :(得分:1)
你应该这样试试:
var output="";
var data="[{\"fields\": {\"artist\": \"Leonardo da Vinci\", \"link\": \"https://trove2.storage.googleapis.com/leonardo-da-vinci/galloping-rider-and-other-figures.jpg\", \"title\": \"Galloping Rider and other figures\"}, \"model\": \"serve.art\", \"pk\": 63057}]";
data = JSON.parse(data)
for(x in data){
console.log(data[x]);
output=output+"Artist:"+data[x].fields.artist+"<br>"+"Link:"+data[x].fields.link+"<br>"+"Title:"+data[x].fields.title+"<br>"+"Model:"+data[x].model+"<br>"+"PK:"+data[x].pk+"<br>";
}
$('#output').html(output);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>