jQuery.ajax到$ http

时间:2014-08-29 06:52:11

标签: javascript angularjs

我使用了这个功能

    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但没有发布任何内容,我的电子邮件中没有回复。问题是什么?

2 个答案:

答案 0 :(得分:2)

问题是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

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

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

答案 1 :(得分:0)

要理解这一点,需要了解由angularjquery设置的请求标头,与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设置的内容标题。

另一方面,使用角度js $http服务,当发出请求时,您可以找到这些:

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


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

真正的不同之处在于,jQuery使用的request payload不常见form data。所以你需要在服务器端做一些额外的事情,如下所示。

使用此:

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

这是由于其默认标题

  
      
  • 接受:application / json,text / plain,* / *
  •   
  • Content-Type:application / json
  •   

和jQuery不太可能有别的东西:

  
      
  • Content-Type:application / x-www-form-urlencoded;字符集= UTF-8
  •