Home > Developer > Web Develop
Use of the Load method (not used now)
<!doctype html>
<meta charset= "UTF-8" >
<title>demo</title>
<!--introducing jquery--
<script src= "Jquery.js" ></script>
<style type= "Text/css" >
input{
margin-top:30px;
}
div{
margin-top:20px;
width:150px;
height:60px;
BORDER:2PX solid red;
}
</style>
<body>
<input type= "button" value= "button-1" id= "Button1"/>
<div id= "Content1" ></div>
<input type= "button" value= "Button-2" id= "Button2"/>
<div id= "Content2" ></div>
<input type= "button" value= "button-3" id= "Button3"/>
<H2 style= "Display:none" id= "img" > Load in ...<div id= "Content3" ></div>
<script type= "Text/javascript" >
$ (' #button1 '). Click (function () {
Math.random () can solve serious caching problems, especially for IE
$ (' #content1 '). Load (' demo1.php? ') +math.random (), function (msg) {
$ (' #content1 '). HTML (msg);
})
});
$ (' #button2 '). Click (function () {
Get parameters passed in the Address bar in HTML
$ (' #content2 '). Load (' Demo2.html#one? ') +math.random (), function (msg) {
$ (' #content2 '). HTML (msg);
})
});
$ (' #button3 '). Click (function () {
Get parameters passed in the Address bar in HTML
$ (' #content3 '). Load (' demo3.php? ') +math.random (), function (msg) {
$ (' #content3 '). HTML (msg);
})
});
</script>
</body>
The contents of demo1.php are:
<?php
Echo ' This is what the PHP file returns and will be returned to the Div ';
?>
The contents of demo2.html are:
<!doctype html>
<meta charset= "UTF-8" >
<title>demo2</title>
<body>
<span id= "One" style= "color:red" > I am the content of the span in the ID of a, </span>
<span id= "One" style= "Color:blue" > I am the content of the ID for the span of the contents </span>
</body>
The contents of demo3.php are:
<?php
Sleep (3);//3 seconds after response
Echo ' 111 ';
?>
Ajax----Form Serialization
<!doctype html>
<meta charset= "UTF-8" >
<title>demo</title>
<!--introducing jquery--
<script src= "Jquery.js" ></script>
<body>
<form method= "POST" >
Item A: <input type= "text" Name= "a"/><br/>
Item B: <input type= "text" name= "B"/><br/>
Item C: <input type= "text" Name= "C"/><br/>
Item D: <input type= "text" name= "D"/><br/>
Item E: <input type= "text" Name= "E"/><br/>
F Entry: <input type= "text" name= "F"/><br/>
<input type= "button" id= "Submit" value= "Commit"/>
</form>
<script type= "Text/javascript" >
form serialization, must be included in the form, each element must have the Name property
$ (' #submit '). Click (function () {
form serialization to get all of the data
var data = $ (' form '). Serialize ();
$.ajax ({
Type: "POST",
URL: ' demo4.php ',
data:data,//to submit a form
Success:function (MS) {
Alert ($ (' form '). Serialize ());
Alert (MS);
},
Error:function (Jqxhr,textstatus,errorthrown) {
if (Errorthrown = = ' Not Found ') {
Console.log (' request address not present ');
}
if (textstatus = = ' Timeout ') {
Console.log (' Request timed out ');
}
}
});
})
</script>
</body>
The contents of demo4.php are:
<?php
Echo $_post[' a '];
?>
Ajax Operation Xml,json
<!doctype html>
<meta charset= "UTF-8" >
<title>demo</title>
<!--introducing jquery--
<script src= "Jquery.js" ></script>
<body>
<input type= "button" value= "button-5" id= "Button5"/>
<input type= "button" value= "button-6" id= "Button6"/>
<script type= "Text/javascript" >
Ajax Operation XML
$ (' #button5 '). Click (function () {
$.ajax ({
URL: ' Stu.xml? ' +math.random (),
Type: ' Get ',
DataType: ' xml ',
Success:function (XML) {
$ (XML). Find (' title '). each (function () {
Operation XML file Yes, HTML () method not available
Alert ($ (this). Children ("Li"). Text ())
});
}
})
})
The magical work of Ajax operation Json,eval
$ (' #button6 '). Click (function () {
$.ajax ({
URL: ' demo6.php? ' +math.random (),
Type: ' Get ',
DataType: ' JSON ',
Success:function (RS) {
Alert (eval (RS));//object
Alert (eval (rs[0). Areaid));//123
}
})
})
</script>
</body>
The contents of Stu.xml are:
<?xml version= "1.0" encoding= "UTF-8"?>
<stu>
<title>
<li>aa</li>
</title>
<title>
<li>bb</li>
</title>
<title>
<li>cc</li>
</title>
</stu>
The contents of demo6.php are:
<?php
$strJSON = ' [{"Areaid": "123"},{"Areaid": "345"}] ';
Echo $strJSON;
?>
Ajax common Operations
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
