AJAX post调用在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提交的表单。

EDIT:让JSON通过body.

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