can achieve the same effect, this example is relatively simple, for beginners to learn jquery ajax function of a friend still have some help, and more to do their own to try
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>ajax_load.html</title>
<body>
<H2 style= "color: #FF0000" > I am Liyun, jquery is very useful! </body>
JQuery AJAX, you can load the remote data directly into the selected HTML element of the Web page.
Jquery Ajax commonly used three kinds of functions, respectively:
$.post (Url,data,callback,type): Use HTTP post to load remote data;
$.get (Url,data,callback,type): Use HTTP get to load remote data;
$.ajax (options): Load the remote data into the XMLHttpRequest object;
If you need to know more about the above three Ajax functions, refer to my Blog "jQuery AJAX functions in detail and instance applications."
HTML code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> use Ajax post, get, or Ajax methods to change HTML content </title>
<script type= "text/web Effects" src= "Jquery-1.6.1.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#button"). Click (function () {
The Post method asynchronously obtains the contents of the Ajax_load.html file and displays it on the current page:
/*
$.post ("ajax_load.html", function (data) {
alert (data);
$ ("#changeCon"). HTML (data);
});
*/
The Get method asynchronously obtains the contents of the Ajax_load.html file and displays it on the current page:
/*
$.get ("ajax_load.html", function (data) {
$ ("#changeCon"). HTML (data);
});
*/
The Ajax method asynchronously obtains the contents of the Ajax_load.html file and displays it on the current page:
$.ajax ({
URL: "Ajax_load.html",
Async:false,
Success:function (data)
{
$ ("#changeCon"). HTML (data);
}
})
});
})
</script>
<body>
<div id= "Changecon" ><input type= "button" id= "button" value= "click Me"/>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
