如何将两个ajax组合在一起答案

【问题标题】：how to combine two ajax together如何将两个ajax组合在一起
【发布时间】：2017-05-18 01:46:49
【问题描述】：

我有两个 ajax 函数。一种是安装网络摄像头并拍照，另一种 ajax 是上传文件并检测图片中是否有人脸。我想将这两个 ajax 结合起来，以便我可以从网络摄像头拍摄照片，并将该照片用于面部检测功能。我应该如何结合这两个 ajax？

// Upload image to sever
 document.getElementById("upload").addEventListener("click", function(){
            var dataUrl = canvas.toDataURL("image/jpeg", 0.85);
            $("#uploading").show();
            $.ajax({
                type: "POST",
                url: "html5-webcam-save.php",
                // url: "form-post.php",
                data: {
                    imgBase64: dataUrl,
                    user: "Joe",
                userid: 25
        }
        }).done(function(msg) {
                console.log("saved");
                $("#uploading").hide();
                $("#uploaded").show();
            });
        });
    }, false);
    
    //Face detection
    <form method="post" enctype="multipart/form-data" action="form-post.php"> 
    <input type="file" id="imageFile" name="file"><button type="button" id="testDetect">Submit</button>
</form>

<script>
$("#testDetect").click(function () {
    var file = $('#imageFile')[0].files[0]; 
    var reader  = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = function () {
      var imageData = parseImageData(reader.result);
      var data = {};
      data.image = imageData;
      $.ajax({
      url      : "http://localhost/Karios/simple-detect/form-post.php",
      type     : "POST",
      data     :  data,
      dataType : 'text'
    }).done(function(response) {
      alert(response)
      console.log(response)

    })
    }
});

【问题讨论】：

这两个ajax有不同的成功函数和不同的url。你想结合什么？
在拍照ajax调用的.done()函数中，你可以使用第一个返回的图片调用另一个ajax函数。
@brk 我想结合两个功能，这样我从网络摄像头拍摄的图片可以直接用于下一个ajax，即检测图片中是否有人脸。现在我必须手动上传图片，但我希望这两个 ajax 一起工作
@aaronw 你能帮我写出来吗？我还是编程新手:)
@brk 第一个 url 调用存储在一个文件夹中的图像的 PHP 存储。由于我不需要存储图像，我应该将其更改为另一个 url 吗？

标签： javascript php html ajax webcam

【解决方案1】：

希望这篇文章能有所帮助 http://www.htmlgoodies.com/beyond/javascript/making-promises-with-jquery-deferred.html

您需要将您的 ajax 调用作为 Promise 收集，并按照下面的代码（改编自上面的链接）收集它们的响应

var xhr1 = $.ajax("/some1");
var xhr2 = $.ajax("/some2");

$.when(xhr1, xhr2).done(function(x1, x2) {
  //Handle
});

【讨论】：

但它们不是同时的 Ajax 调用。一个接一个的发生......对于第二个ajax，它仍然读取从文件上传的图像
所以，我们需要链式调用，比如$.when(xhr1).then(xhr2).done(someFunction);
你能帮我写出来吗？谢谢

【解决方案2】：

你能修改你的 .done 函数来触发人脸检测元素吗？

.done(function(msg) {
    console.log("saved");
    $("#uploading").hide();
    $("#uploaded").show();

    // Trigger the click event
    $('#testDetect').click();
});

【讨论】：

我试过了，没用...我应该把整个第二个 ajax 放在第一个里面吗？