jQuery는 더 많은 매개 변수를 콜백에 전달
jQuery에서 더 많은 데이터를 콜백 함수에 전달하는 방법이 있습니까?
나는 두 개의 함수를 가지고 있으며 $.post, 예를 들어 AJAX 호출의 결과 데이터와 몇 가지 사용자 정의 인수를 모두 전달하기 위해 콜백을 원합니다.
function clicked() {
var myDiv = $("#my-div");
// ERROR: Says data not defined
$.post("someurl.php",someData,doSomething(data, myDiv),"json");
// ERROR: Would pass in myDiv as curData (wrong)
$.post("someurl.php",someData,doSomething(data, myDiv),"json");
}
function doSomething(curData, curDiv) {
}
AJAX 호출에서 반환 된 결과뿐만 아니라 자체 매개 변수를 콜백에 전달할 수 있기를 원합니다.
해결책은 클로저를 통한 변수 바인딩입니다.
보다 기본적인 예로, 콜백 함수와 콜백 함수를 수신하고 호출하는 함수 예는 다음과 같습니다.
function callbackReceiver(callback) {
callback("Hello World");
}
function callback(value1, value2) {
console.log(value1, value2);
}
콜백을 호출하고 단일 인수를 제공합니다. 이제 추가 인수를 제공하여 콜백을 닫습니다.
callbackReceiver(callback); // "Hello World", undefined
callbackReceiver(function(value) {
callback(value, "Foo Bar"); // "Hello World", "Foo Bar"
});
또는 ES6 화살표 함수 를 사용하는 것이 더 간단합니다 .
callbackReceiver(value => callback(value, "Foo Bar")); // "Hello World", "Foo Bar"
귀하의 특정 예에 관해서 .post는 jQuery 에서 함수를 사용하지 않았지만 설명서를 빠르게 스캔하면 콜백 이 다음 서명 이있는 함수 포인터 여야 함을 나타냅니다 .
function callBack(data, textStatus, jqXHR) {};
따라서 해결책은 다음과 같습니다.
var doSomething = function(extraStuff) {
return function(data, textStatus, jqXHR) {
// do something with extraStuff
};
};
var clicked = function() {
var extraStuff = {
myParam1: 'foo',
myParam2: 'bar'
}; // an object / whatever extra params you wish to pass.
$.post("someurl.php", someData, doSomething(extraStuff), "json");
};
무슨 일이야?
마지막 줄에서 doSomething(extraStuff)됩니다 호출 하고 호출의 결과는 인 함수 포인터 .
extraStuff인수로 전달 되므로 함수 doSomething범위 내에 doSomething있습니다.
extraStuff반환 된 익명의 내부 함수에서 참조 되면 doSomething외부 함수의 extraStuff인수 에 대한 클로저로 바인딩됩니다 . doSomething돌아온 후에도 마찬가지 입니다.
위의 테스트를 수행하지는 않았지만 지난 24 시간 동안 매우 유사한 코드를 작성했으며 설명한대로 작동합니다.
물론 개인 선호도 / 코딩 표준에 따라 단일 'extraStuff'객체 대신 여러 변수를 전달할 수 있습니다.
를 사용할 때 doSomething(data, myDiv)실제로 함수를 호출하고 참조하지 않습니다.
doStomething함수를 직접 전달할 수 있지만 올바른 서명이 있는지 확인해야합니다.
doSomething을 그대로 유지하려면 익명 함수로 호출을 래핑 할 수 있습니다.
function clicked() {
var myDiv = $("#my-div");
$.post("someurl.php",someData, function(data){
doSomething(data, myDiv)
},"json");
}
function doSomething(curData, curDiv) {
...
}
익명 함수 코드 내에서 엔 클로징 범위에 정의 된 변수를 사용할 수 있습니다. 이것이 자바 스크립트 범위 지정 방식입니다.
실제로 모든 사람이 소리를내는 것보다 쉽습니다. 특히 $.ajax({})기본 구문과 도우미 함수 중 하나 를 사용하는 경우 특히 그렇습니다 .
key: value아약스 요청을 설정할 때 어떤 객체에서와 같이 쌍을 전달 하면됩니다 ( $(this)아직 컨텍스트가 변경되지 않았기 때문에 위의 바인드 호출에 대한 트리거입니다)
<script type="text/javascript">
$(".qty input").bind("keypress change", function() {
$.ajax({
url: "/order_items/change/"+$(this).attr("data-order-item-id")+"/qty:"+$(this).val()+"/returnas.json",
type: "POST",
dataType: "json",
qty_input: $(this),
anything_else_i_want_to_pass_in: "foo",
success: function(json_data, textStatus, jqXHR) {
/* here is the input, which triggered this AJAX request */
console.log(this.qty_input);
/* here is any other parameter you set when initializing the ajax method */
console.log(this.anything_else_i_want_to_pass_in);
}
});
});
</script>
이것이 var를 설정하는 것보다 좋은 이유 중 하나는 var가 전역 적이며 덮어 쓸 수 있기 때문입니다 ... 아약스 호출을 트리거 할 수있는 두 가지가 있다면 이론적으로 ajax 호출 응답보다 빠르게 트리거 할 수 있습니다. 두 번째 통화의 값이 첫 번째 통화로 전달됩니다. 위의이 방법을 사용하면 발생하지 않습니다 (사용하기도 매우 간단합니다).
오늘날의 세상에는 더 깔끔하고 또 다른 스택 오버플로 답변에서 가져온 또 다른 답변이 있습니다.
function clicked()
{
var myDiv = $( "#my-div" );
$.post( "someurl.php", {"someData": someData}, $.proxy(doSomething, myDiv), "json" );
}
function doSomething( data )
{
// this will be equal to myDiv now. Thanks to jQuery.proxy().
var $myDiv = this;
// doing stuff.
...
}
다음은 원래 질문과 답변입니다. jQuery HOW TO ?? $ .ajax 호출에 대한 추가 매개 변수를 성공 콜백에 전달합니까?
다음과 같은 것을 시도해 볼 수도 있습니다.
function clicked() {
var myDiv = $("#my-div");
$.post("someurl.php",someData,function(data){
doSomething(data, myDiv);
},"json");
}
function doSomething(curData, curDiv) {
}
JavaScript를 닫을 수 있습니다.
function wrapper( var1, var2,....) // put here your variables
{
return function( data, status)
{
//Handle here results of call
}
};
할 수있는시기 :
$.post("someurl.php",data,wrapper(var1, var2, etc...),"html");
마지막 게시물에서 실수를했습니다. 콜백 함수에서 추가 인수를 전달하는 방법에 대한 실제 예제입니다.
function custom_func(p1,p2) {
$.post(AJAX_FILE_PATH,{op:'dosomething',p1:p1},
function(data){
return function(){
alert(data);
alert(p2);
}(data,p2)
}
);
return false;
}
간단하게 갑시다! :)
$.ajax({
url: myUrl,
context: $this, // $this == Current $element
success: function(data) {
$.proxy(publicMethods.update, this)(data); // this == Current $element
}
});
.ajax()jQuery API 및 클로저를 사용하여 비동기 요청을 보내 콜백 함수에 추가 매개 변수를 전달 하는보다 일반적인 솔루션 :
function sendRequest(method, url, content, callback) {
// additional data for the callback
var request = {
method: method,
url: url
};
$.ajax({
type: method,
url: url,
data: content
}).done(function(data, status, xhr) {
if (callback) callback(xhr.status, data, request);
}).fail(function(xhr, status) {
if (callback) callback(xhr.status, xhr.response, request);
});
};
나, 그냥 자바 스크립트와 접촉 한 다른 초보자의 경우,
나는이 생각 Closeure Solution이 너무 혼란의 작은 종류이다.
내가 찾은 동안 jquery를 사용하여 모든 ajax 콜백에 원하는만큼 많은 매개 변수를 전달할 수 있습니다.
다음은 더 쉬운 솔루션 입니다.
@zeroasterisk 가 위에서 언급 한 첫 번째 예는 다음과 같습니다.
var $items = $('.some_class');
$.each($items, function(key, item){
var url = 'http://request_with_params' + $(item).html();
$.ajax({
selfDom : $(item),
selfData : 'here is my self defined data',
url : url,
dataType : 'json',
success : function(data, code, jqXHR){
// in $.ajax callbacks,
// [this] keyword references to the options you gived to $.ajax
// if you had not specified the context of $.ajax callbacks.
// see http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings context
var $item = this.selfDom;
var selfdata = this.selfData;
$item.html( selfdata );
...
}
});
});
두 번째 XHR object는 전체 Ajax-request-response 수명에 존재하는 데이터를 추가하여 자체 정의 데이터를 전달하는 것 입니다.
var $items = $('.some_class');
$.each($items, function(key, item){
var url = 'http://request_with_params' + $(item).html();
$.ajax({
url : url,
dataType : 'json',
beforeSend : function(XHR) {
// 为了便于回调，把当前的 jquery对象集存入本次 XHR
XHR.selfDom = $(item);
XHR.selfData = 'here is my self defined data';
},
success : function(data, code, jqXHR){
// jqXHR is a superset of the browser's native XHR object
var $item = jqXHR.selfDom;
var selfdata = jqXHR.selfData;
$item.html( selfdata );
...
}
});
});
보시다시피이 두 솔루션에는 다음과 같은 단점이 있습니다. 작성하는 것보다 조금 더 많은 코드를 작성해야합니다.
$.get/post (url, data, successHandler);
$ .ajax에 대해서 더 읽어보세요 : http://api.jquery.com/jquery.ajax/
누군가가 여전히 여기 온다면, 이것은 나의 테이크입니다 :
$('.selector').click(myCallbackFunction.bind({var1: 'hello', var2: 'world'}));
function myCallbackFunction(event) {
var passedArg1 = this.var1,
passedArg2 = this.var2
}
콜백 함수에 바인딩 한 후 여기서 발생하는 것은 함수 내에서로 사용할 수 있습니다 this.
이 아이디어는 React가 bind기능을 사용하는 방법에서 나옵니다 .
$(document).on('click','[action=register]',function(){
registerSocket(registerJSON(),registerDone,second($(this)));
});
function registerSocket(dataFn,doneFn,second){
$.ajax({
type:'POST',
url: "http://localhost:8080/store/public/register",
contentType: "application/json; charset=utf-8",
dataType: "json",
data:dataFn
}).done ([doneFn,second])
.fail(function(err){
console.log("AJAX failed: " + JSON.stringify(err, null, 2));
});
}
function registerDone(data){
console.log(JSON.stringify(data));
}
function second(element){
console.log(element);
}
이차 방법 :
function socketWithParam(url,dataFn,doneFn,param){
$.ajax({
type:'POST',
url:url,
contentType: "application/json; charset=utf-8",
headers: { 'Authorization': 'Bearer '+localStorage.getItem('jwt')},
data:dataFn
}).done(function(data){
doneFn(data,param);
})
.fail(function(err,status,xhr){
console.log("AJAX failed: " + JSON.stringify(err, null, 2));
});
}
$(document).on('click','[order-btn]',function(){
socketWithParam(url,fakeDataFn(),orderDetailDone,secondParam);
});
function orderDetailDone(data,param){
-- to do something --
}
실제로 코드를 작성할 때 코드가 작동하지 않습니다.
$.post("someurl.php",someData,doSomething(data, myDiv),"json");
함수 참조 대신 함수 호출 을 세 번째 매개 변수로 배치합니다 .
b01의 답변에 대한 부록으로 두 번째 인수 $.proxy는 종종 this참조 를 유지하는 데 사용됩니다 . 전달 된 추가 인수 $.proxy는 함수에 부분적으로 적용되어 데이터로 미리 채워집니다. $.post콜백에 전달 되는 모든 인수 는 끝에 적용되므로 doSomething인수 목록 끝에 인수가 있어야합니다.
function clicked() {
var myDiv = $("#my-div");
var callback = $.proxy(doSomething, this, myDiv);
$.post("someurl.php",someData,callback,"json");
}
function doSomething(curDiv, curData) {
//"this" still refers to the same "this" as clicked()
var serverResponse = curData;
}
이 방법을 사용하면 여러 인수를 콜백에 바인딩 할 수도 있습니다.
function clicked() {
var myDiv = $("#my-div");
var mySpan = $("#my-span");
var isActive = true;
var callback = $.proxy(doSomething, this, myDiv, mySpan, isActive);
$.post("someurl.php",someData,callback,"json");
}
function doSomething(curDiv, curSpan, curIsActive, curData) {
//"this" still refers to the same "this" as clicked()
var serverResponse = curData;
}
참고 URL : https://stackoverflow.com/questions/939032/jquery-pass-more-parameters-into-callback
'IT story' 카테고리의 다른 글
| angularjs (1.x)를 사용하여 HTML 요소의 id 속성을 동적으로 설정하는 방법은 무엇입니까? (0) | 2020.04.04 |
|---|---|
| 파이썬 함수 전역 변수? (0) | 2020.04.04 |
| Swift에서 willSet 및 didSet의 목적은 무엇입니까? (0) | 2020.04.04 |
| Node.js 웹 애플리케이션에서 MongoDB 연결을 어떻게 관리합니까? (0) | 2020.04.04 |
| Java에서 사용자 홈 디렉토리를 찾는 가장 좋은 방법은 무엇입니까? (0) | 2020.04.04 |