AJAX后呼叫在我的JSON檔案中存盤兩次資料

我在我的專案中偶然發現了一個問題。我想使用 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  for="date">date</label>
<input id="json-form-date" type="text" name="date" required>        

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

<label  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  for="Link">link</label>
<input id="json-form-link" type="text" name="link" required>

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

<label  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 檔案中寫入了兩次而不是一次，老實說我不知道??為什么。任何幫助，將不勝感激！

uj5u.com熱心網友回復：

您的表單提交可能會被安全地簡化為以下內容，以確保只有一次提交。我不確定這是否會解決您的問題，但至少您將確保表單提交一次，并且將了解如何輕松處理 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>

uj5u.com熱心網友回復：

我不確定，但您不是在讀取檔案然后將資料推送兩次嗎？注意：我只是想對此提供幫助，對此沒有太多線索:)

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

標籤：查询 节点.js json 阿贾克斯

上一篇：如何洗掉json中的物件

下一篇：帶有JsonDeserializer的Lombok