如何使用ajax将数据发送到没有jquery的节点服务器？
我正在尝试学习如何使用ajax发送数据。单击提交按钮时，我希望Ajax将数据发送到与数据无关的特定路由以及与表单关联的路由。但是，Ajax似乎没有发送任何东西。我在我的脚本中添加了三个console.log()语句，但没有显示它们。
HTML和AJAX代码
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form class="" action="/submitData" method="post">
<input type="text" name="name">
<button id="submitForm" type="submit">Submit</button>
<script>
const el = document.getElementById(submitForm);
if (el) {
el.addEventListener('submit', addRecipe);
console.log('Step 1');
}
function addRecipe() {
var recipe = {
param1: 'value1',
param2: 'value2'
};
console.log('step 2')
let xml = new XMLHttpRequest();
xml.open("POST", "/add-recipe", true);
//Specify the type of data to be sent
xml.setRequestHeader("Content-type", "application/json; charset=utf-8");
xml.send(JSON.stringify(recipe));
console.log('step 3');
}
</script>
</body>
</html>
server.js文件
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
let urlencodedParser = bodyParser.urlencoded({extended: false});
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.listen(7000);
app.post('/add-recipe', function(req, res) {
var recipe = req.body.recipe;
console.log(recipe);
});
app.post('/submitData',urlencodedParser,function(req, res){
});
实际上，当点击submit按钮时，将提交form，因此页面/数据将直接重定向到action页面。
这就是为什么你的addRecipe()函数没有被执行，因为页面在执行之前被重定向。
因此，如果你想在提交表单之前执行addRecipe()函数并通过Ajax发送data，你需要阻止默认表单submition，执行你的代码，然后提交form：
function addRecipe(e) {
e.preventDefault();
var recipe = {
param1: 'value1',
param2: 'value2'
};
console.log('step 2')
let xml = new XMLHttpRequest();
xml.open("POST", "/add-recipe", true);
//Specify the type of data to be sent
xml.setRequestHeader("Content-type", "application/json; charset=utf-8");
xml.send(JSON.stringify(recipe));
console.log('step 3');
//Get the form and submit it
form.submit();
}
如何使用ajax将数据发送到没有jquery的节点服务器？
我正在尝试学习如何使用ajax发送数据。单击提交按钮时，我希望Ajax将数据发送到与数据无关的特定路由以及与表单关联的路由。但是，Ajax似乎没有发送任何东西。我在我的脚本中添加了三个console.log()语句，但没有显示它们。
HTML和AJAX代码
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form class="" action="/submitData" method="post">
<input type="text" name="name">
<button id="submitForm" type="submit">Submit</button>
<script>
const el = document.getElementById(submitForm);
if (el) {
el.addEventListener('submit', addRecipe);
console.log('Step 1');
}
function addRecipe() {
var recipe = {
param1: 'value1',
param2: 'value2'
};
console.log('step 2')
let xml = new XMLHttpRequest();
xml.open("POST", "/add-recipe", true);
//Specify the type of data to be sent
xml.setRequestHeader("Content-type", "application/json; charset=utf-8");
xml.send(JSON.stringify(recipe));
console.log('step 3');
}
</script>
</body>
</html>
server.js文件
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
let urlencodedParser = bodyParser.urlencoded({extended: false});
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.listen(7000);
app.post('/add-recipe', function(req, res) {
var recipe = req.body.recipe;
console.log(recipe);
});
app.post('/submitData',urlencodedParser,function(req, res){
});
实际上，当点击submit按钮时，将提交form，因此页面/数据将直接重定向到action页面。
这就是为什么你的addRecipe()函数没有被执行，因为页面在执行之前被重定向。
因此，如果你想在提交表单之前执行addRecipe()函数并通过Ajax发送data，你需要阻止默认表单submition，执行你的代码，然后提交form：
function addRecipe(e) {
e.preventDefault();
var recipe = {
param1: 'value1',
param2: 'value2'
};
console.log('step 2')
let xml = new XMLHttpRequest();
xml.open("POST", "/add-recipe", true);
//Specify the type of data to be sent
xml.setRequestHeader("Content-type", "application/json; charset=utf-8");
xml.send(JSON.stringify(recipe));
console.log('step 3');
//Get the form and submit it
form.submit();
}