Question

这是一个完整的noob问题，但我是javascript和web开发的新手，所以请耐心等待：）

我在Parse类中有对象，我想在网站上列出。我想迭代这些对象并列出它们（我在一个html文件中）。

这是我的代码：

 <script>
Parse.initialize("XXXXXXX");

var Post = Parse.Object.extend("Post");

        function getPosts() {
            var query = new Parse.Query(Post);
            query.find({
                success: function(results){

                    var output = "";
                    for (var i in results) {
                        var title = results[i].get("activityTitle");
                        console.log("ok now");

                        output += "<div class=\"row container-post\">
                        <div class=\"col-md-4 col-sm-6\">
                            <div class=\"post-container\">
                                 <div class=\"post-content no-padding\">
                                        <img src=\"assets/image-portfolio-02.jpg\" alt=\"danish personal blog template\"></div>
                                <div class=\"post-content\">";

                        output += title;
                        output += "</div></div></div></div>";



                    }
                    $("#list-posts").html(output);
                }, error: function(error) {
                    console.log("Query Error:"+error.message);
                }

            });
        }

        getPosts();

    </script>

Answer 1

获得结果后，即可开始构建内容。假设我们在HTML端有这个：

<div class="results target"></div>

然后我们可以在JS方面做到这一点：

<script type="text/javascript">
Parse.initialize(...);

new Parse.Query(Post).find({
  success: function(results) {
    buildResultHTML(results);
  }
});

function buildResultHTML(data) {
  var container = document.querySelector("div.results.target");
  data.forEach(function(entry) {
    container.appendChild(buildHTMLRow(entry));
  });
}

function buildHTMLRow(data) {
  // there are a million ways to do this. Usually, you use a templating
  // library to make live easier. Let's roll one:
  var outer = document.createElement("div");
  var img = document.createElement("img");
  var url = data.imagelinkwhatever;
  // safety first: is this a real http:// or https:// link? If not, DON'T USE IT
  img.src = url.indexOf("http") === 0 ? url : "";
  var p = document.createElement("p");
  p.textContent = data.textwhatever; 
  // note: also NEVER use .innerHTML if your data can come from "not you".
  // It's an instant XSS exploit waiting to happen. See below.
  outer.appendChild(img);
  outer.appendChild(p);
  return outer;
}
</script>

但是，正如代码所说：你通常想要使用模板库，所以你不必担心像DOM元素的混乱JS创建，用户内容安全等等。

安全性很重要：如果Parse结果可以给你这样的东西：

{
  imgurlwhatever: "javascript:alert('lol')",
  textwhatever: "<script>alert('lol');</script>"
}

然后你的页面，如果它使用盲img.src=...和p.innerHTML=...，将很乐意执行该JS。这听起来很愚蠢，但是alert('lol')是一个占位符：如果我们可以让它运行，我们也可以使用XHR和文档内容来调用另一个网站的网址。 cookies作为url查询参数＆＃34;然后突然蠢事变得真实（tm）。

Answer 2

好吧，我终于明白了。这是代码：

  <script>
Parse.initialize("XXXXXXXXXXXXXX");

var Post = Parse.Object.extend("Post");

        function getPosts() {
            var query = new Parse.Query(Post);
            query.find({
                success: function(results){

                    var output = "";
                    for (var i in results) {
                        var title = results[i].get("activityTitle");
                        console.log("ok now");

                        var img = ""
                        var file = results[i].get("Bild");
                        var url = file.url();
                        img = "<img src='"+url+"'>";


                        output += "<div class=\"container\">";
                        output += "<div class=\"row\">";
                        output += "<div class=\"col-md-4\">";
                        output += "<div class=\"post-container\">";
                        output += "<div class=\"post-content no-padding\">";
                        output += img;
                        output += "</div>";
                        output += "<div class=\"post-content\">";
                        output += title;
                        output += "</div";
                        output += "</div>";
                        output += "</div>";
                        output += "</div>";
                        output += "</div>";

                    }
                    $("#list-posts").html(output);
                }, error: function(error) {
                    console.log("Query Error:"+error.message);
                }

            });
        }

        getPosts();

    </script>

在javascript代码之上，在HTML中，我只是说：

 <p id="list-posts">
</p>

这会从解析中获取对象，并以我想要的格式为我列出它们。谢谢你的建议。对于今后可能需要帮助的其他人来说，这个视频（以及作者的其他人）真的帮助了我：https://www.youtube.com/watch?v=_fxh825Bnpg&index=4&list=PLoN_ejT35AEhbFswEKW36LxzyXJs7xCWS

在javascript中查询解析

2 个答案: