使用AJAX从独立的HTML文件中调用Node.js API

Question

我创建了几个Node.JS API，并使用Chrome API测试仪测试了所有API。但当我使用AJAX从HTML文件调用那个API时，它不起作用。下面是登录用户的示例API。

app.post('/loginuser', async (req, res) => {
var query = 'select id,user_pw from t_user where id=?'
rows = await selectQuery(query, [req.query.id])
res.status(200).send({'result': rows})
});

当我用user_id和password从API测试仪调用这个API时，我可以从req.query.user_id和req.query.password获得参数。但当我从HTML文件调用同一个API时，req.query是空的。

API测试人员呼叫：http://localhost:8081/loginuser?id=userid001&pw=123

使用Ajax从HTML文件调用：

<script type="text/javascript">
$('#btnSubmit').click(function(){
var email = $('#txtEmail').val()
var password = $('#txtPassword').val()
if(email == "" || password == ""){
alert("Please Enter Id and Password")
return
}
url = "http://localhost:8081/loginuser"
$.ajax({
data: {
id: email,
pw: password,
},
dataType: 'json',
type: 'POST',
url: url
}).done(function(data){
console.log(data)
});
});
</script>

Answer 1

通过URL查询参数发送凭据通常是一个非常糟糕的主意。

您的Express应用程序应读取请求正文中的参数。。。

app.post('/loginuser', async (req, res) => {
const query = "select id, user_pw from t_user where id = ?";
try {
const result = await selectQuery(query, [req.body.id]);
res.json({ result });
} catch (err) {
console.error("/loginuser", err);
res.status(500).send("DB error");
}
});

确保它可以处理url编码的数据(jQuery将发送这些数据(、JSON或同时处理

app.use(express.urlencoded()); // handle application/x-www-form-urlencoded
app.use(express.json());       // handle application/json

---

如果您绝对必须发送URL查询参数，则需要将它们编码到URL中。jQuery使用

// only adding `id` since you're not using `pw` anyway
const params = new URLSearchParams({ id: email });
$.ajax({
url: `http://localhost:8081/loginuser?${params}`,
method: "post",
dataType: "json"
}).done(console.log);