javascript和html连接

lrl1mhuk  于 2021-09-23  发布在  Java
关注(0)|答案(1)|浏览(456)

我对html和javascript非常陌生。我为登录功能创建了一个非常简单的html页面。代码如下。

  1. <html>
  2. <head>
  3. <body>
  4. <form>
  5. <p>Username</p>
  6. <input type='text' name="" placeholder="Enter Username/Email ID">
  7. <p> Password</p>
  8. <input type='password' name="" placeholder="Enter Password">
  9. <input type='submit' name="" value="LogIn the User">
  10. </form>
  11. </body>
  12. </head>
  13. </html>

现在我有了一个具有登录功能的restful api。我可以在postman中以json格式发送用于api测试的用户名和密码值。

现在我的问题是如何将登录api的其余部分与html页面连接起来。如果这是一个重复的问题,那么请把我带到原来的问题。另外,如果你能建议一些资源。我经历了很多,但找不到相关的。谢谢

pinkon5k

pinkon5k1#

基本步骤是
截取表单上的提交事件
解析表单以创建要提交的json
提交json
对回应做点什么

  1. document.forms[0].addEventListener('submit', function(e) { // when they submit
  2. e.preventDefault(); // Don't try and submit the form the traditional way
  3. const data = {
  4. username: e.target.querySelector('input[name="username"]').value,
  5. password: e.target.querySelector('input[name="password"]').value
  6. } // get the JSON we want to submit
  7. fetch('/auth/login', {
  8. method: 'post', // submit it as a post request
  9. body: JSON.stringify(data)
  10. }).then(function(response) {
  11. return response.json(); // parse the response as json
  12. }).then(function(data) {
  13. console.log('do something with the response');
  14. });
  15. });
  1. <html>
  2. <head>
  3. <body>
  4. <form>
  5. <p>Username</p>
  6. <input type='text' name="username" placeholder="Enter Username/Email ID">
  7. <p> Password</p>
  8. <input type='password' name="password" placeholder="Enter Password">
  9. <input type='submit' value="LogIn the User">
  10. </form>
  11. </body>
  12. </head>
  13. </html>
展开查看全部

相关问题