Question

我试图通过HTML的方式调用我的API进行数据库检查，这样当我单击按钮时，它将调用API，然后检查数据库以获得正确的结果并相应地输出。到目前为止，我并不完全确定如何做到这一点，并尝试了这个

＆＃xA;＆＃xA;

 ＆lt; div id =“login”＆gt; ＆＃XA; ＆lt; h1＆gt;欢迎回来了！＆lt; / h1＆gt;＆＃xA;＆＃xA; ＆lt; form action =“http：// localhost：3000 / api / login”method =“post”＆gt;＆＃xA;＆＃xA; ＆lt; div class =“field-wrap”＆gt;＆＃xA; ＆LT;标签＆gt;＆＃XA;用户名＆lt; span class =“req”＆gt; *＆lt; / span＆gt;＆＃xA; ＆LT; /标签＆gt;＆＃XA; ＆lt; input type =“userID”required autocomplete =“off”/＆gt;＆＃xA; ＆LT; / DIV＆GT;＆＃XA;＆＃XA; ＆lt; div class =“field-wrap”＆gt;＆＃xA; ＆LT;标签＆gt;＆＃XA;密码＆lt; span class =“req”＆gt; *＆lt; / span＆gt;＆＃xA; ＆LT; /标签＆gt;＆＃XA; ＆lt; input type =“Password”required autocomplete =“off”/＆gt;＆＃xA; ＆LT; / DIV＆GT;＆＃XA;＆＃XA; ＆lt; p＆gt;＆lt; button class =“button button-block”＆gt;登录＆lt; / button＆gt;＆lt; / p＆gt;＆＃xA;＆＃xA; ＆LT; /形式＆GT;＆＃XA;＆＃XA; ＆lt; / div＆gt;＆＃xA;

＆＃xA;＆＃xA;

请注意，这仅用于登录检查数据库是否存在该用户和密码。这只是我项目的测试。在我的js文件中，

＆＃xA;＆＃xA;

  $（document）.ready（function（）{＆＃xA; $（“p”）。click（function（） {＆＃xA; var settings = {＆＃xA;“async”：true，＆＃xA;“url”：“http：// localhost：3000 / api / login”，＆＃xA;“method”：“ POST“，＆＃xA;”headers“：{＆＃xA;”content-type“：”application / json“，＆＃xA;”cache-control“：”no-cache“，＆＃xA;}， ＆＃xA;“processData”：false，＆＃xA;“data”：“{\ n \ t \”用户名\“：\”John \“，\ n \ t \”密码\“：＆＃xA; \“密码\”\ n}“＆＃xA;}＆＃xA; $ .ajax（设置）.done（函数（响应）{＆＃xA; console.log（响应）;＆＃xA;}）; ＆＃xA;}）;＆＃xA;}）;＆＃xA;

＆＃xA;＆＃xA;

我尝试过使用AJAX但它仍然会重定向到主页所以我决定尝试使用＆lt; form action =“http：// localhost：3000 / api / login”method =“post”＆gt; 来查看它是否会检查数据库但是它虽然它应该是正确的，因为它在数据库中是不正确的。如果您需要更多细节，请告诉我。任何帮助表示赞赏！请注意，这不仅仅是为了进行实验验证。

＆＃xA;

Answer 1

在表单中分配ID，并为各个控件分配名称和ID。

<form method="POST" action="http://localhost:3000/api/login" id="loginform">
      <input type="userID" id="userID" name="userID" required autocomplete="off"/>
      .....
      <input type="submit" id="submit" value="Log In">
</form>

Jquery代码。将postvaruid和postvarpwd替换为实际的服务器参数。

 $(document).ready(function(){
        // Set form variable
        var form = $('#loginform');           

        form.submit(function(event){              
          var userid = $('#userID').val(); 
          var password = $('#password').val(); 

          if ( $.trim(username) != '' && $.trim(password) != '') {
            // Process AJAX request
            $.post('http://localhost:3000/api/login',
                   {postvaruid: userid, postvarpwd: password }, function(data){
             console.log(data);
            });
          }              
          // Prevent default form action
          event.preventDefault();
        });
      });

编辑：

请参阅this以了解表单提交回调函数

我写的内容与

类似

$("#formid").submit(function( event ) {
  alert( "Handler for .submit() called." );
  event.preventDefault();
});

$.post实际上向服务器发出http post请求。

这是一个等同于下面的简写ajax调用

$.ajax({
  type: "POST",  <---Note this
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Answer 2

首先，您应该添加一个事件监听器，以便在提交时进行监听。

document.getElementById("loginForm").addEventListener('submit', login);

function login() {
$.ajax(settings).done(function (response) {
console.log(response);
}
}

然而。确保传递给api的数据正确处理，以便进行验证。猜猜你的api需要一些数据，作为参数传递给函数，inout字段必须具有name属性值作为代码中的相应参数。如果代码背后是：

 function login(string user, string userpswd) {
    // Code here...
}

然后你的HTML应该是这样的：

<form id="myForm">
    <input type="text" name="user" placeholder="Username" />
    <input type="password" name="userpswd" requiered="required" />
 </form>

作为一个例子。

如何从HTML调用API？

2 个答案:

编辑：