アクションに渡す Jquery Ajax メソッドについて話しましょう (補足)_jquery

以前に記事を書きましたアクションに値を渡す Jquery Ajax メソッド この記事はその記事の補足です
コントローラー内のメソッドは次のとおりであるとします。

コードをコピーします コードは次のとおりです。

public ActionResult Readperson(PersonModel model)
🎜> string s = model.ToString();
public ActionResult ReadPeoples(List
モデル)それぞれ (モデル内の変数) ;
ここで、PersonModel は次のように定義されます:

コードをコピーします


コードは次のとおりです。


public class PersonModel
{

public int id

get;

}

public int age { セット } public bool 性別 {

セット;

public string city
{
セット;
public override string ToString()
{
string s = string.Format(@"id:{0}
名前:{1}
年齢:{2}
性別:{3}
city:{4}
", id, 名前, 年齢, 性別, 都市);
return s; >
次に、コントローラー メソッドは単一のモデルとモデルのリストをそれぞれ受け入れます。 ajax 経由でパラメーターを渡します。

単一のパラメータを渡す場合、js コードは次のようになると仮定します。

コードをコピー

コードは次のとおりです:

var person = { 性別: true、
都市: " 上海"
};
var option = {、
成功：function（result）{lesult（result）}>
Chrome から次のスクリーンショットを確認できます:

渡されるデータはFormデータの文字列であり、名前一致の原理によりデータを取得することもできます。

オプションコードを次のように変更します

コードをコピー

コードは次のとおりです:var option = {

url: '/test /Readperson',

タイプ: 'POST',

データ: JSON.stringify(person),

dataType: 'html',

関数成功 (結果) { アラート(結果) ; } }; $.ajax(オプション); JSON.stringify メソッドのシグネチャは stringify ( value [ , replacer [ , space ] ] ) です。ECMA-262 標準に従って、stringify 関数は JSON 形式の文字列を返します。 3 つのパラメータを持つことができます。抜粋は次のとおりです: stringify 関数は、ECMAScript 値を表す JSON 形式の文字列を返します。最初のパラメーターは必須であり、通常はオブジェクトまたは配列です。ただし、オプションの replacer パラメータは、オブジェクトと配列の文字列化方法を変更する関数、またはオブジェクトを選択するためのホワイト リストとして機能する文字列と数値の配列のいずれかです。文字列化されるプロパティ。オプションのスペース パラメータは、人間が読みやすいように結果に空白を挿入できるようにする文字列または数値です。デフォルトの ContentType 属性値は「application/x-www-form-urlencoded」です。 " http://www.w3.org/TR/html401/interact/forms.html#adef-enctype から引用

リクエスト ヘッダーのスクリーンショットを見てください:








したがって、コントローラーに渡されるのは json 文字列であり、MVC は名前の一致に基づいてパラメーターの値を取得することもできます。

オプションコードを次のように変更します

コードをコピー

コードは次のとおりです:

var オプション = {
URL: '/test/Readperson'、
タイプ: 'POST'、
データ: person、
データ型: 'html'、
contentType: 'application/json',
成功: function (result) {alert(result) }

contentType を json 形式に変更すると、エラー メッセージが表示されます。
person は json オブジェクトですが、ajax と jquery 内のデータは自動的に key1=value1&key2=value2 というクエリ文字列形式に変換されます。明らかにこの形式は json 形式ではないため、エラーが発生します。
クエリ文字列形式への変換を回避するには、processData を fasle に設定するだけです。 processData のデフォルトは true です。
ここで注意する必要があるのは、contentType が指定されている場合、データはフォーム データの形式で送信されなくなり、リクエスト データの形式で送信されることです。画像のリクエスト ヘッダーから確認できます。なお、Form Data で送信されたデータは FormCollection で取得できます。リクエストデータによる送信は、FormCollection からは取得できません。
processData がデフォルト値 true に設定されている場合。

processData が false に設定されている場合。

上記 2 つのメソッドは、application/json タイプに従って渡されると失敗します。これは、json はテキストベースの形式であり、上記 2 つのメソッドで渡されるものは json テキストではないためです。それで何かがうまくいかないのです。

したがって、オプションを次のように変更します:

コードをコピー コードは次のとおりです:

var option = {
url: '/test /Readperson'、
タイプ: 'POST'、
データ:JSON.stringify(person)、
データタイプ: 'html'、
contentType: 'application/json'、
成功: 関数 (結果) { アラート (結果) }

;

は json テキストを渡すため、名前の一致に基づいて値を取得できます。

より単純なデータ型の場合、contentType を指定せずに名前付きマッチングを通じて値を渡すことができる場合があります。ただし、もう少し複雑なデータ型の場合は、contentType: 'application/json' を指定する方が便利な場合があります。

コントローラーのアクション メソッドが次のような List タイプのパラメーターを受け入れる場合:
public ActionResult ReadPersons(List model)
次に、最初に js でそのような json オブジェクトの配列を構築します。以下の通り

コードをコピー コードは次のとおりです:

var person = [{
id: "001",
都市: "上海"
: "21"、
性別: false、
都市: "北京"
}

単純な配列をデータとして渡すと、フォームデータを認識できません。したがって、この配列を再度 json 形式に変換します。 json のキー値は、コントローラー内のパラメータ名と同じで一致するようにモデルになっています。





コードをコピー

コードは次のとおりです。

var jsonp = {model:people };

var option = { url: '/test/Readpersons', type: 'POST', data: jsonp, dataType: 'html', 成功: function (結果) { アラート(結果) } };

contentType が指定されていないため、デフォルトの application/x-www-form-urlencoded になります。このとき、Form Data、

の形式で渡されます。





スクリーンショットから確認できます。ただし、この形式のデータの場合、コントローラーは指定されたモデルに対して 2 つの要素しか取得できず、要素内の属性の値を取得することはできません。

次のようにデータを JSON.stringify(jsonp) に変更する場合:

コードをコピー

コードは次のとおりです:

var option = {

/Readpersons ',

タイプ: 'POST',

データ: JSON.stringify(jsonp),

データタイプ: 'html', 成功: 関数 (結果) { アラート (結果) } }

渡されたフォームデータは文字列であるため、コントローラーはこれを認識できないため、値を取得できません。 contentType: 'application/json' のみを設定し、渡されたデータが json 形式ではない場合は、次のようになります。

渡されたフォームデータは文字列であるため、コントローラーはこれを認識できないため、値を取得できません。 contentType: 'application/json' のみを設定し、渡されたデータが json 形式ではない場合は、次のようになります。

コードをコピー コードは次のとおりです:

var option = {
url: '/test /ReadPersons',
タイプ: 'POST',
データ: jsonp,
データタイプ: 'html',
contentType: 'application/json',
成功: 関数 (結果) { アラート(結果) }

;

jqueryのajaxメソッドはデータをクエリ文字列に変換するので以下のようになります。このテキスト文字列は確かに json 形式に準拠していないため、次のエラーが発生します。

次のように contentType: 'application/json'、data: JSON.stringify(persons) を設定した場合:

コードをコピー コードは次のとおりです:

var option = {

url: '/test /ReadPersons'、
タイプ: 'POST'、
データ: JSON.stringify(persons)、
データタイプ: 'html'、
contentType: 'application /json'、
成功: 関数 (結果) { アラート (結果) }
};
これで、真に完全な JSON データを取得できます

最後に、理解を深めるために、より複雑なパラメーター タイプをここで示します。 まず、Controller、TestClassB、および TestClassA のリストのメソッド シグネチャを確認します。もう少し複雑です。

コードをコピーします

コードは次のとおりです。public ActionResult Fortest(TestClassB TB,List< TestClassA>TA ) RM TestClassA と TestClassB をもう一度見てみると、さらに複雑になっています。しかし、構造が明確であれば、それは難しくありません。

コードをコピー

コードは次のとおりです:

public class TestClassA
{
public string a1 { get; }
public List
}
public class TestClassB
{
パブリック文字列 b1 { セット; }
パブリック クラス InnerTestClassC { セット; }
}
}



js コードを見てください。徐々に json 形式を構築していきます。

コードをコピー コードは次のとおりです:$("#btn").click (function ( ) {

var jsondata = { TB: {}, TA: [] };

jsondata.TB.b1 = "b1";
jsondata.TB.ITCC = {};
jsondata.TB.ITCC.c1 = 新しい配列(1, 2, 3, 4);
ta1.a1 = "a1"; ("a ", "b", "x", "y");
var ta2 = {};
ta2.a2 = 新しい配列("a2") ", " b2 "," x2 ");
jsondata.ta.push (TA1);
jsondata.ta.push (ta2);
varked = {
url: '/test/ fortest' 、
タイプ: 'POST'、
データ: JSON.stringify(jsondata)、
データタイプ: 'html'、
contentType: 'application/json' 、
成功: 関数(結果) { アラート(結果) }
;

最後に、送信される json 文字列は次のとおりです:
{"TB":{"b1":"b1","ITCC":{"c1":[1,2,3,4]}} ,"TA":[{"a1":"a1","a2":["a","b","x","y"]},{"a1":"a2","a2" :["a2","b2","x2"]}]}
コントローラーはこの json 文字列を受信すると、パラメーターを自動的に照合できます。取得される具体的なパラメータは次のとおりです:

概要:

1. contentType が指定されていない場合、デフォルトで application/x-www-form-urlencoded によって送信されます。このときjson形式のデータを送信しても、デフォルトではjqueryのajaxがクエリ文字列の形式に変換し（ajaxのパラメータを変更することで変更可能）、FormDataの形式で送信します。
2. contentType が指定されていない場合、コントローラー内のメソッド シグネチャが比較的単純であれば、FormData 形式のデータでも MVC の名前一致規則によって取得できます。
3. contentType が「application/json」として指定されている場合、送信されるデータは json 仕様に準拠した文字列である必要があります。一般的には、JSON.stringify(jsondata) を使用した方が可読性が高く、json 文字列を取得できます。もちろん、その必要はありません。 json 仕様に準拠している限り、連結された文字列も送信できます。
4. contentType が「application/json」で、送信されたデータが json 仕様に準拠した文字列でない場合、エラーが発生します。
5. 通常の状況では、contentType を「application/json」として指定し、送信データとして json 文字列を送信してみてください。これにより、より読みやすくなり、複雑な関数のシグネチャとよく一致するようになります。

この記事は「One Blog」ブログからのものです