AJAX post call 在我的 JSON 文件中存储两次数据

Posted 2023-03-07

【中文标题】AJAX post call 在我的 JSON 文件中存储两次数据

【英文标题】：AJAX post call stores data twice in my JSON file

【发布时间】：2021-12-09 18:56:36

【问题描述】：

我在项目中偶然发现了一个问题。我想使用 node.js 为新闻文章构建一种存档。我将表单的输入（所有相关数据）存储到 JSON 文件中。这是我的表格（简化）：

<form id="json-form">
<label class="json-form-labels" for="title">title</label>
<input id="json-form-title" type="text" name="title" required>

<label class="json-form-labels" for="date">date</label>
<input id="json-form-date" type="text" name="date" required>        

<label class="json-form-labels" for="author"><author</label>
<input id="json-form-author" type="text" name="author" required>

<label class="json-form-labels" for="topic">topic</label>
<select id="json-form-topic"name="topic">
    <option value="not_specified"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

<label class="json-form-labels" for="Link">link</label>
<input id="json-form-link" type="text" name="link" required>

<label class="json-form-labels" for="description">description</label>
<textarea name="" id="json-form-description-textarea" required>    </textarea>  

<label class="json-form-labels" for="content">content</label>
<textarea name="" id="json-form-content-textarea" required></textarea>

<button id="json-form-submit">Submit</button>
</form>

提交时我使用 AJAX 发送数据：

$(function() 
$(document).on('click', '#json-form-submit', function(e) 
    e.preventDefault();
    $('#json-form-submit').prop('disabled', true);
    var title = document.getElementById('json-form-title').value; 
    var author = document.getElementById('json-form-author').value; 
    var date = document.getElementById('json-form-date').value; 
    var topic = document.getElementById('json-form-topic').value; 
    var articlelink = document.getElementById('json-form-link').value; 
    var description = document.getElementById('json-form-description-textarea').value; 
    var content = document.getElementById('json-form-content-textarea').value; 
    var data =  title: title, author: author, date: date, related: related, articlelink: articlelink, description: description, content: content ;
        
    $.ajax(    
        type: "POST",
        url: '/create-article',
        contentType: 'application/json',
        data: JSON.stringify(data),
        success: function() 
            
        ,
        error: function() 
            
        
    );
);         
);

服务器端我在 JSON 中这样写数据：

app.post('/create-article', (req, res) => 
var title = req.body.title;
var date = req.body.date;
var author = req.body.author;
var topic = req.body.topic;
var articlelink = req.body.articlelink;
var description = req.body.description;
var content = req.body.content;

const data =  title: title, author: author, date: date, topic: topic, articlelink: articlelink, description: description, content: content ;

const jsonString = fs.readFileSync('./public/files/js/articles.json');
const jsonObject = JSON.parse(jsonString);
jsonObject.push(data);
fs.writeFileSync('./public/files/js/articles.json', JSON.stringify(jsonObject));
)

我现在面临的问题是我的新文章被写入了我的 JSON 文件两次而不是一次，老实说我不知道​​为什么。任何帮助将不胜感激！

【问题讨论】：

查看浏览器网络，查看有多少调用在提交，右键->inspect->network

据我所知，它只执行了一次

我将为您提供您提交数据的简化版本作为答案，因此至少您将了解如何使用 AJAX 轻松提交表单。至少您将确保数据提交一次。

在处理函数中添加一个控制台日志，看看它是否被调用了两次。如果是这样，您需要找出导致监听器被添加两次的原因，例如再次加载相同的脚本

【参考方案1】：

您的表单提交可能会安全地简化为以下内容，以确保仅提交一次。我不确定这是否会解决您的问题，但至少您会确保表单提交一次，并且将了解如何轻松处理 AJAX 提交上的表单。

编辑：使 JSON 通过正文。

$(function() 
  $('#json-form').submit(function(e) 
    e.preventDefault();
    $('#json-form-submit').prop('disabled', true);
    var formData = new FormData(this);
    var object = ;
    formData.forEach((value, key) => object[key] = value);
    $.ajax(
      type: 'POST',
      url: '/create-article',
      contentType: false,
      data: JSON.stringify(object),
      processData: false,
      success: function(response) 
        console.log('Success statusText =', response.statusText);
        $('#json-form-submit').prop('disabled', false);
      ,
      error: function(response) 
        console.log('Error statusText =', response.statusText);
        $('#json-form-submit').prop('disabled', false);
      
    );
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="json-form">
  <label class="json-form-labels" for="title">title</label>
  <input id="json-form-title" type="text" name="title" required>

  <label class="json-form-labels" for="date">date</label>
  <input id="json-form-date" type="text" name="date" required>

  <label class="json-form-labels" for="author"><author</label>
  <input id="json-form-author" type="text" name="author" required>

  <label class="json-form-labels" for="topic">topic</label>
  <select id="json-form-topic" name="topic">
    <option value="not_specified"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>

  <label class="json-form-labels" for="Link">link</label>
  <input id="json-form-link" type="text" name="link" required>

  <label class="json-form-labels" for="description">description</label>
  <textarea name="" id="json-form-description-textarea" required>    </textarea>

  <label class="json-form-labels" for="content">content</label>
  <textarea name="" id="json-form-content-textarea" required></textarea>

  <button id="json-form-submit">Submit</button>
</form>

【讨论】：

感谢您的回答。我应该如何处理数据客户端，只是 req.body.data？到目前为止，我收到了 Unexpected token - in JSON at position 0 错误。

我没有检查您对服务器端的期望，只是稍等片刻，我会使其兼容。

我已经编辑了上面的答案以支持在正文中发送 JSON 而不是单独的表单条目。

至少您会知道一种简单而优雅的方式来处理表单提交。 FormData 在现代浏览器中得到很好的支持。您还可以查看如何附加一些未包含在表单中的额外字段，以备日后需要。

如果我没记错的话，在 ajax 调用中添加 content-type: 'application/json' 很重要

【参考方案2】：

我不确定，但您不是在读取文件然后将数据推送两次吗？注意：我只是想帮助对此没有太多线索:)

const jsonString = fs.readFileSync('./public/files/js/articles.json');
const jsonObject = JSON.parse(jsonString);
jsonObject.push(data);
fs.writeFileSync('./public/files/js/articles.json', JSON.stringify(jsonObject));

【讨论】：

我以为我正在读取我的文件，将其放入 Json 数组中，然后将我现有的对象推送到上面。我很确定这不是问题，但感谢您的回答！

如果请求执行一次，请查看浏览器开发者工具中的网络选项卡（按 F12）。