使用 ajax 将节点 js 变量传递给 html
passing node js variable to html using ajax
我正在尝试将 python json 结果从节点 js 传递到 html ajax。
我想做的是,从客户端获取一些输入,当点击提交按钮时,ajax 将变量发送到 Node JS,然后是 /data 中间件 运行是一个 python 脚本,它处理数据库并存储变量并显示结果。
到目前为止我所做的是,我可以从客户端获取输入,并使用 ajax 将变量从 html 发送到 Node JS,我也可以 运行 python 脚本并将变量存储到我的数据库中。我可以从后端看到结果。但我不知道如何将结果发送回 ajax 客户端。
以下是我的后端 Node JS 代码部分。
const express = require('express');
const app = express();
// To use python script
var PythonShell = require('python-shell');
const bodyParser = require('body-parser');
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));
// parse application/json
app.use(bodyParser.json());
app.use(express.static(__dirname + ''));
app.use(express.json());
app.engine('html', require('ejs').renderFile);
app.get('/data', function(req, res) {
res.sendFile(__dirname + '/data.html');
});
app.post('/data', function(req, res) {
const {name, ssn, state} = req.body;
console.log('name: ',name, 'ssn: ',ssn,'state: ',state);
var options = {
mode: 'json',
pythonPath:'',
pythonOptions:['-u'],
scriptPath:'',
args: [name,ssn,state]
};
PythonShell.PythonShell.run('dbPrac.py', options, function(err, res) {
if(err) throw err;
console.log('res[0]: ', res[0]);
//res.render(__dirname + '/data.html');
res.send(res[0]);
//res.status(200).send(res[0]);
});
});
当我使用“res”时。方法,后端编译器总是说
“类型错误:res.send 不是一个函数”
下面是我的java脚本部分
<script>
function sendAjax() {
console.log('submit onclick.');
const name = document.getElementById("name").value;
const ssn = document.getElementById("ssn").value;
const state = document.getElementById("state").value;
console.log('name: ',name, 'ssn: ',ssn,'state: ',state);
$.ajax({
type: "post",
url: 'http://localhost:8080/data',
data: {name:name,ssn:ssn,state:state},
dataType:'json',
success: function(res) {
console.log(res);
}
});
}
</script>
以下是我的 html 文件部分,以备不时之需。
<form action="http://localhost:8080/data" method="post" id="signup">
<h1>Personal info post example</h1>
<div class="field">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your fullname" /><br><br>
<small></small>
</div>
<div class="field">
<label for="ssn">SSN:</label>
<input type="text" id="ssn" name="ssn" placeholder="Enter your SSN" /><br><br>
<small></small>
</div>
<div class="field">
<label for="state">State:</label>
<input type="text" id="state" name="state" placeholder="Enter your state" /><br><br>
<small></small>
</div>
<button type="submit" onclick="sendAjax()">Submit</button><br><br>
<span id="answer"></span> <br><br>
</form>
尝试更改 python 结果回调中的参数:
PythonShell.PythonShell.run('dbPrac.py', options, function(err, pythonRes) {
if(err) throw err;
console.log('pythonRes[0]: ', pythonRes[0]);
//res.render(__dirname + '/data.html');
res.send(pythonRes[0]);
我正在尝试将 python json 结果从节点 js 传递到 html ajax。
我想做的是,从客户端获取一些输入,当点击提交按钮时,ajax 将变量发送到 Node JS,然后是 /data 中间件 运行是一个 python 脚本,它处理数据库并存储变量并显示结果。
到目前为止我所做的是,我可以从客户端获取输入,并使用 ajax 将变量从 html 发送到 Node JS,我也可以 运行 python 脚本并将变量存储到我的数据库中。我可以从后端看到结果。但我不知道如何将结果发送回 ajax 客户端。
以下是我的后端 Node JS 代码部分。
const express = require('express');
const app = express();
// To use python script
var PythonShell = require('python-shell');
const bodyParser = require('body-parser');
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));
// parse application/json
app.use(bodyParser.json());
app.use(express.static(__dirname + ''));
app.use(express.json());
app.engine('html', require('ejs').renderFile);
app.get('/data', function(req, res) {
res.sendFile(__dirname + '/data.html');
});
app.post('/data', function(req, res) {
const {name, ssn, state} = req.body;
console.log('name: ',name, 'ssn: ',ssn,'state: ',state);
var options = {
mode: 'json',
pythonPath:'',
pythonOptions:['-u'],
scriptPath:'',
args: [name,ssn,state]
};
PythonShell.PythonShell.run('dbPrac.py', options, function(err, res) {
if(err) throw err;
console.log('res[0]: ', res[0]);
//res.render(__dirname + '/data.html');
res.send(res[0]);
//res.status(200).send(res[0]);
});
});
当我使用“res”时。方法,后端编译器总是说 “类型错误:res.send 不是一个函数”
下面是我的java脚本部分
<script>
function sendAjax() {
console.log('submit onclick.');
const name = document.getElementById("name").value;
const ssn = document.getElementById("ssn").value;
const state = document.getElementById("state").value;
console.log('name: ',name, 'ssn: ',ssn,'state: ',state);
$.ajax({
type: "post",
url: 'http://localhost:8080/data',
data: {name:name,ssn:ssn,state:state},
dataType:'json',
success: function(res) {
console.log(res);
}
});
}
</script>
以下是我的 html 文件部分,以备不时之需。
<form action="http://localhost:8080/data" method="post" id="signup">
<h1>Personal info post example</h1>
<div class="field">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your fullname" /><br><br>
<small></small>
</div>
<div class="field">
<label for="ssn">SSN:</label>
<input type="text" id="ssn" name="ssn" placeholder="Enter your SSN" /><br><br>
<small></small>
</div>
<div class="field">
<label for="state">State:</label>
<input type="text" id="state" name="state" placeholder="Enter your state" /><br><br>
<small></small>
</div>
<button type="submit" onclick="sendAjax()">Submit</button><br><br>
<span id="answer"></span> <br><br>
</form>
尝试更改 python 结果回调中的参数:
PythonShell.PythonShell.run('dbPrac.py', options, function(err, pythonRes) {
if(err) throw err;
console.log('pythonRes[0]: ', pythonRes[0]);
//res.render(__dirname + '/data.html');
res.send(pythonRes[0]);