当前位置: 首页 > 知识库问答 >
问题:

Javascript xmlhttp从表单发送api请求

公羊绪
2023-03-14

我有一个本地运行的服务器,它有一个内置的rest api。要通过这个api登录,我们需要将用户名,密码和组织作为参数发送到urllocalhost:8090/ehr/api/v1/login通过POST方法和服务器返回一个auth令牌作为响应。当我尝试直接这样做时,无需用户通过以下代码从表单输入:

<html>
<body>
<script type="text/javascript">
    var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              document.write(this.responseText);
              console.log(this.responseText);

            }
          };    
        xhttp.open("POST", "http://localhost:8090/ehr/api/v1/login", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.send("username=admin&password=admin&organization=123456");
</script>
</body>
</html>

它工作得非常好,auth token作为json返回,但如果我尝试通过以下代码通过用户表单输入执行相同的操作:

<html>
<body>
<form method="POST">
    <input type="text" name="username" id="username" placeholder="Username">
    <input type="password" name="password" id="password" placeholder="Password">
    <input type="text" name="organization" id="organization" placeholder="Organization">
    <button id="submit" onclick="login()">Let me in!</button>
    <br><br>
</form> 
<script type="text/javascript">
    function login() {
        var user=document.getElementById("username").value;
        var pass =  document.getElementById("password").value;
        var org = document.getElementById("organization").value;
        var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              document.write(this.responseText);
              console.log(this.responseText);

            }
          };    
        xhttp.open("POST", "http://localhost:8090/ehr/api/v1/login", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        var param = "username="+user+"&password="+pass+"&organization="+org;
        xhttp.send(param);
    }   
</script>
</body>
</html>

此代码引发错误

login.html:26 XHR failed loading: POST "http://localhost:8090/ehr/api/v1/login"

第二个代码有什么问题,如何纠正?

共有2个答案

葛炯
2023-03-14

我自己解决了这个问题,我只是从html中删除了表单标签并使用了简单的输入标签。这解决了这个问题,可能是因为提交时的表单尝试加载新页面而不是停留在同一个页面上,但参数旨在从原始页面中获取。这是不可能发生的,因为每次点击提交按钮都会加载新页面。

岳京
2023-03-14

以这种方式发送您的params

xhttp。发送('username=user)

 类似资料:
  • 我试图使用eclipse或intellij向api发送get请求,作为使用java/jUnit和放心框架工作的测试的一部分。 每个请求都失败,并显示以下消息 2018年3月13日下午1:29:56组织。阿帕奇。http。impl。客户DefaultHttpClient tryConnect信息:连接到{s}时捕获到I/O异常(java.net.SocketException)- 顺便说一句,我正在

  • axios请求点击控制器上的url,但将空值设置到POJO类中,当我使用chrome中的开发人员工具时,有效负载包含数据。我做错了什么? Axios POST请求: 浏览器响应: 过帐多部分/表单数据时出错。Content-Type标头缺少边界 谁能解释一下如何设置边界或者我如何使用Axios发送表单数据。

  • 问题内容: 常见问题 可以从Java servlet的方法发送get reguest 吗?我需要检查一些针对我的Web API .NET服务的“凭单”,因此我可以从该方法中的自定义servlet调用此服务吗? 细节 我们有使用TIBCO Spotfire 7.0作为分析报告引擎的Web应用程序(.NET,MVC5)。为了使我们的用户能够在Web应用程序中查看报告,我们使用Spotfire WebP

  • 我使用Javafx Scene Builder 2.0制作了一个表单,我让表单工作,并将变量设置为表单元素值。我还创建了一个接收发布数据并将数据插入数据库的PHP脚本。 我需要一些关于通过http post将javafx表单数据发送到我的php脚本的帮助。 这是我到目前为止的java代码。 主要的JAVA Controller.java

  • 问题内容: 我对从Java代码以编程方式登录OWA(Microsoft Outlook Web Access- 基于Web的电子邮件客户端)并仅检索收件箱未读计数的方法感兴趣—我可以从收件箱网页的HTML源中读取此数字-但问题出在那儿-登录。 本质上,通过查看OWA登录页面的HTML源代码,我可以看到有一个HTML表单元素: 由其中的按钮元素提交: 通过研究clkLgn()脚本,我发现它向文档发送

  • response.content=statuscode:401,reasonprace:'unauthorized',version:1.1,content:system.net.http.streamcontent,header:{ rlogid:t6ldssk%28ciudbq%60anng%7fu2h%3f%3cwk%7difvqn*14%3f0513%29pqtfwpu%29pdhcaj%