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

Question

我在项目中偶然发现了一个问题。我想使用 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 文件两次而不是一次，老实说我不知道​​为什么。任何帮助将不胜感激！

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

Answer 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));