Jquery および AngularJS での Get/Post パラメーターの使用の詳細

パラメータの受け渡しは難しくありませんが、バックエンドにオブジェクトやフォームを渡す場合などは少し面倒になることがあります。使用方法をいくつか紹介します。さて、この angularjs の記事を見てみましょう

まず第一に、リクエストを送信するときによく混乱するいくつかの属性を紹介します:
dataType: サーバーによって返されることが期待されるデータ形式
mimeType: サーバーから返されたデータ形式を処理して、ブラウザーがそれに応じて処理する方法を教えてください。たとえば、タイプを「Text/html」に設定すると、クライアントはこれが HTML であることがわかります。 「Application/pdf」と表示されていれば、クライアントはコンテンツをレンダリングするために PDF リーダー プラグインを起動する必要があることがわかります。
contentType: 送信するデータ型を指します。たとえば、「application/json;charset=utf-8」は非常に一般的な型で、「application/x-www-form-urlencoded; charset=UTF」です。 -8" がデフォルトのタイプです。

さらに、リクエスト ペイロードとフォームの違いを比較してください:
リクエスト ペイロードは Content-Type: application/json を設定する必要があります。Chrome 開発者ツールでは、オブジェクト/json を渡していることがわかります。 ajax 経由でリクエストを送信した場合、ブラウザーはデータがどこから来たのかを知りません

Content を設定する必要があります。 -Type: application/x-www-form-urlencoded または Content-Type: multipart/form-data この場合、form-data はブラウザーのリクエスト ペイロードです。 keyは何の値に対応するので、xx=xxという形で表示されますが、配列は文字列に変換されますので注意してください。

したがって、転送する必要があるデータがキーと値のペアのみである場合、複雑な構造 (ネストされた配列やオブジェクトなど) を転送する必要がある場合は、RequestPayload の方が適切です。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイト

angularjs 学習マニュアル にアクセスして学習してください)

次に、さまざまなパラメータの受け渡し状況を比較してみましょう~

最初のケースでは、通常の文字列を渡しますJQuery:

let params = {
    a: 1,
    b: 2
}
// 第一种方法:
$.ajax({
        "dataType": 'json',
        "type": "GET",
        "url": "your_request?" + $.param(params)
})

//第二种方法:
$.ajax({
        "type": "GET",
        "url": "your_request",
        "data": params
})

AngularJS:

var conf = {
    method: 'GET',
    url: 'your_request',
    params: {
        a: 1,
        b: 2
    }
};

$http(conf).then(function(response){
    console.log(response.data);
}, function(){
    console.log("error");
}).finally(function(){
    console.log("finally");
});

2 番目のケース: フォーム データを投稿するJQuery:

let params = {
    a: 1,
    b: 2,
    ary1: [3,4,5]
}

$.ajax({
    "type": "POST",
    "url": "your_request",
    "data": params
})

AngularJS:

データは URL エンコードされた文字列に変換する必要があることに注意してください
ContentType は 'application/x-www- に設定する必要がありますform -urlencoded' は、送信されるデータ形式が Form

var conf = {
    method: 'POST',
    url: 'your_request',
    data: $.param({
        c: 3,
        d: 4
    }),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
};

であることを指定します

let params = {
    a: 1,
    b: 2,
    ary1: [3,4,5]
}

$.ajax({
    "type": "POST",
    "url": "your_request",
    "data": JSON.stringify(params),
    "contentType": "application/json"
})

3 番目のケース: Post パラメータに RequestPayload を使用します

JQuery:

contentType を "application/json" に設定し、パラメータをシリアル化します

var conf = {
    method: 'POST',
    url: 'your_request',
    data: {
        c: 3,
        d: 4
    }
};

AngularJS:

$.ajax({
        "dataType": 'json',
        "type": "GET",
        "url": "your_request",
        "mimeType": "json"
})

サーバーから返された応答が null の場合、Firefox で XML 解析エラーが発生することがあります。これは、Firefox がデフォルトで XML を使用してサーバーの戻り値を解析し、null の戻り値が発生すると解析エラーが発生するためです。

JQuery で mimeType を設定することで解決できます

rrreee

AngularJS で mimeType を設定するのはさらに難しいですこの記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト

angularjs 学習マニュアル

にアクセスして学習してください) 、ご質問がございましたら、以下にメッセージを残していただけます

🎜🎜

以上がJquery および AngularJS での Get/Post パラメーターの使用の詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。