如何嵌入HTML <tag> 以JSON返回的
[英]How to embed HTML <tag> that is returned in JSON
問題描述
簡而言之：
response AJAX調用的response返回2個HTML元素， script和div ，它們以JSON格式存儲。 response的結構如下：
Object { script : "<script>...</script>", div : "<div></div>" }
response包含我需要嵌入的JSON對象。 我怎樣才能做到這一點？ 我的代碼：
<body>
<script type=text/javascript>
$.ajax({
url: "my.url",
type: "GET",
datatype: "json",
contentType: "application/json; charset=utf-8",
success: function(response){
// Code that embeds script and div in to the body of the document
}
});
</script>
更詳細一點：
div包含3個從script元素引用的圖形。 它們都是從運行bokeh的python腳本返回的。 其他一切工作正常，我對HTML和javascript還是javascript ，這就是為什么我不知道如何將JSON的標簽嵌入到html主體的原因。
謝謝您的幫助！
編輯：與這里不同，我正在詢問有關如何在沒有任何div參數的情況下將返回的JSON嵌入AJAX函數的特定幫助
4 個解決方案
解決方案1
2 已采納 2017-11-12 11:17:06
您必須通過JSON.parse（）函數將JSON解析為對象
<body>
<script type=text/javascript>
$.ajax({
url: "my.url",
type: "GET",
datatype: "json",
contentType: "application/json; charset=utf-8",
success: function(response){
// Parse to object
var object_response = JSON.parse(response);
// Access object like this
var response_script = object_response.script;
// And the second one the same way
var response_div = object_response.div;
// And then, for example, you can then append that div like this
$("body").append(response_div);
}
});
</script>
編輯已更改->至。 如下建議
第二次編輯，確實是在1種情況下不需要JSON.parse（），而是將標header('Content-type:application/json');設置為正確的header('Content-type:application/json'); 否則，注釋中建議的此技術將無法使用，您將必須使用JSON.parse（）函數
解決方案2
0 2017-11-12 11:13:13
使用“ jQuery.parseHTML（）”將您的字符串解析為有效的DOM元素。 之后，您可以使用“ .append（）”函數將其添加到您的身體中。
解決方案3
0 2017-11-12 11:15:09
使用$("html body").append(在頁面加載后在正文中添加javascript
function oldDivClicked(){ console.log("old Div Clicked"); } function changeDiv(){ $("#mydiv").html('<span onclick="newDivClicked()">New Div: apply newDivClicked()</span>'); $("html body").append('<script>function newDivClicked(){console.log("new Div Clicked");}<\\/script>'); }
<div id="body"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="mydiv"><span onclick="oldDivClicked()">Old Div: apply oldDivClicked() </span></div> <button onclick="changeDiv()">Get New Data</button> </div>
當頁面加載newDivClicked()不存在時，當您單擊“ Get New Data您也將能夠獲取newDivClicked() 。
解決方案4
0 2017-11-12 11:31:08
動態腳本和div的示例包括：
var data = {
script: "<script type='text\/javascript' >alert('It works')<\/script>",
div: "<div class='info'>info<\/div>"
};
$('body').append(data.div);
$('head').append(data.script);
我的小提琴： https : //jsfiddle.net/8um4qe8h/1/
PS，我需要使用轉義字符來運行此示例，因此這就是數據看起來丑陋的原因
如何從HTML標記獲取getElementById（），該標記是通過嵌入javascript呈現的？
[英]How to getElementById() from HTML tag, that is rendered by embed javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.