如何在 Flutter WebView 中将数据发布到 URL答案

【问题标题】：How to Post Data to URL in Flutter WebView如何在 Flutter WebView 中将数据发布到 URL
【发布时间】：2021-02-27 06:29:50
【问题描述】：

我想将一些数据发布到 Flutter WebView 中的 URL 正文。那么，我该怎么做呢？

【问题讨论】：

我可以使用 HTTP 包发布数据，但我想直接在 webview 中转到一个 URL，并在其标题和正文中添加一些数据。
我说我想在它的 Body 中发布数据，而不是在 Param 中
你为什么要一次又一次地删除你的cmets！？
你想做这样的事情吗：developer.mozilla.org/en-US/docs/Learn/Forms/…（例如，将数据从表单或正文中的 js 发布到某些 web 服务）？
我明白了。我认为您可能对 POST 请求 (en.wikipedia.org/wiki/POST_(HTTP)) 或颤动的 WebView 是什么有误解。您只能向 http 服务器发送 post 请求。 Flutter WebView 是一个渲染 HTML 并执行 JS、wasm 等的组件，但不是 HTTP Server。

标签： flutter post webview

【解决方案1】：

webview_flutter 目前没有发送帖子请求的方法。不过，你可以试试我的flutter_inappwebview 插件。它支持 POST 请求！

使用flutter_inappwebview 插件的当前最新版本5.0.5+3 的简单示例是：

var postData = Uint8List.fromList(utf8.encode("firstname=Foo&lastname=Bar"));
controller.postUrl(url: Uri.parse("https://example.com/my-post-endpoint"), postData: postData);

其中postData 是x-www-form-urlencoded 格式的请求正文。

例如，如果您有一个 PHP 服务器，您可以像往常一样访问 firstname 和 lastname 值，即 $_POST['firstname'] 和 $_POST['lastname']。

您还可以使用如下所示的初始 POST 请求来初始化 InAppWebView 小部件：

child: InAppWebView(
  initialUrlRequest: URLRequest(
    url: Uri.parse("https://example.com/my-post-endpoint"),
    method: 'POST',
    body: Uint8List.fromList(utf8.encode("firstname=Foo&lastname=Bar")),
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  ),
  onWebViewCreated: (controller) {
    
  },
),

【讨论】：

这个包也可以发布“表单数据”类型吗？似乎只有 url 编码。

【解决方案2】：

你可以在Flutter官方WebView:::

上运行JS函数

1-JS发布请求示例

**
 * sends a request to the specified url from a form. this will change the window location.
 * @param {string} path the path to send the post request to
 * @param {object} params the parameters to add to the url
 * @param {string} [method=post] the method to use on the form
 */

function post(path, params, method='post') {

  // The rest of this code assumes you are not using a library.
  // It can be made less verbose if you use one.
  const form = document.createElement('form');
  form.method = method;
  form.action = path;

  for (const key in params) {
    if (params.hasOwnProperty(key)) {
      const hiddenField = document.createElement('input');
      hiddenField.type = 'hidden';
      hiddenField.name = key;
      hiddenField.value = params[key];

      form.appendChild(hiddenField);
    }
  }

  document.body.appendChild(form);
  form.submit();
}

2-在 Flutter 中将 JS 函数转换为字符串并调用

final String postUrl="'https://jsonplaceholder.typicode.com/posts'";
final String postParam= "{name: 'Johnny Bravo'}";
final String requestMethod= "'post'";

final  String jsFunc="function post(path, params, method='post') {"+
    "const form = document.createElement('form');"+
    "form.method = method;"+
    "form.action = path;"+
    "for (const key in params) {"+
    "if (params.hasOwnProperty(key)) {"+
    "const hiddenField = document.createElement('input');"+
    "hiddenField.type = 'hidden';"+
    "hiddenField.name = key;"+
    "hiddenField.value = params[key];"+
    "form.appendChild(hiddenField);}}document.body.appendChild(form);form.submit();}"+
    "post($postUrl, $postParam, method=$requestMethod)";

3- 在 WebView 中运行 JS 代码

return FutureBuilder<WebViewController>(
    future: _controller.future,
    builder: (BuildContext context,
        AsyncSnapshot<WebViewController> controller) {
      if (controller.hasData) {
        return FloatingActionButton(
          onPressed: () async {
            controller.data!.evaluateJavascript(jsFunc);
          },
          child: const Icon(Icons.call_received),
        );
      }
      return Container();
    });

【讨论】：