ajax加载的内容不走页面的样式 [英] The content loaded by ajax does not take the styles of the page
问题描述
使用 ajax，我将内容上传到我的网站并提供信息.页面所做的就是先正常加载一切，然后执行相应的ajax，但是在加载ajax并放置相应的信息时，这些信息并没有应用网页的样式.这是我的代码的示例:
With ajax I am bringing content to upload my website with information. What the page does is load everything normally first, then execute the corresponding ajax, but when loading the ajax and placing the appropriate information, this information does not apply the styles of the web page. Here is an example of how my code would be:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Styles that you do not recognize -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content" class="div-short"></div>
<script src="js/jquery.js"></script>
<script>
$.ajax({
type: 'POST',
url: "http://localhost:8000/api/pag/5",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){
// Dynamic information
$('#id').html(data);
}
});
</script>
</body>
</html>
如果有人有某种解决方案或方法，对我来说非常有用.谢谢
If someone has some kind of solution or how it can be done, it is very useful for me. Thank you
推荐答案
Example Snippet
在下面的例子中...
- 假设
const data正在从您的 ajax 调用中返回 - 忽略除 jQuery 之外的所有内容，因为这只是为了表明样式已经通过——重点是关注 HTML 是如何生成的
- 我知道我没有使用您的确切代码和 ID 来创建此代码段.这并不重要 - 重要的是您可以从数据流动中获得的教育意义.
- assume that
const datais being returned from your ajax call - ignore everything except the jQuery, since it's all just to show that styles come through-- the point is to focus on how the HTML is generated
- I'm aware I didn't use your exact code and IDs to create this snippet. That doesn't matter-- what matters is the educational takeaway you can get from seeing the data flowing.
const data = '[{"species": "dog", "breed": "Husky", "name": "Kenna"},{"species": "cat", "breed": "Siamese", "name": "Jeff"},{"species": "dog", "breed": "Doberman", "name": "Bella"}]';
let parsed_data = jQuery.parseJSON(data);
var html = "";
$.each(parsed_data, function(key, value) {
html += '<div class="card"><h3>' + value.name + '</h3><p>Species: ' + value.species + '</p><p>Breed: ' + value.breed + '</p></div>';
});
$("#container").html(html);.card {
margin: 20px;
padding: 20px;
background-color: #EEE;
font-family: "Arial", sans-serif;
cursor: default;
}
.card > h3 {
color: blue;
cursor: pointer;
}
.card > h3:hover {
text-decoration: underline;
}
.card > p {
color: #555;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>说明
注意我对数据做的第一件事是如何在其上运行 jQuery.parseJSON().这将结果从字符串表示形式转换为 javascript 对象.
Notice how the first thing I did with the data was run jQuery.parseJSON() on it. This takes the result from a string representation to a javascript object.
然后我用 $.each 遍历 javascript 对象.我使用 funcParam.keyName 格式访问变量(例如第一次访问 value.name).
I then loop through the javascript object with $.each. I access the variables with the funcParam.keyName format (e.g. the first access value.name).
我最终将生成的 HTML 包含在一个变量中，然后使用 .html() 在 $.each 之后将其添加到我的容器中(这比在循环的每次迭代中使用 .append()).
I finally included the generated HTML in a variable, and then used .html() to add it to my container after the $.each (which is faster than using .append() on each iteration of the loop).
见下文 HTML 生成代码的放置位置:
$.ajax({
type: 'POST',
url: "http://localhost:8000/api/pag/5",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){
// run your HTML generation code (like my Snippet example) HERE
}
});
这篇关于ajax加载的内容不走页面的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
