JQuery Tips: Method for passing additional parameters for AJAX callback Functions

With this example, we hope that the content of example.html will be retrieved using the method of ajax, and then the div of the page id = callbackdemo3 will be dynamically updated.
The HTML is as follows: Copy codeThe Code is as follows: <div id = "callbackdemo1">
<Button id = "button1"> ajax load1 </button> <br/>
</Div>
<Div id = "callbackdemo2">
<Button id = "button2"> ajax load2 </button> <br/>
</Div>
<Div id = "callbackdemo3" class = "log"> </div>
<Button onclick = "button ('.log'0000.html (''); "> clear </button>

First approach:
This method is applicable to the simplest scenario. It is also more intuitive to use the jQuery id selector $ ("# callbackdemo3") in the ajax callback function ″) obtain the div id callbackdemo3 and update its HTML content.Copy codeThe Code is as follows: $ ("# callbackdemo1> # button1"). click (
Function load (){
$. Get ("example.html", {'Param [] ': ["var1", "var2"]},
Function f1 (data, textStatus, XMLHttpRequest)
{
$ ("# Callbackdemo3" pai.html (data );
}
);
}
);

Method 2:
Define a callback function that accepts additional parameters, and then call this predefined callback function in the content of the default callback function.
In this way, the purpose of passing additional parameters can be achieved. Compared with the first method, this method can easily use the context of each callback function.Copy codeThe Code is as follows: function callback_with_extraParam (data, param)
{
Param.html (data );
}
$ ("# Callbackdemo2> # button2"). click (
Function load (){
Var extraParam = $ ("# callbackdemo3 ")
$. Get ("example.html", {'Param [] ': ["var1", "var2"]},
Function f2 (data)
{
Callback_with_extraParam (data, extraParam );
}
);
}
);

For the importance of extra parameters, let's look at a slightly more complex HTML situation. We want to update the html of the div below button3. This div does not have an id. What should we do?Copy codeThe Code is as follows: <div id = "callback_complexdemo">
<Button id = "button3"> ajax load3 </button> <br/>
<Button onclick = "button ('div', certificate (this).closest('div'{}.html (''); "> clear </button> <br/>
<Div> </div>
</Div>

Of course, you can use # callback_complexdemo> div, but what if it is a more complex HTML page? What if no id = callback_complexdemo? Deep nesting?
In this case, we need to effectively use the context parameter feature.
In the click event processing function load (), we can easily obtain the location of the current element var whereAmI =$ (this );
This whereAmI is a jQuery object, and in the AJAX callback function f3, we use the button in the whereAmI to find a way to obtain the expected div.
Some new users cannot understand this line of code: $ ('div ', $ (whereAmI). closest ('div '))
First, $ closest_parent_div = $ (whereAmI). closest ('div ') queries to obtain the parent div object closest to whereAmI.
Then $ ('div ', $ closest_parent_div) searches for internal div objects in the context of the nearest parent div object.Copy codeThe Code is as follows: $ ("# callback_complexdemo> # button3"). click (
Function load (){
Var whereAmI = $ (this );
$. Get ("example.html", {'Param [] ': ["var1", "var2"]},
Function f3 (data)
{
Console. log (whereAmI );
Certificate ('div', certificate (whereami%.closest('div'%}.html (data );
}
);
}
);

We hope that this small example will allow you to learn how to pass additional parameters and practical and important context parameters to the AJAX callback function.