如何在 JavaScript 中提交表单并使用 JSON 数据更新元素？

2024-03-18 22:58:55

使用 JavaScript 提交表单并使用 JSON 数据更新元素

简介

在现代交互式 Web 应用程序中，能够动态更新页面元素至关重要。通过结合 JavaScript 和服务器端处理，我们可以在不刷新整个页面的情况下实现这一目标。本文将指导您如何使用 JavaScript 提交表单，并利用 JSON 数据更新元素，从而增强您的 Web 应用程序的交互性和效率。

步骤 1：创建 HTML 表单

首先，创建一个 HTML 表单。该表单应包含一个提交按钮和一个隐藏的 CSRF 令牌。CSRF 令牌有助于防止跨站请求伪造攻击。

<form id="vote_form" action="/post/{{ post.id }}" method="post">
  <input id="csrf_token" name="csrf_token" type="hidden" value="{{ csrf_token }}">
  <button class="btn btn-primary" id="vote_post_btn" type="submit">投票</button>
</form>

步骤 2：处理表单提交

在服务器端，您需要处理表单提交。这通常是通过 Flask 等 Web 框架完成的。

@bp.route('/post/<int:id>', methods=['GET', 'POST'])
def post(id):
    # 处理表单提交的逻辑
    if request.method == 'POST':
        # ...
        return jsonify({"votes": post.votes_count(), "voted": True})

步骤 3：JavaScript 代码

接下来，编写 JavaScript 代码来处理表单提交并更新元素。

async function sendVote() {
  // 获取表单元素
  let form = document.getElementById("vote_form");
  let formBtn = document.getElementById("vote_post_btn");

  // 发送表单
  try {
    const response = await fetch(form.getAttribute("action"), {
      method: "POST",
    }).then((response) => response.json());

    // 更新元素
    formBtn.innerHTML = response["votes"];
    if (response["voted"] === true) {
      formBtn.classList.add("btn-success");
    } else {
      formBtn.classList.remove("btn-success");
    }
  } catch (e) {
    console.error(e);
  }
}

// 绑定事件监听器
form.addEventListener("submit", (event) => {
  event.preventDefault();
  sendVote();
});

步骤 4：JSON 响应

服务器端返回一个 JSON 响应，其中包含投票数和用户是否已投票的信息。

{
  "votes": 10,
  "voted": true
}

步骤 5：更新元素

JavaScript 代码使用 JSON 数据更新按钮的文本和类名。

优势

使用这种方法的好处包括：

无需刷新页面即可更新界面
提高用户交互性
减少服务器负载

结论

通过遵循本文中的步骤，您可以使用 JavaScript 提交表单并使用 JSON 数据更新元素。这种方法对于创建动态且交互式的 Web 应用程序非常有用，而无需刷新整个页面。

常见问题解答

什么是 CSRF 令牌？
CSRF 令牌是防止跨站请求伪造攻击的安全措施。
JSON 响应的目的是什么？
JSON 响应包含投票数和用户是否已投票的信息，用于更新元素。
如何更新元素的文本和类名？
可以使用 innerHTML 和 classList 属性来更新元素的文本和类名。
使用这种方法有哪些优势？
无需刷新页面即可更新界面、提高用户交互性和减少服务器负载。
为什么在提交表单时需要使用 async 和 await？
async 和 await 用于处理异步操作，例如网络请求。在提交表单时，我们需要等待服务器响应。