Specifically to this example, we would like Button1 and Button2 to click on the Ajax way to fetch example.html content, and then dynamically update the page's Id=callbackdemo3 div
HTML is as follows:
Copy Code code 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= "$ ('. log '). html (');" >clear</button>
The first approach:
For the simplest case, it's also a straightforward practice to update the HTML content of a div with the ID selector $ ("#callbackdemo3 ″") in the Ajax callback function, with the IDs Callbackdemo3.
Copy Code code as follows:
$ ("#callbackdemo1 > #button1"). Click (
function Load () {
$.get ("example.html", {' param[] ': ["var1", "Var2"]},
function f1 (data, textstatus, XMLHttpRequest)
{
$ ("#callbackdemo3"). HTML (data);
}
);
}
);
The second approach:
Defines a callback function that accepts extra parameters, and then calls this predefined callback function in the contents of the default callback function
This allows for the purpose of passing additional parameters, and this method makes it easier to take advantage of the context of each callback function compared to the first method.
Copy Code code 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 additional parameters, look at a slightly more complex HTML situation, we want to update the button3 below the DIV's HTML, this div has no ID, then how to do?
Copy Code code as follows:
<div id= "Callback_complexdemo" >
<button id= "Button3" >ajax load3</button><br/>
<button onclick= "$ (' div ', $ (this). Closest (' div ')). html (');" >clear</button><br/>
<div></div>
</div>
Of course it's OK to use #callback_complexdemo>div, but what if it's a more complicated HTML page? What if there's no id=callback_complexdemo? Deep nesting?
In this case, we need to effectively use the context parameter this feature.
In the Click event handling function load (), we can easily get the current element's position var Whereami = $ (this);
This Whereami is a jquery object, and then in the Ajax callback function F3, we use Whereami to get the desired div from the button in the dot.
This line of code is a novice who can't read: $ (' div ', $ (Whereami). Closest (' div '))
First $closest_parent_div = $ (Whereami). Closest (' div ') is the query to get Whereami nearest parent div Object
Then $ (' div ', $closest _parent_div) finds the inner div object in this context of the nearest parent Div object
Copy Code code as follows:
$ ("#callback_complexdemo > #button3"). Click (
function Load () {
var Whereami = $ (this);
$.get ("example.html", {' param[] ': ["var1", "Var2"]},
function F3 (data)
{
Console.log (Whereami);
$ (' div ', $ (Whereami). Closest (' div ')). HTML (data);
}
);
}
);
Hopefully, this small example will allow you to learn how to pass extra parameters to Ajax callback functions, as well as practical and important context parameters.
