Javascript 如何将数据从客户端发送到节点_Javascript_Html_Css_Node.js_Express

Javascript 如何将数据从客户端发送到节点

javascript html css node.js express

Javascript 如何将数据从客户端发送到节点,javascript,html,css,node.js,express,Javascript,Html,Css,Node.js,Express,我有一个ejs页面看起来像 <%- include('../blocks/header', {bot, user, path}) %> <div class="row" style="min-width: 400px;"> <div class="col" style="min-width: 400px;"> <div class="card text-white mb-3" > <%- include('../blo

我有一个ejs页面看起来像

<%- include('../blocks/header', {bot, user, path}) %>
<div class="row" style="min-width: 400px;">
  <div class="col" style="min-width: 400px;">
    <div class="card text-white mb-3" >
      <%- include('../blocks/guild-nav', {active: "manage", guild}) %>
      <table class="table table-hover">
        <thead>
          <tr>
            <th scope="col">Setting Name</th>
              <th scope="col">Current Setting</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row" class="list-group-item d-flex justify-content-between align-items-center"
              data-toggle="tooltip" title="prefix"> Prefix<font color="red">*</font> </th>
              <td width="80%"><input type="text" class="form-control form-control-sm" style="text-align: left;"
                name="Prefix" id="Prefix" value="<%= prefix %>" placeholder="Enter prefix "></td>
          </tr>
          <tr>
            <th scope="row" class="list-group-item d-flex justify-content-between align-items-center"
              data-toggle="tooltip" title="welcomeChannelID"> welcomeChannelID </th>
              <td width="80%"><input type="text" class="form-control form-control-sm" style="text-align: left;"
                name="welcomeChannelID" id="welcomeChannelID" value="<%= welcomeChannelID %>"
                placeholder="Enter welcomeChannelID "></td>
          </tr>
          <tr>
            <th scope="row" class="list-group-item d-flex justify-content-between align-items-center"
              data-toggle="tooltip" title="logchannelID"> logchannelID </th>
              <td width="80%"><input type="text" class="form-control form-control-sm" style="text-align: left;"
                name="logchannelID" id="logchannelID" value="<%= logchannel %>" placeholder="Enter logchannelID ">
          </tr>
          <tr>
            <th scope="row" class="list-group-item d-flex justify-content-between align-items-center"
              data-toggle="tooltip" title="voicelogchannelID"> voicelogchannelID </th>
              <td width="80%"><input type="text" class="form-control form-control-sm" style="text-align: left;"
                name="voicelogchannelID" id="voicelogchannelID" value="<%= voicelogchannel %>"
                placeholder="Enter voicelogchannelID "></td>
          </tr>
          <tr>
            <th scope="row" class="list-group-item d-flex justify-content-between align-items-center"
              data-toggle="tooltip" title="defaultchannelID"> defaultchannelID</th>
              <td width="80%"><input type="text" class="form-control form-control-sm" style="text-align: left;"
                name="defaultchannelID" id="defaultchannelID" value="<%= defaultchannelID %>"
                placeholder="Enter defaultchannelID "></td>
          </tr>
          <tr>
            <th scope="row" class="list-group-item d-flex justify-content-between align-items-center"
              data-toggle="tooltip" title="guildautoroleIDt"> guildautoroleID</th>
              <td width="80%"><input type="text" class="form-control form-control-sm" style="text-align: left;"
                name="guildautoroleID" id="guildautoroleID" value="<%= guildautorole %>"
                placeholder="Enter guildautoroleID "></td>
          </tr>
          <tr>
            <th scope="row" class="list-group-item d-flex justify-content-between align-items-center"
              data-toggle="tooltip" title="playervolume"> playervolume</th>
              <td width="80%"><input type="text" class="form-control form-control-sm" style="text-align: left;"
                name="playervolume" id="playervolume" value="<%= playervolume %>" placeholder="Enter playervolume ">
          </tr>
            %>
            %>
        </tbody>
      </table>
      <div style="width: 100%; text-align: right; margin-top: 20px;">
        <a class="btn btn-danger" data-toggle="modal" data-target="#settingsResetModal" role="button">Reset Defaults
          <i class="fa fa-fw fa-cogs" aria-hidden="true"></i></a>
        <button type="submit" class="btn btn-primary" role="button">Save Changes <i class="fa fa-fw fa-save"
            aria-hidden="true"></i></button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  var guildID = "<%= guild.id %>";
  let data = {
    prefix: $('#Prefix').val(),
    welcomeChannelID: $('#welcomeChannelID').val(),
    logchannelID: $('#logchannelID').val(),
    voicelogchannelID: $('#voicelogchannelID').val(),
    defaultchannelID: $('#defaultchannelID').val(),
    guildautoroleID: $('#guildautoroleID').val(),
    playervolume: $('#guildautoroleID').val(),
  }
  $('.btn-primary.btn').click(function() {
            $.ajax({
                url: `/dashboard/${guildID}/set`,
                type: "POST",
                dataType: "json",
                data: JSON.stringify(data),
                contentType: "application/json",
                cache: false,
                timeout: 5000,
                complete: function() {
                  //called when complete
                  console.log('process complete');
                },

                success: function(data) {
                  console.log(data);
                  console.log('process sucess');
               },

                error: function(e) {
                  console.log(e)
                  console.log('process error');
                },
              });
        })
</script>
<% include ../blocks/footer %>


设置名称
电流设置
前缀*
welcomeChannelID
对数通道ID
语音信道
defaultchannelID
吉达乌托洛莱
游戏卷
%>
%>
复位默认值
保存更改
var guildID=“”；
让数据={
前缀：$（'#prefix'）.val（），
welcomeChannelID:$（'#welcomeChannelID'）.val（），
logchannelID:$（'#logchannelID'）.val（），
voicelogchannelID:$（'#voicelogchannelID'）.val（），
defaultchannelID:$（'#defaultchannelID'）.val（），
Guildautoroled:$（'#Guildautoroled'）.val（），
playervolume:$（'#guildautoroleID'）.val（），
}
$（'.btn primary.btn'）。单击（函数（）{
$.ajax({
url:`/dashboard/${guildID}/set`，
类型：“POST”，
数据类型：“json”，
数据：JSON.stringify（数据），
contentType:“应用程序/json”，
cache:false，
超时：5000，
完成：函数（）{
//完成时调用
console.log（“进程完成”）；
},
成功：功能（数据）{
控制台日志（数据）；
console.log（'processsuccess'）；
},
错误：函数（e）{
控制台日志（e）
console.log（'processerror'）；
},
});
})

我尝试将文本发送到我的节点，但我收到的数据是我发送到该站点的数据，而不是用户编辑的新数据我的dashboard.js文件看起来像这样，所有将数据发送到客户端的方法都可以工作，但我被困在这里

app.get("/dashboard/:guildID/set", checkAuth, async (req, res) => {
    const guild = client.guilds.get(req.params.guildID);
    if (!guild) return res.status(404);
    const isManaged = guild && !!guild.member(req.user.id) ? guild.member(req.user.id).permissions.has("MANAGE_GUILD") : false;
    if (!isManaged && !req.session.isAdmin) res.redirect("/");

    if(welcomeChannelID !== `<#${(req.body.welcomeChannelID).replace(/[^0-9a-zA-Z_]/g, '')}>`) welcomeChannelID = `<#${(req.body.welcomeChannelID).replace(/[^0-9a-zA-Z_]/g, '')}>`
    db.collection('guilds').doc(guild.id).update({
      'prefix': req.body.prefix,
      'welcomeChannelID': welcomeChannelID.slice(2,-1) ,
      'logchannel': logchannel.slice(2,-1),
      'voicelogchannel': voicelogchannel.slice(2,-1),
      'guildautorole': guildautorole.slice(2,-1),
      'defaultchannelID':defaultchannelID.slice(2,-1),
      'playervolume': req.body.playervolume,

    })
    res.send(req.body);
    res.redirect("/dashboard/"+req.params.guildID);
  });

app.get（“/dashboard/：guildID/set”），checkAuth，async（req，res）=>{
const guild=client.guilds.get（req.params.guildID）；
如果（！guild）返回res.status（404）；
const isManaged=guild&&！！guild.member（req.user.id）？guild.member（req.user.id）。permissions.has（“MANAGE_guild”）：false；
if（！isManaged&&！req.session.isAdmin）res.redirect（“/”）；
如果（welcomeChannelID！=``）welcomeChannelID=``
db.collection（'guilds'）.doc（guild.id）.更新({
“前缀”：req.body.prefix，
“welcomeChannelID”：welcomeChannelID.slice（2，-1），
“logchannel”：logchannel.slice（2，-1），
'voicelogchannel'：voicelogchannel.slice（2，-1），
“guildautorole”：guildautorole.slice（2，-1），
“defaultchannelID”：defaultchannelID.slice（2，-1），
“playervolume”：req.body.playervolume，
})
res.send（请求主体）；
res.redirect（“/dashboard/”+req.params.guildID）；
});

我只在这里删除了其他定义的var，它们都在主代码中

我是否遗漏了一些内容

这里的问题是

脚本标记中的javascript仅在页面初始化时运行。
这意味着您定义的data
变量具有脚本运行时HTML元素的值
let数据={
前缀：$（'#prefix'）.val（），
welcomeChannelID:$（'#welcomeChannelID'）.val（），
logchannelID:$（'#logchannelID'）.val（），
voicelogchannelID:$（'#voicelogchannelID'）.val（），
defaultchannelID:$（'#defaultchannelID'）.val（），
Guildautoroled:$（'#Guildautoroled'）.val（），
playervolume:$（'#guildautoroleID'）.val（），
}

因此，只需单击按钮即可获取数据，例如：
函数getData（）{
返回{
前缀：$（'#prefix'）.val（），
welcomeChannelID:$（'#welcomeChannelID'）.val（），
logchannelID:$（'#logchannelID'）.val（），
voicelogchannelID:$（'#voicelogchannelID'）.val（），
defaultchannelID:$（'#defaultchannelID'）.val（），
Guildautoroled:$（'#Guildautoroled'）.val（），
playervolume:$（'#guildautoroleID'）.val（），
}
}
$（'.btn primary.btn'）。单击（函数（）{
$.ajax({
url:`/dashboard/${guildID}/set`，
类型：“POST”，
数据类型：“json”，
数据：JSON.stringify（getData（）），
...
} ... )
})