向websocket提交表单

Question

我正在尝试向服务器提交一些简单的登录数据。对于“testuser”来说，所有的请求和函数都工作得很好。我希望人们能够将他们的用户名和密码提交给服务器(它们都是加密的，我看不到它)。

我可以看到注册请求在哪里提交用户名和通行证的通用数据"testuser“。但是我不知道如何让它接受用户登录信息。

                    <!--This is where I'm attempting a login form-->

<form action="/action_page.php">
  <div class="imgcontainer">
    <img src="img_avatar2.png" alt="Avatar" class="avatar">
  </div>

  <div class="container">
    <label><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>

    <label><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit">Login</button>
    <input type="checkbox" checked="checked"> Remember me
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>

<!-- This is rock-solid code from the gamesparks API.  Works flawlessly.  -->
    <button onClick='gamesparks.registrationRequest("testuser", "testuser", "testuser", registerResponse)'>Register</button>
    <button onClick='gamesparks.authenticationRequest("testuser", "testuser", loginResponse)'>Login</button>
    <button onClick='gamesparks.accountDetailsRequest(accountDetailsResponse)'>Account Details</button>
                    <button onClick='customEvent()'>Custom Event</button>
                    <button onClick='customEvent2()'>Custom Event 2</button>
                    <button onClick='testRT()'>Test RT</button>
                  <i>Special thanks to the awesome team at GameSparks!</i>
                  <div id="messages"></div>
                  <br/>
                  <br/>

我所有的按钮都可以工作，从我的后端输出关于“testuser”的数据。我知道它是有效的，因为我可以更改我的数据并进行验证。

您会注意到，"testuser“占用了其中一个onClicks的三个空间。一个是用户名，另一个是密码，第三个是displayname (按顺序排列)。

Displayname可以等于Username...if任何想要额外积分的人。

但最重要的是，我希望我的模式输入数据并将其提交给我的按钮。

Answer 1

您需要手动获取每个字段的值。最直接的方法是通过document.getElementById和value

document.getElementById( "username" ).value

在您的示例中：

<button onClick='gamesparks.authenticationRequest( document.getElementById( "username" ).value, document.getElementById( "password" ).value, loginResponse )'>Register</button>

然而，我建议调用一个函数而不是内联它：

<button onclick="login()">Login</button>
⋮
⋮ // Before </body>
⋮
<script>
const fetchValue = id => document.getElementById( id ).value;

function login() {

    const username = fetchValue( "username" );
    const password = fetchValue( "password" );

    gamesparks.authenticationRequest( username, password, loginResponse );

}
</script>

Also1:您永远不需要在面向客户端的HTML/JavaScript中放置一个api secret。

Also2:关于你的这些线路：

<var username = username>
<var password = password>

这些是无效的。只提供样式，其他什么都不提供。看起来你想把JavaScript放在那里？为此，您需要使用标记或event handlers，例如onclick。

Answer 2

再一次，我解决了我自己的问题！我所做的是将我的游戏公园函数放在另一个函数中。我了解到这叫做“嵌套”。我还将变量定义为onClick的一部分，然后在函数中使用这些变量。我使用的解决方案如下所示。请原谅我的n00bish评论。但它们能帮助我学习。

    <div class="container">
  <h2>Click To Login</h2>  <!-- This is a label above the button -->
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Martial Parks</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"><img src="http://martialparks.com/wp-content/uploads/2017/10/cropped-mp_logo01-2.png" class="center-block img-circle logo-margin-negative"></h4>
        </div>
        <div class="modal-body">
          <form>
          <div class="row">
  <div class="form-group col-sm-5 col-sm-offset-4">
    <label class="sr-only" for="exampleInputAmount">Username</label>
    <div class="input-group">
      <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
        <input type="text" class="form-control" id="username" placeholder="Username">
    </div>




  </div>
  <div class="form-group col-sm-5 col-sm-offset-4">
    <label class="sr-only" for="exampleInputAmount">Password</label>
    <div class="input-group">
      <div class="input-group-addon"><i class="fa fa-key"></i></div>
        <input type="text" class="form-control" id="password" placeholder="Password">
    </div>
  </div>



            <button type="button" class="btn btn-danger btn-block" data-dismiss="modal" onClick="login()">Login</button>
            <!-- There is a line of code that closes the modal once the button is clicked: data-dismiss="modal"  I've removed it from the register button.  -->
            <!-- Also, I can call up multiple functions using this format:  onclick="doSomething();doSomethingElse();"  -->

            <button type="button" class="btn btn-danger btn-block" onClick="register()">Register</button>



<script>
    function login() {
      var usernameinput = document.getElementById('username').value;
      var passwordinput = document.getElementById('password').value;
      console.log(usernameinput);
      console.log(passwordinput);
      gamesparks.authenticationRequest( usernameinput, passwordinput, loginResponse);
    }

    function register() {
      var usernameinput = document.getElementById('username').value;
      var passwordinput = document.getElementById('password').value;
      console.log(usernameinput);
      console.log(passwordinput);
      gamesparks.registrationRequest( usernameinput, usernameinput, passwordinput, registerResponse)
    }
</script>



    </div>
</form>
        </div>
        <div class="modal-footer">
          <div class="row">
          <div class="col-sm-5 col-sm-offset-4">
                  <div id="messages"></div>
                  <br/>
                  <br/>