Wie kann ich Daten als Formulardaten anstelle einer Anforderungsnutzlast posten?

Die folgende Zeile muss Hinzugefügt werden, um den $http-Objekts übergeben wird:

headers: {'Content-Type': 'application/x-www-form-urlencoded'}

Und die übergebenen Daten sollten umgewandelt werden in ein URL-kodierter string:

> $.param({fkey: "key"})
'fkey=key'

Also haben Sie so etwas wie:

$http({
    method: 'POST',
    url: url,
    data: $.param({fkey: "key"}),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

Aus: https://groups.google.com/forum/#!msg/eckig/5nAedJ1LyO0/4Vj_72EZcDsJ

UPDATE

Nutzung der neuen Dienste Hinzugefügt, die mit AngularJS V1.4, siehe

• URL-Codierung von Variablen, die nur mithilfe von AngularJS services

InformationsquelleAutor der Antwort mjibson

Die anhaltende Verwirrung um dieses Thema inspiriert mich zu schreiben, einen blog-Beitrag darüber. Die Lösung, die ich vorschlagen, in diesem post ist besser als Ihr Derzeitiger top-bewerteten Lösung, denn es schränkt Sie nicht ein, um diese parametrisieren Sie Ihre Daten-Objekt für den $http-service-Aufrufe; also mit meiner Lösung können Sie einfach weiter, um pass eigentlichen Daten-Objekte zu $http.post(), etc. und noch das gewünschte Ergebnis erzielen.

Auch, die top-bewerteten Antwort stützt sich auf die Einbeziehung der vollständigen jQuery in die Seite für den $.param () - Funktion, in der Erwägung, dass meine Lösung ist jQuery Agnostiker, Reine AngularJS bereit.

http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

Hoffe, das hilft.

InformationsquelleAutor der Antwort Ezekiel Victor

Als von AngularJS v1.4.0, es ist ein built-in $httpParamSerializer service, konvertiert ein beliebiges Objekt zu einem Teil eines HTTP-request nach den Regeln, die aufgeführt sind, auf die docs-Seite.

Es kann z.B. so verwendet werden:

$http.post('http://example.com', $httpParamSerializer(formDataObj)).
    success(function(data){/* response status 200-299 */}).
    error(function(data){/* response status 400-999 */});

Denken Sie daran, dass für eine korrekte form zu posten, die Content-Type header muss geändert werden. Um dies zu tun, die Global für alle POST-requests, dieser code (aus Albireo ist eine halbe Antwort) können verwendet werden:

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

Tun dies nur für den aktuellen Beitrag, der headers - Eigenschaft des request-Objekt muss geändert werden:

var req = {
 method: 'POST',
 url: 'http://example.com',
 headers: {
   'Content-Type': 'application/x-www-form-urlencoded'
 },
 data: $httpParamSerializer(formDataObj)
};

$http(req);

InformationsquelleAutor der Antwort Mitja

Als Problemumgehung können Sie einfach den code empfangen die POST reagiert auf application/json-Daten. Für PHP habe ich den code unten, so dass ich POST von ihm in irgendein form-encoded oder JSON.

//handles JSON posted arguments and stuffs them into $_POST
//angular's $http makes JSON posts (not normal "form encoded")
$content_type_args = explode(';', $_SERVER['CONTENT_TYPE']); //parse content_type string
if ($content_type_args[0] == 'application/json')
  $_POST = json_decode(file_get_contents('php://input'),true);

//now continue to reference $_POST vars as usual

InformationsquelleAutor der Antwort James Bell

Können Sie versuchen, mit unten Lösung

$http({
        method: 'POST',
        url: url-post,
        data: data-post-object-json,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        transformRequest: function(obj) {
            var str = [];
            for (var key in obj) {
                if (obj[key] instanceof Array) {
                    for(var idx in obj[key]){
                        var subObj = obj[key][idx];
                        for(var subKey in subObj){
                            str.push(encodeURIComponent(key) + "[" + idx + "][" + encodeURIComponent(subKey) + "]=" + encodeURIComponent(subObj[subKey]));
                        }
                    }
                }
                else {
                    str.push(encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]));
                }
            }
            return str.join("&");
        }
    }).success(function(response) {
          /* Do something */
        });

InformationsquelleAutor der Antwort tmquang6805

Es ist ein wirklich schönes tutorial, das geht über diese und andere damit zusammenhängende Sachen - Die Einreichung AJAX-Formulare: Die AngularJS Weg.

Im Grunde, müssen Sie die header der POST-Anforderung angeben, dass Sie das senden von Formular-Daten als URL-codierte Zeichenfolge, und legen Sie die zu sendenden Daten das gleiche format

$http({
  method  : 'POST',
  url     : 'url',
  data    : $.param(xsrf),  //pass in data as strings
  headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  //set the headers so angular passing info as form data (not request payload)
});

Beachten Sie, dass jQuery param () - Hilfsfunktion wird hier für serialising die Daten in eine Zeichenfolge, aber Sie können dies manuell tun, wenn nicht mit jQuery.

InformationsquelleAutor der Antwort robinmitra

Für Symfony2-Benutzer:

Wenn Sie nicht wollen, etwas zu ändern in Ihrem javascript für diese Arbeit, die Sie tun können, diese änderungen in Ihr symfony-app:

Erstellen Sie eine Klasse, die Sie erweitert Symfony\Component\HttpFoundation\Request Klasse:

<?php

namespace Acme\Test\MyRequest;

use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\ParameterBag;

class MyRequest extends Request{


/**
* Override and extend the createFromGlobals function.
* 
* 
*
* @return Request A new request
*
* @api
*/
public static function createFromGlobals()
{
  //Get what we would get from the parent
  $request = parent::createFromGlobals();

  //Add the handling for 'application/json' content type.
  if(0 === strpos($request->headers->get('CONTENT_TYPE'), 'application/json')){

    //The json is in the content
    $cont = $request->getContent();

    $json = json_decode($cont);

    //ParameterBag must be an Array.
    if(is_object($json)) {
      $json = (array) $json;
  }
  $request->request = new ParameterBag($json);

}

return $request;

}

}

Nun verwenden Sie die Klasse in app_dev.php (oder eine beliebige index-Datei, die Sie verwenden)

//web/app_dev.php

$kernel = new AppKernel('dev', true);
//$kernel->loadClassCache();
$request = ForumBundleRequest::createFromGlobals();

//use your class instead
//$request = Request::createFromGlobals();
$response = $kernel->handle($request);
$response->send();
$kernel->terminate($request, $response);

InformationsquelleAutor der Antwort carmel

Derzeit bin ich über folgende Lösung, die ich gefunden in der AngularJS google-Gruppe.

$http 
.post('/echo/json/', 'json=' + alsterrunde(eckige.toJson(Daten)), { 
Header: { 
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' 
} 
}).Erfolg(Funktion(Daten) { 
$Umfang.Daten = Daten; 
}); 

Beachten Sie, dass wenn Sie mit PHP, Sie brauchen so etwas wie Symfony 2-HTTP-Komponente ist Request::createFromGlobals() zu Lesen, dieses als $_POST wird nicht automatisch geladen.

InformationsquelleAutor der Antwort Aditya M P

Vollständige Antwort (seit angular 1.4). Sie müssen de Abhängigkeit $httpParamSerializer

var res = $resource(serverUrl + 'Token', { }, {
                save: { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
            });

            res.save({ }, $httpParamSerializer({ param1: 'sdsd', param2: 'sdsd' }), function (response) {

            }, function (error) { 

            });

InformationsquelleAutor der Antwort Sebastián Rojas

Dies ist nicht eine direkte Antwort, sondern eher eine etwas andere design-Richtung:

Nicht per post die Daten als Formular, sondern als JSON-Objekt direkt zugeordnet werden, um server-side object, oder verwenden REST-Stil path-variable

Nun kenne ich weder die option könnte sein geeignet in Ihrem Fall, da Sie versuchen, übergeben Sie einen XSRF-Taste. Zuordnung in eine path-variable, die wie das ist eine schreckliche design:

http://www.someexample.com/xsrf/{xsrfKey}

Denn von Natur aus würden Sie wollen, um pass xsrf-Taste, um andere Pfad auch /login/book-appointment etc. und Sie nicht zu verwirren wollen Ihre hübsche URL

Interessanterweise hinzufügen, ein Objekt-Feld nicht angemessen ist, entweder, weil nun auf die einzelnen json-Objekt übergeben-server, den Sie hinzufügen müssen, um das Feld

{
  appointmentId : 23,
  name : 'Joe Citizen',
  xsrf : '...'
}

Werden Sie sicherlich nicht wollen, fügen Sie ein weiteres Feld auf Ihrem server-side-Klasse, die keine direkte semantische Verbindung mit der Domäne-Objekt.

Meiner Meinung nach der beste Weg, um Ihren pass xsrf-Taste ist über einen HTTP-header. Viele xsrf-Schutz der server-Seite web-framework-Bibliothek zu unterstützen. Zum Beispiel in Java, Spring, können Sie es mit X-CSRF-TOKEN - header.

Winkel-ausgezeichnete Bindungsfähigkeit JS-Objekt auf UI-Objekt heißt, wir können loszuwerden, die Praxis der Entsendung bilden alle zusammen und veröffentlichen Sie JSON statt. JSON kann leicht de-serialisiert in server-side object und die Unterstützung komplexer Datenstrukturen wie anzeigen, arrays, geschachtelten Objekten usw..

Wie Sie post-array in einer form, die Nutzlast? Vielleicht so:

shopLocation=downtown&daysOpen=Monday&daysOpen=Tuesday&daysOpen=Wednesday

oder so:

shopLocation=downtwon&daysOpen=Monday,Tuesday,Wednesday

Beide sind arm-design..

InformationsquelleAutor der Antwort gerrytan

Nur Dünn, Sie haben zu ändern, ist über die Eigenschaft "params" anstatt "Daten" beim erstellen der $http-Objekt:

$http({
   method: 'POST',
   url: serviceUrl + '/ClientUpdate',
   params: { LangUserId: userId, clientJSON: clients[i] },
})

Im obigen Beispiel-clients[i] ist einfach nur JSON-Objekt (nicht serialisiert in irgendeiner Weise). Wenn Sie "params" anstatt "Daten" eckige serialisieren Sie das Objekt, für das Sie mit $httpParamSerializer: https://docs.angularjs.org/api/ng/service/$httpParamSerializer

InformationsquelleAutor der Antwort Rafal Zajac