时间戳

首页 > 解决方案 > 我想要一个 JS 和 HTML 中的发布请求函数，就像我的 Python 代码一样

javascript - 我想要一个 JS 和 HTML 中的发布请求函数，就像我的 Python 代码一样

问题描述

我正在尝试制作一个 html 页面。我擅长 Python，但不擅长 JS。我有一个 Python 代码，但我想要这样的 JS 代码。任何人都可以帮助我:)

这是我的 Python 代码：

import requests

post_url = "MY_REQUEST_URL"
data = {"data1": "A_DATA_FROM_USER", "data2": "MY_DATA"}

response = requests.post(post_url, data=data)
result = response.headers["MY_HEADER_NAME"]

这是我的 HTML 代码：

<!DOCTYPE html>
<html>
<body>

<h2>My Heading</h2>

My Input: <input type="text" id="userdata" name="url" value="A_DATA_FROM_USER"/>
<br/>
<input type="button" value="Submit" onclick="A_FUNCTION"/>
<br/>
<br/>
<div id="output"></div>

<script>
THIS SCRIPT I WANT
</script>

</body>
</html>

我想要一个 JS 脚本来使用 HTML 获取用户的输入并在 HTML 中显示输出。

结果（在python代码中）将显示在输出元素中（在html代码中）

userdata = A_DATA_FROM_USER（来自用户的输入）

请在 JS 中使用 MY_REQUEST_URL、A_DATA_FROM_USER、MY_DATA、MY_HEADER_NAME

标签： javascriptpythonhtmljqueryrequest

解决方案

要进行后调用，您可以使用纯 JavaScript（获取函数），但通常网站使用允许您使用 AJAX 的 jquery 库。Ajax 附带的功能允许您使用 $.ajax() 函数进行简单的发布请求。

您可以通过 cdn 使用 jquery，因此您不必下载它。因此，在您的自定义添加包含然后脚本之前。像这样：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
Custom script
</script>

在纯 javascript 中，要与您必须使用的 HTML 元素进行交互

document.querySelector() 或 document.getElementById()。

例如，要将字符串放在输出 div 中，您应该这样做：

document.getElementById("output").innerHTML = "Result that shows inside the div";

如果你改用jquery，你可以用它来和dom交互（jquery有很多工具，不仅仅是用于HTTP请求的AJAX）。

例如：

$("#output").html("Result that shows inside the div");

$.ajax 的语法很简单，这里是您尝试构建的工作代码，将其添加到您的空<script> </script>标签中

$.post( 
    "mydomain.com/my-python-page", 
    { 
      userdata: $("#userdata").val() //Gets the userdata input value
    }
  )
  .done(function(data, textStatus, request) { //Request success
    let stringToShow = request.getResponseHeader('the-header-value-you-want-to-take');
    $("#output").html(stringToShow); //Shows the screen in div with id="output"
  })
  .fail(function() { //Request fails
    console.log("Error!");
  });
}

现在更改mydomain.com/my-python-page the-header-value-you-want-to-take您要在输出 div 中显示的响应标头值。

显然你必须把它放在你写的函数里面onClick="function_name()"

推荐阅读