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 () 형식을 사용하는 것을 선호합니다 (특히 좋은 이유는 없습니다-개인적인 취향).

09/04/2013 편집 :

내 질문이 닫힌 후 ( "너무 현지화 됨") 관련 (동일한) 질문을 찾았습니다. 3 개의 공감대가 있습니다 (처음에는 그것을 찾지 못하는 것이 좋지 않습니다).

jquery를 사용하여 POST를 만들 때 'data'매개 변수를 올바르게 제공하는 방법은 무엇입니까?

이것은 내 질문에 완벽하게 대답했습니다.이 방법을 사용하면 훨씬 쉽게 읽을 수 encodeURIComponent()있으며 URL 또는 DATA 값에서 수동으로 사용할 필요가 없습니다 (bipen의 대답에서 명확하지 않은 것으로 나타났습니다). 이는 ) 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은 $ .ajax의 바로 가기입니다
Denys Séguret

단, 편집 09/04/2013은 게시 요청 :-)이지만 GET과 동일하게 작동합니다.
commonpike

답변:


307

아약스의 데이터 옵션을 사용하십시오. dataajax의 옵션으로 데이터 객체를 서버에 보낼 수 있으며 , type이는 객체를 보내는 방법을 정의합니다 ( POST또는 GET). 기본 유형은 GETmethod입니다

이 시도

$.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가 당신을 위해 이것을 할 것입니다.
Lane

2
@KlwWallace Nope. PHP (서버 측)는 사용중인 서블 사이드 언어에 달려 있습니다. PHP에서는 get request 값을 얻는 방법입니다.
bipen

1
@ 비펜. 알 겠어. 다른 사람을 혼동하지 않도록 내 의견을 삭제했습니다. 고마워.
커비 L. 월리스

jQuery.param () 함수를 사용하여 객체를 GET 매개 변수로 변환해야하므로 jQuery를 사용하는 data:$.param({ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress})대신 다음을 사용해야합니다 .data: { ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress }
Power Engineering

22

전화 의 data일부에 당신의 매개 변수를 넣어 ajax. 문서를 참조하십시오 . 이렇게 :

$.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

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

세상에, 고마워 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.