【问题标题】:How can i send data from client end to node如何将数据从客户端发送到节点
【发布时间】:2020-03-19 13:41:06
【问题描述】:

我有一个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 %>

我尝试将文本发送到我的节点,但我收到的数据是我发送到该站点的数据,而不是用户新编辑的数据 我的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);
  });

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

我错过了什么

【问题讨论】:

    标签: javascript html css node.js express


    【解决方案1】:

    这里的问题是script tags 中的javascript 仅在页面初始化时运行。

    意味着您定义的 data 变量在脚本运行时具有 HTML 元素的值。

    let data = {
        prefix: $('#Prefix').val(),
        welcomeChannelID: $('#welcomeChannelID').val(),
        logchannelID: $('#logchannelID').val(),
        voicelogchannelID: $('#voicelogchannelID').val(),
        defaultchannelID: $('#defaultchannelID').val(),
        guildautoroleID: $('#guildautoroleID').val(),
        playervolume: $('#guildautoroleID').val(),
      }
    

    因此,您必须仅在单击按钮后获取数据,例如:

    function getData() {
        return {
            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(getData()),
            ...
        } ... )
    })
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2022-01-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多