jQuery.ajax到$http

Question

我用了这个函数

    jQuery.ajax({
        type: 'POST',
        url: urlSubmit,
        timeout: 5000,
        dataType: 'text',
        data: {
            date : dataDate,
            url : dataUrl,
            domaine : dataDomaine,
            email : dataEmail,
            destinataire : dataDestinataire,
            msg : dataMsg
        },
        "success": function (jqXHR, textStatus, errorThrown) {
            console.log("AJAX success :) - statut " + textStatus);
            $timeout(successMailZR_alerte, 3000);
        },
        "error": function (jqXHR, textStatus, errorThrown) {
            console.log("AJAX fail :/ - statut " + textStatus);
            $timeout(errorMailZR_alerte, 3000);
        }

    });

代码正在做什么:向发送电子邮件的php脚本发送代码。

但是，由于我在一个完整的angularjs应用程序中重新编写了我的代码，所以我这样做：

    $http({
        method: 'POST',
        url: urlSubmit,
        timeout: 5000,
        cache: false,
        data: {
            date : dataDate,
            url : dataUrl,
            domaine : dataDomaine,
            email : dataEmail,
            destinataire : dataDestinataire,
            msg : dataMsg
        },
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        responseType: 'text',
    }).
    success(function(data, status, headers, config) {
        console.log("AJAX success :) - statut " + status);
        $timeout(successMailZR_alerte, 3000);
    }).
    error(function(data, status, headers, config) {
        console.log("AJAX fail :/ - statut " + status);
        $timeout(errorMailZR_alerte, 3000);
    });

问题是:使用$http，我有一个成功的200，但没有任何张贴，我没有返回在我的电子邮件。有什么问题吗？

Answer 1

要理解这一点，需要理解angular和jquery设置的请求标头，与jQuery的请求头不同，比如当jQuery发布请求时，标题可能如下所示：

POST /some-path HTTP/1.1
Content-Type: application/x-www-form-urlencoded // default header set by jQuery

foo=bar&name=John

在浏览器中的请求中可以从表单数据中看到这一点，如果使用铬，则可以在网络选项卡的铬检查器中看到这一点，如果单击请求，则可以看到jQuery设置的jQuery和内容标头。

另一方面，当发出请求时，您可以找到以下内容：

POST /some-path HTTP/1.1
Content-Type: application/json // default header set by angular


{ "foo" : "bar", "name" : "John" }

真正的区别在于，您有一个request payload，而不是通常由jQuery使用的form data。因此，您需要在服务器端做一些额外的事情，如下所示。

用这个：

$data = json_decode(file_get_contents("php://input"));
echo $data->date;
// and all other params you have sent

这是由于它的默认标题。

• 接受:申请/json，文本/纯文本，*/*
• 内容-类型:应用程序/json

而jQuery不太可能有其他的东西：

• 内容-类型:application/x form-urlencoded；charset=UTF-8

Answer 2

问题是jQuery的帖子确实以表单数据(例如键值对) (data)的形式发送数据，而AngularJS在请求有效负载中发送数据。关于两者之间的差异，请参见以下问题：What's the difference between "Request Payload" vs "Form Data" as seen in Chrome dev tools Network tab

为了使您的角脚本与您的服务器一起工作，您必须将您的数据转换为一个URL编码字符串，如下所述：How can I post data as form data instead of a request payload?。仅仅设置headers: {'Content-Type': 'application/x-www-form-urlencoded'}是不够的。

另一种方法是调整应用程序的后端，以解析消息有效负载，而不是表单数据参数。