Question

使用ajax，我带来了一些内容，以便在网站上上传信息。该页面的作用是通常首先加载所有内容，然后执行相应的ajax，但是在加载ajax并放置适当的信息时，此信息不会应用网页的样式。这是我的代码的示例：

<!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>

如果某人有某种解决方案或解决方案，这对我非常有用。谢谢

Answer 1

示例代码段

在下面的示例中...

假设您的ajax调用返回了const data
忽略jQuery以外的所有内容，因为这只是为了表明样式是通过的-重点是关注HTML的生成方式
我知道我没有使用您的确切代码和ID来创建此代码段。没关系-重要的是您可以从查看数据流中获得的教育成果。

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对象。

然后我用$.each遍历javascript对象。我以funcParam.keyName格式访问变量（例如，第一次访问value.name）。

我最终将生成的HTML包含在变量中，然后使用.html()将其添加到$.each之后的容器中（这比在每次迭代时使用.append()都要快）循环）。

请参见下面放置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
   }
});

Answer 2

如果您处理 DOM 中的更改（通过 AJAX），您需要了解 addClass() 或诸如 toggleClass() 之类的东西仅适用于当前存在的对象。所有新添加或加载的项目都不会被设置样式，除非它们是为孩子提供 CSS 的父母的孩子。加载外部 CSS 有时很麻烦。

就我而言，在 CSS 中使用变量是很好的做法。用法示例：您需要更改网站/网络应用程序的皮肤，制作夜间模式/日间模式或仅正确设置加载元素的样式。

例如，让我们以变量中文本和背景的初始颜色为例：

/* CSS for day mode */
:root {
  --textcolor: #333;
  --bgcolor: #fff;
}

JS 允许您更改 CSS 中的变量（同时保存该信息），这是 Ciaran O'Kelly 提供的方便的 JS snippet，用于操作 CSS 变量：

/** 
 * Gets and sets css vars
 * get a css var:
 * cv('bgcolor') // Returns #ccc
 * set a css var:
 * cv('bgcolor','#f00') // Sets and returns #f00
*/
function cv(n,v) {
    if(n[0]!='-') n = '--'+n //allow passing with or without --
    if(v) document.documentElement.style.setProperty(n,v)
    return getComputedStyle(document.documentElement).getPropertyValue(n);
}

最后，改变用户界面的用户函数。样式将适用于 DOM 中所有存在但尚未加载的元素：

function change_skin() {
    if($("#sk").text() == 'Night') {
        
        // Night mode skin
        cv('bgcolor','#666')
        cv('textcolor','#eee')
        
        // Change label
        $("#sk").text('Day')
        
    } else {

        // Day mode
        cv('bgcolor','#fff')
        cv('textcolor','#333')

        // Change label
        $("#sk").text('Night')

    }
}

Answer 3

我认为您需要使用html格式的数据...示例

$('#id').append("<span class='yourclass'>"+ data.name +"</span>");

这样，您就可以使用所需的所有数据和样式制作div，然后将其附加到div #id

Answer 4

获得响应后，添加带有类的简单html

$('#id').append('<p class="test">test</p>');

并在头部添加以下行

<style>
.test { font-size: 50px; }
</style>

如果您的“ p”具有给定的样式，则意味着您的“ data”变量存在问题

由ajax加载的内容不采用页面样式

4 个答案: