jQueryを使用してGETリクエストでパラメーターを渡す方法


252

jQuery Ajaxリクエストでクエリ文字列値をどのように渡す必要がありますか?現在は次のようにしていますが、手動でエンコードする必要がない、よりクリーンな方法があると確信しています。

$.ajax({
    url: "ajax.aspx?ajaxid=4&UserID=" + UserID + "&EmailAddress=" + encodeURIComponent(EmailAddress),
    success: function(response) {
        //Do Something
    },
    error: function(xhr) {
        //Do Something to handle error
    }
});

クエリ文字列パラメーターが配列として渡される例を見てきましたが、見たこれらの例では$.ajax()モデルを使用せず、代わりにに直接アクセスし$.get()ます。例えば:

$.get("ajax.aspx", { UserID: UserID , EmailAddress: EmailAddress } );

$ .ajax()形式を使用することを好みます。これは、慣れていることです(特に理由はありません。個人的な好みだけです)。

2013年4月9日の編集:

私の質問が(「ローカライズされた」として)閉じられた後、私は関連する(同一の)質問を見つけました-3つの賛成投票で間違いはありません(最初の場所で見つからなかったのが私の悪い点です):

jqueryを使用してPOSTを作成し、「データ」パラメータを適切に提供するにはどうすればよいですか?

これは私の質問に完全に回答しました。この方法で読む方がはるかに読みやすくencodeURIComponent()、URLまたはDATA値で手動で使用する必要がないことがわかりました(バイペンの回答で不明確だったものです)。これは、data値が$.param())を介して自動的にエンコードされるためです。これが他の誰かに役立つ可能性がある場合に備えて、これは私が行った例です:

$.ajax({
    url: "ajax.aspx?ajaxid=4",
    data: { 
        "VarA": VarA, 
        "VarB": VarB, 
        "VarC": VarC
    },
    cache: false,
    type: "POST",
    success: function(response) {

    },
    error: function(xhr) {

    }
});

$に.getは$アヤックスのためだけのショートカットです
デニス・Séguret

ただし、2013年9月4日の編集は投稿リクエストです:-)が、GETと同じように機能します。
commonpike 2017

回答:


307

ajaxのデータオプションを使用します。dataajaxのオプションによってデータオブジェクトをサーバーに送信でき、typeは送信方法を定義します(POSTまたはGET)。デフォルトのタイプはGETメソッドです

これを試して

$.ajax({
  url: "ajax.aspx",
  type: "get", //send it through get method
  data: { 
    ajaxid: 4, 
    UserID: UserID, 
    EmailAddress: EmailAddress
  },
  success: function(response) {
    //Do Something
  },
  error: function(xhr) {
    //Do Something to handle error
  }
});

(PHPを使用している場合)によってデータを取得できます

 $_GET['ajaxid'] //gives 4
 $_GET['UserID'] //gives you the sent userid

aspxでは、私はそれが(間違っているかもしれない)と信じています

 Request.QueryString["ajaxid"].ToString(); 

2
あなたは必要ありませんencodeURIComponent。jqueryがこれを行います。
レーン

2
@KlwWallaceいいえ。これは、PHP(サーバーサイド)が、使用しているサーバーサイド言語によって異なります。PHPでは、それがgetリクエストの値を取得する方法です。
bipen

1
@bipen。了解。誰も混乱しないようにコメントを削除しました。どうも。
カービーL.ウォレス

jQuery.param()関数を使用してオブジェクトをGETパラメータに変換する必要があるためdata:$.param({ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress})、代わりにjQueryを使用する必要がありますdata: { ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress }
Power Engineering

22

呼び出しのdata一部にパラメーターを配置しajaxます。docsを参照してください。そのようです:

$.ajax({
    url: "/TestPage.aspx",
    data: {"first": "Manu","Last":"Sharma"},
    success: function(response) {
        //Do Something
    },
    error: function(xhr) {
        //Do Something to handle error
    }
});

10

jQueryを使用した構文は次のとおりです $.get

$.get(url, data, successCallback, datatype)

だからあなたの場合、それは

var url = 'ajax.asp';
var data = { ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress };
var datatype = 'jsonp';

function success(response) {
// do something here 
}

$.get('ajax.aspx', data, success, datatype)

注で $.getは、エラーハンドラを設定することはできません。しかし、それを行うには、いくつかの方法は、いずれかを使用してあります$ .ajaxSetup() $ .ajaxErrorを()または連鎖を.failあなたに$.get以下のような

$.get(url, data, success, datatype)
 .fail(function(){
})

データ型を「jsonp」として設定する理由は、ブラウザの同じ生成元ポリシーの問題によるものですが、JavaScriptがホストされているのと同じドメインでリクエストを行う場合は、データ型をに設定して問題ないはずjsonです。

あなたはjqueryのを使用しない場合は$.get、その後のドキュメントを参照するために$.ajax、より多くの柔軟性の余地を可能にします


4

これを追加してみてください:

$.ajax({
    url: "ajax.aspx",
    type:'get',
    data: {ajaxid:4, UserID: UserID , EmailAddress: encodeURIComponent(EmailAddress)},
    dataType: 'json',
    success: function(response) {
      //Do Something
    },
    error: function(xhr) {
    //Do Something to handle error
    }
});

期待されるデータ型に応じて、割り当てることができます html, json, script, xml


あなたの解決策は役に立ちますが、変数IDとして渡す前に変数()をどのように定義するのか疑問に思いますか?SOに関するQがあります。stackoverflow.com/ questions / 41192531 / … です。私はこのQをさらに進め、jqueryダイアログを呼び出してajaxを呼び出し、mysqlからデータを取得しました。各データポイントのクリックに関連付けられた一意のIDを取得する方法に関するリンクがありません。あなたが私を助けることができれば感謝します。ありがとう
user5249203 2016

1

dataプロパティを使用すると、文字列を送信できます。サーバー側のコードで、それを文字列引数名「myVar」として受け入れれば、解析できます。

$.ajax({
    url: "ajax.aspx",
    data: [myVar = {id: 4, email: 'emailaddress', myArray: [1, 2, 3]}];
    success: function(response) {
    //Do Something
    },
    error: function(xhr) {
    //Do Something to handle error
    }
});

1
なぜあなたはそうしstringifyますか?jQueryのajax実装がそれを処理します。
Steve

1

私が指定したのと同じ問題がありましたdataが、ブラウザはで終わるURLにリクエストを送信していました[Object object]

processData設定する必要がありtrueます。

processData: true, // You should comment this out if is false or set to true

OMG、ありがとう。4時間の検索と試行の結果、最終的にここの問題が修正されました:-)
Kim K.


-1

ajaxメソッドのdataパラメーターを使用すると、サーバー側にデータを送信できます。サーバー側では、データを要求できます。コードを参照してください

var id=5;
$.ajax({
    type: "get",
    url: "url of server side script",
    data:{id:id},
    success: function(res){
        console.log(res);
    },
error:function(error)
{
console.log(error);
}
});

サーバー側では、$ _ GET変数を使用してそれを受け取ります。

$_GET['id'];
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.