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 Arrow 기능을 사용하면 다음과 같습니다.
callbackReceiver(value => callback(value, "Foo Bar")); // "Hello World", "Foo Bar"
예에 하지 않았습니다..postjQuery에서는 기능하지만 매뉴얼을 빠르게 스캔하면 콜백이 다음 시그니처를 가진 함수 포인터임을 알 수 있습니다.
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시간 동안 매우 유사한 코드를 작성했으며, 설명한 대로 작동합니다.
물론 개인 선호도/코딩 표준에 따라 단일 '기타 Stuff' 개체 대신 여러 변수를 전달할 수 있습니다.
「」를 사용하고 doSomething(data, myDiv)함수는 실제로 호출하지만 참조는 하지 않습니다.
할 수 요.doStomething직접 동작하지만 올바른 서명이 있는지 확인해야 합니다.
현재 상태를 유지하려면 해당 호출을 익명 함수로 래핑할 수 있습니다.
function clicked() {
var myDiv = $("#my-div");
$.post("someurl.php",someData, function(data){
doSomething(data, myDiv)
},"json");
}
function doSomething(curData, curDiv) {
...
}
익명 함수 코드 내에서는 동봉된 범위에서 정의된 변수를 사용할 수 있습니다.Javascript 스코핑은 이렇게 동작합니다.
특히 if, 이, 이, 이, 이를 사용하는 $.ajax({})★★★★★★★와 ★★★★★★★★★★★★★★★★★★★★★★★★★★
해 주세요.key: valueajax 요청을 설정할 때 다른 개체와 마찬가지로 쌍을 이룹니다.(아직 콘텍스트가 변경되지 않았기 때문에 위의 바인드콜의 트리거가 됩니다).
<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 콜을 트리거할 수 있는 것이 2개 있는 경우 이론적으로 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? $.199 콜의 성공 콜백에 추가 파라미터를 전달하시겠습니까?
다음과 같은 작업을 수행할 수도 있습니다.
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
}
});
jQuery API 및 closes를 사용하여 비동기 요구를 전송하고 추가 파라미터를 콜백 함수에 전달하기 위한 보다 일반적인 솔루션:
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);
});
};
Javascript와 지 안 된은 Javascript입니다.
에는 '오빠'는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-- 、 agax - 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);
$.120에 대한 자세한 내용은http://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
'programing' 카테고리의 다른 글
| 하이버네이트 HQL 결과를 사용하여 타입 안전 경고를 회피하는 방법 (0) | 2023.01.24 |
|---|---|
| MySQL의 디스크 읽기 속도 저하 INSERT (0) | 2023.01.24 |
| 어레이를 SimpleX로 변환하는 방법ML (0) | 2023.01.24 |
| IPython 서브모듈 새로고침 (0) | 2023.01.24 |
| MySQLworkbench 연결 인코딩을 UTF8로 설정하는 방법 (0) | 2023.01.24 |