jQuery.ajax 到 $http答案

【问题标题】：jQuery.ajax to $httpjQuery.ajax 到 $http
【发布时间】：2014-10-23 03:45:48
【问题描述】：

我用过这个功能

    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);
        }

    });

代码在做什么：代码 POST 到发送电子邮件的 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，但没有发布任何内容，并且我的电子邮件没有返回。有什么问题？

【问题讨论】：

好吧，下载 Fiddler2 并比较传出的请求，你还缺少什么？设置它。

标签： javascript angularjs

【解决方案1】：

问题是 jQuery 的 POST 确实将您的数据作为表单数据（例如键值对）（https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data）发送，而 AngularJS 在请求负载中发送您的数据。有关两者之间的区别，请参阅以下 SO 问题：What's the difference between "Request Payload" vs "Form Data" as seen in Chrome dev tools Network tab

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

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

【讨论】：

【解决方案2】：

要理解这一点，需要了解angular和jquery设置的请求标头，这些标头存在差异，例如当请求由jQuery发布时，标头可能如下所示：

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

foo=bar&name=John

您可以在浏览器中发出的请求中的表单数据中看到这一点，如果您使用 chrome，那么您可以在网络选项卡的 chrome 检查器中看到这一点，如果您单击请求，那么您可以看到 form data 和内容标题由 jQuery 设置。

另一边有angular js $http服务，当有请求时，你可以找到这些：

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


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

真正的区别是你有一个 request payload 不常见的 form data 被 jQuery 使用。所以你需要在服务器端做一些额外的事情，如下所示。

使用这个：

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

这是由于它的默认标题

接受：application/json, text/plain, * / *

内容类型：应用程序/json

而 jQuery 不太可能有别的东西：

内容类型：应用程序/x-www-form-urlencoded； charset=UTF-8

【讨论】：