如何将AJAX POST转换为HTTP POST，以便在单击时发布

How to convert an AJAX POST into a HTTP POST so that it is posted on a click?

本文关键字：POST 单击 HTTP AJAX 转换      更新时间：2023-09-26

我有以下工作代码-这是一个AJAX，因此它在不点击的情况下发布。我了解到HTTP POST需要点击-如何在启用鼠标点击的情况下将其转换为HTTP POST？

代码的第二部分实际上只需点击即可工作，但它会下载到本地计算机，而不是发送到服务器——也许其中有一些想法，比如var link=document.getElementById（"save"）？查看原始应用程序http://webaudiodemos.appspot.com/AudioRecorder/index.html.

更新：我是一个新手，我从这个博客中得到了以下想法：http://www.mousewhisperer.co.uk/ajax_page.html

Ajax（Asynchronous Javascript And XML）是一种"在后台"提交服务器请求并将信息从服务器返回给用户而无需等待页面加载的技术（或者更准确地说，是技术的组合）。Ajax实际上是多种技术的结合，它们协同工作以提供这种功能。它是如何工作的？Ajax脚本通过Javascript XMLHTTPRequest对象向服务器发出请求，而不是通过正常的HTTPPOST或GET请求（例如通过提交表单或单击超链接）向服务器发出用户请求。

     Recorder.setupDownload = function(blob, filename){
      var xhr = new XMLHttpRequest();
      xhr.open('POST', './upload.php', true);
      xhr.onload = function(e) {};
      // Listen to the upload progress.
      var progressBar = document.querySelector('progress');
      xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
          progressBar.value = (e.loaded / e.total) * 100;
          progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
        }
      };
      xhr.send(blob);
    }
     ================html code fragment=======
    #save, #save img { height: 10vh; }
    #save { opacity: 0.25;}
    #save[download] { opacity: 1;}

    ==========works with a click ----------------
        var url = (window.URL || window.webkitURL).createObjectURL(blob);
        var link = document.getElementById("save");
        link.href = url;
        link.download = filename || 'output.wav';

Recorder.setupDownload是一个函数，因此您可以在用户界面中绑定事件。换句话说，当页面上发生某些特定的事情时，您可以指示JavaScript执行该函数。

使用您的"点击工作"示例，您可以将Recorder.setupDownload函数与它的点击事件联系起来：

var link = document.getElementById("save");
link.onclick = Recorder.setupDownload(myblob, myfilename);

在脚本中用适当的变量替换myblob和myfilename。

JSFiddle示例

实际上，以下操作将基于@bloodyKnuckles的回复进行（我仍在等待亮显硬盘图像-欢迎投稿）：

    var link = document.getElementById("save");
    link.onclick = function () {
        Recorder.setupDownload(myblob, myfilename);
    };
相关文章：