我正在使用一个名为replit的在线ide,node.js项目运行在节点版本12.16.1上。但我正试图让jquery 3.6.0使用这个版本的node.js,但我在网上找到的每一种方法都不起作用。我并没有使用html,而是使用pug,这是一种在html文件中插入变量的方法。
我尝试使用的第一种方法是使用cdn导入jquery:
script(src='https://code.jquery.com/jquery-3.6.0.slim.min.js', integrity='sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=', crossorigin='anonymous')
第二种方法是使用jquery npm包:
const { JSDOM } = require( 'jsdom' );
const jsdom = new JSDOM();
const { window } = jsdom;
const { document } = window;
global.window = window;
global.document = document;
const $ = global.jQuery = require( 'jquery' );
console.log( `jQuery ${jQuery.fn.jquery} working! Yay!!!` );
console.log()可以工作,但代码运行不正确。
代码如下:
const { JSDOM } = require( 'jsdom' );
const jsdom = new JSDOM();
const { window } = jsdom;
const { document } = window;
global.window = window;
global.document = document;
const $ = global.jQuery = require( 'jquery' );
console.log( `jQuery ${jQuery.fn.jquery} working! Yay!!!` );
const users = require('../../../data/user')
const sessions = require('../../../data/session')
let session = {}
let user = {}
$('#createSessionButton').on("click", async () => {
session = await sessions.create({
name: $('#session').val(),
players: $('#players').val(),
rewardMultiplier: $('#multiplier').val()
})
user = await users.create({
session: session.name,
username: $('#username').val(),
email: $('#email').val(),
password: $('#password').val(),
isAdmin: true,
total: 0
})
})
$('#joinSessionButton').on("click", async () => {
session = await sessions.findOne({ name: $('#session').val() })
user = await users.findOne({
session: session.name,
username: $('#username').val(),
email: $('#email').val(),
password: $('#password').val()
}) || await users.create({
session: session.name,
username: $('#username').val(),
email: $('#email').val(),
password: $('#password').val(),
isAdmin: false,
total: 0
})
})
module.exports = session, user
基本上,一旦按下一个按钮,就会使用多个输入html标记的id(在pug中,您使用#声明id=>示例:h3#test test=test)获取多个输入html标记的文本值,并将其发送到数据库。
下面是一个使用此脚本的pug/jade文件:
doctype
html(lang="en")
head
include ../includes/header.pug
link(rel="stylesheet", href="/css/session.css")
body
h1.mb-3.font-weight-normal(style="margin-top: 7.5vw; margin-bottom: 5vw;") Please fill in each and everyone of these fields to create a session
form(style="max-width: 480px; margin: auto;")
h2.mt-5 Session Information
h5 (This will create a session for you and your friends to play together)
input#session.form-control.mb-3(type="text", placeholder="Session Name", required)
input#players.form-control.mb-2(type="number", min='5', max='25', placeholder="Number of Players", required)
input#multiplier.form-range(type='range', value="1", min='0.5', max='10', step='0.5', onchange="rangevalue.value = `Reward Multiplier : ${value}`")
output#rangevalue.h4 Reward Multiplier : 1
h2.mt-5 User Information
h5 (This will create or fetch your account)
input#username.form-control.mb-3(type="text", placeholder="Username", required)
input#email.form-control.mb-3(type="email", placeholder="Email Address", required)
input#password.form-control(type="password", placeholder="Password", required)
div.mt-3.center
a.btn.btn-lg.btn-primary(href='/session') <-- Back
a#createSessionButton.btn.btn-lg.btn-primary.btn-block(href="/session/dashboard") Create session -->
script(src="/js/session.js")
但是jquery在我的项目中根本不起作用,即使它在web浏览器控制台中起作用。如果有人能帮我,那真是太棒了!!!
以下是指向web浏览器的链接:网站
1条答案
按热度按时间bsxbgnwa1#
“异端猴子”说的是真的。这个
script()
问题顶部的行是正确的方式,因为它将jquery加载到您的网页中,而不是服务器中。它从cdn加载它。那很好。jquery使用浏览器端(客户端)javascript来操作网页中内容的文档对象模型(dom)。
nodejs服务器中没有dom(除非您正在做一些不同寻常的事情——您没有),因此服务器中的jquery是毫无意义的。