Question

这是针对我正在创建的日记应用程序。我希望用户能够通过弹出式Chrome扩展程序快速记下想法。我已经构建了弹出窗口-图标出现在工具栏中，并且当我单击该图标时会弹出该窗体。我无法弄清楚的是如何将表单中输入的数据发送/提交到数据库以及应显示该数据的html页面。仅供参考，我是一个非常全面的初学者，但是特别是在chrome扩展程序和javascript方面-因此，您在下面看到的代码状态。我省略了似乎无关的代码部分。非常感谢。

POPUP.HTML

<head>
    <script src="script.js"></script>
</head>
<body style="width:200px">
    <p></p>
    <form action="/popup" method="post">
        <div>
            <label for="pop-up" style = "font-family:georgia,garamond,serif;font-size:14px;">What's on your mind?:</label>
            <textarea rows="6" cols="30" id="memo" name="pop-up" placeholder="ruminate here..."></textarea>
        </div>
        <div class="button">
            <button type="submit">Post</button>
        </div>
    </form>
</body>
</html>

SCRIPT.JS

document.addEventListener('click', function() {
    document.getElementById('send').onclick = function() {
        var post = document.getElementById('post').value;
        var tags = document.getElementById('tags').value;
        var postURL = 'https://ide50-xxxxxx.cs50.io';
        // what comes next???
    };
});

MANIFEST.JSON

{
  "name": "cs50 final project",
  "version": "1.0",
  "description": "penser pop-up",
  "manifest_version": 2,

  "icons": {
    "16": "thinkemoji.png"
  },

  "browser_action": {
    "default_popup": "popup.html"
  }
}

INDEX.HTML（显示帖子的页面）

<section>
  {% for post in posts %}
    <div class="article">
      <div class="articleTitle">{{ post.tags }}</div>
        <div class="articleDate">{{ post.day }} {{ post.date }} {{ post.time }}</div>
        <br>
        <p>{{ post.post }}</p>
    </div>
  {% endfor %}
  </section>

APPLICATION.PY

@app.route("/popup", methods=["GET", "POST"])
def popup():
    """Post via extension"""

    if request.method == "POST":
        if not request.form.get("post"):
            return("you can't leave this blank", 400)

        else:
            # Record post & tags in memos table
            x = datetime.datetime.now()
            db.execute("INSERT INTO memos (id, post, tags, day, date, time) VALUES (:id, :p, :t, :d, :date, :time)",
                       id=session["user_id"], p=request.form.get("post"), t=request.form.get("tags"), d=x.strftime("%a"), date=x.strftime("%x"), time=x.strftime("%X"))

            return redirect("/", code=302)

    else:
        return render_template("post.html")

通过Chrome扩展程序弹出窗口提交表单数据

0 个答案: