$ ajax POSTでパラメーターを渡す方法は？

このリンクに記載されているチュートリアルに従いました。以下のコードでは、何らかの理由でデータがパラメーターとしてURLに追加されていませんが、それを使用してURLに直接設定する/?field1="hello"と機能します。

$.ajax({
        url: 'superman',
        type: 'POST',
        data: { field1: "hello", field2 : "hello2"} ,
        contentType: 'application/json; charset=utf-8',
        success: function (response) {
            alert(response.status);
        },
        error: function () {
            alert("error");
        }
    }); 

簡単なケースではjQuery の$.postor $.get構文を使用することをお勧めします。

$.post('superman', { field1: "hello", field2 : "hello2"}, 
    function(returnedData){
         console.log(returnedData);
});

失敗のケースをキャッチする必要がある場合は、次のようにします。

$.post('superman', { field1: "hello", field2 : "hello2"}, 
    function(returnedData){
         console.log(returnedData);
}).fail(function(){
      console.log("error");
});

さらに、常にJSON文字列を送信する場合は、最後にもう1つのパラメーターを指定して$ .getJSONまたは$ .postを使用できます。

$.post('superman', { field1: "hello", field2 : "hello2"}, 
     function(returnedData){
        console.log(returnedData);
}, 'json');

GETメソッドを使用してみてください。

var request = $.ajax({
    url: 'url',
    type: 'GET',
    data: { field1: "hello", field2 : "hello2"} ,
    contentType: 'application/json; charset=utf-8'
});

request.done(function(data) {
      // your success code here
});

request.fail(function(jqXHR, textStatus) {
      // your failure code here
});

POSTメソッドを使用してURLにパラメーターを表示することはできません。

編集：

非推奨の通知： jqXHR.success（）、jqXHR.error（）、およびjqXHR.complete（）コールバックは、jQuery 3.0以降では削除されています。代わりに、jqXHR.done（）、jqXHR.fail（）、およびjqXHR.always（）を使用できます。

Jquery.ajaxは、GETデータの場合とは異なり、 POSTデータを自動的にエンコードしません。jqueryは、データがリクエストの本文に追加されるように事前にフォーマットされ、ネットワーク経由で直接送信されることを期待しています。

解決策は、jQuery.param関数を使用して、POST要求を処理するほとんどのスクリプトが予期するクエリ文字列を作成することです。

$.ajax({
    url: 'superman',
    type: 'POST',
    data: jQuery.param({ field1: "hello", field2 : "hello2"}) ,
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    success: function (response) {
        alert(response.status);
    },
    error: function () {
        alert("error");
    }
}); 

この場合、paramメソッドはデータを次のようにフォーマットします。

field1=hello&field2=hello2

Jquery.ajaxのドキュメントと呼ばれるフラグがあることを述べているprocessData。このエンコーディングが自動的にか行われているかどうかをそのコントロールが。ドキュメントでは、デフォルトでに設定されていると記載されていますが、を使用したtrue場合の動作ではありませんPOST。

    function FillData() {
    var param = $("#<%= TextBox1.ClientID %>").val();
    $("#tbDetails").append("<img src='Images/loading.gif'/>");
    $.ajax({
        type: "POST",/*method type*/
        contentType: "application/json; charset=utf-8",
        url: "Default.aspx/BindDatatable",/*Target function that will be return result*/
        data: '{"data":"' + param + '"}',/*parameter pass data is parameter name param is value */
        dataType: "json",
        success: function(data) {
               alert("Success");
            }
        },
        error: function(result) {
            alert("Error");
        }
    });   
}

ではPOSTリクエスト、パラメータはURLでそれらを見ていない理由ですリクエストのボディに送信されます。

それらを見たい場合は、変更してください

    type: 'POST',

に

    type: 'GET',

ブラウザには、コードが発行する完全なリクエストを確認できる開発ツールがあることに注意してください。Chromeでは、[ネットワーク]パネルにあります。

$.ajax(
   {
      type: 'post',
      url: 'superman',
      data: { 
        "field1": "hello",
        "field2": "hello1"
      },
      success: function (response) {
        alert("Success !!");
      },
      error: function () {
        alert("Error !!");
      }
   }
);

type: 'POST'**パラメータを追加しますされたリクエスト**の身体に見られないでURLながら type: 'GET'、あるURLにパラメータを追加見えます。

一般的なWebブラウザのほとんどには、完全なリクエストを表示するネットワークパネルが含まれています。

ネットワークパネルでXHRを選択してリクエストを表示します。

これはこれを介して行うこともできます。

$.post('superman',
      { 
        'field1': 'hello', 
        'field2': 'hello1'
      },
      function (response) {
        alert("Success !");
      }
    );

$ .ajaxまたは$ .postを使用してそれを行うことができます

$ .ajaxの使用：

    $.ajax({
      type: 'post',
      url: 'superman',
      data: { 
        'field1': 'hello', 
        'field2': 'hello1'
      },
      success: function (response) {
        alert(response.status);
      },
      error: function () {
        alert("error");
      }
   });

$ .postの使用：

    $.post('superman',
      { 
        'field1': 'hello', 
        'field2': 'hello1'
      },
      function (response, status) {
        alert(response.status);
      }
    );

JSONキーを文字列として渡していないことを除いて、あなたのコードは正しかったです。

二重引用符または一重引用符で囲む必要があります

{"field1"： "hello"、 "field2"： "hello2"}

$.ajax(
   {
      type: 'post',
      url: 'superman',
      data: { 
        "field1": "hello", // Quotes were missing
        "field2": "hello1" // Here also
      },
      success: function (response) {
        alert(response);
      },
      error: function () {
        alert("error");
      }
   }
);

POSTメソッドのurlの送信パラメータの場合次のようにして、URLに単純に追加できます。

$.ajax({
    type: 'POST',
    url: 'superman?' + jQuery.param({ f1: "hello1", f2 : "hello2"}),
    // ...
});