我有以下文件:
我的EJS页面与<select>
<!doctype html>
<html lang="en">
<%- include('../views/partials/header.ejs') %>
<body>
<h1 style="padding-left: 20px; padding-top: 10px;">AidaLinux</h1>
<%- include('../views/partials/nav.ejs') %>
<div class="table-responsive" style="padding: 20px 20px 0px 20px;" >
<h2><%= name.printername %> jobs List</h2>
<!-- select in question -->
<!-- this prints all my available printers -->
<select class="form-select" onchange="onChange();">
<% for ( var i = 0; i<name.length; i++ ) { %>
<option value="<%= name[i] %>"> <%= name[i] %> </option>
<% } %>
</select>
<table class="table table-hover table-striped table-borderless">
<thead>
<tr class='table-dark'>
<th scope="col">Job Rank</th>
<th scope="col">Job Commissioner</th>
<th scope="col">Job ID</th>
<th scope="col">Job File Name</th>
<th scope="col">Job Size</th>
</tr>
</thead>
<tbody>
<% for(var i=0; i<command.length; i++){ %>
<tr>
<th scope="row"><%= command[i].rank %></th>
<th scope="row"><%= command[i].owner %></th>
<th scope="row"><%= command[i].identifier %></th>
<th scope="row"><%= command[i].files %></th>
<th scope="row"><%= command[i].totalSize %></th>
</tr>
<% } %>
</tbody>
</table>
</div>
<div class="table-responsive" style="padding: 20px 20px 50px 20px;" >
<h2>All Printer Jobs List</h2>
<table class="table table-hover table-striped table-borderless">
<thead>
<tr class='table-dark'>
<th scope="col">Printer name</th>
<th scope="col">Job Commissioner</th>
<th scope="col">Date</th>
</tr>
</thead>
<tbody>
<% for(var i=0; i<job.length; i++){ %>
<tr>
<th scope="row"><%= job[i].printername %></th>
<th scope="row"><%= job[i].owner %></th>
<th scope="row"><%= job[i].date %></th>
</tr>
<% } %>
</tbody>
</table>
</div>
<%- include('../views/partials/footer.ejs') %>
<!-- test function to test the onchange -->
<script>function onChange(){
console.log("ciao");
}</script>
</body>
</html>
我的函数用express发送，它只是整个文件cupsApis.js的一部分，我所有的函数都存储在那里，像这样，我只需要在app.js中做一个请求，我把它们都放在那里，但那是我感兴趣的
lpq = function (name) {
let self = this;
self = utils.list()[6];
let args = ["-P", self];
let lpq = spawnSync("lpq", args, { encoding: "utf-8" });
let stdoutSpawnSync = utils.parseStdout(lpq.stdout);
stdoutSpawnSync.shift();
stdoutSpawnSync.shift();
let InfoJob = stdoutSpawnSync.map(function (line) {
line = line.split(/ +/);
return {
rank: line[0] === "active" ? line[0] : parseInt(line[0].slice(0, -2)),
owner: line[1],
identifier: parseInt(line[2]),
files: line[3],
totalSize: parseInt(line[4]),
};
});
return InfoJob;
};
my express file
const express = require("express");
const app = express();
const cups = require("./api/cupsApis.js")
app.listen(3000);
app.set("view engine", "ejs");
app.get("/", (req, res) => {
res.redirect("/home");
res.render("home");
});
app.get("/home", (req, res) => {
res.render("home");
});
app.get("/lpq", (req, res) => {
const name = cups.lpstat()
const command = cups.lpq();
const job = cups.lpstatJobs();
res.render("lpqView", {
command,
job,
name,
});
});
app.get("/classes", (req, res) => {
res.render("classes");
});
app.get("/lpstat", (req, res) => {
const command = cups.lpstat();
res.render("lpstatView", {
command,
});
});
app.get("/lp", (req, res) => {
const command = lp("/home/finsoft/ProgettoStampanti/file/file.txt");
console.log("command", command);
res.render("lpView", {
command,
});
});
app.get("/lpadmin", (req, res) => {
const command = cups.lpadmin("PrinterProva2", "HP Printer", "FINSOFT");
res.render("lpadminView", {
command,
});
});
我想要实现的是当我点击<select>的不同<option>时，这个EJS页面的"刷新"，当它发生时，我将改变第一个表内的值，所以我将看到所选打印机的当前作业。
我试着在网上找到一些东西，一个AJAX电话和一个fetch，第一个结果，我试着用一些例子学习一些关于这些主题的东西，但失败了。
这个问题看起来几乎像是"为我实现一个特性"，但如果要点是:是否有可能在不使用AJAX的情况下创建一个动态表单，那么答案是肯定的。你可以定义一个<form>，然后用JS在onChange()函数中以编程方式提交它(而不是输出"ciao")。
所以回答你的第二个问题:如果你想成为一个好的开发人员，你就注定要学习。而且不仅仅是关于AJAX，你还必须在你的整个职业生涯中学习。