Home > Developer > Web Develop
First, native JS write Ajax request
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>JSON instance</title>6 </Head>7 <Body>8 <inputID= "BTN"value= "JSON"type= "button">9 <Scripttype= "Text/javascript">Ten window.onload= function(){ One varbtn=document.getElementById ('btn'); A Btn.onclick= function(){ - varXHR= NULL; - if(window. XMLHttpRequest) { the XHR= NewXMLHttpRequest (); - }Else{ - XHR= NewActiveXObject ('Microsoft.XMLHTTP'); - } + Xhr.open ("Post","./jsondemo.php",true); - Xhr.setrequestheader ("Content-type","application/x-www-form-urlencoded"); + Xhr.onreadystatechange= function(){ A if(Xhr.readystate== 4){ at if(Xhr.status== $){ - varData=Xhr.responsetext; - varobj=json.parse (data); - varobj1=Eval ("("+Data+")"); - Console.log (obj.username); - Console.log (obj.age); in Console.log (obj1.username); - Console.log (obj1.age); to + }Else{ - Console.log ('Failure'); the } * } $ }Panax Notoginseng varparam= '{"username": "Zhangsan", "Age": "" "}'; - Xhr.send ("user="+param); the } + } A </Script> the </Body> + </HTML>
Two, jquery way to write Ajax request
Grammar:
1 $.ajax ({2URL: ' xx.php ',3Type: ' Post, '4Data:{username: ' Tom ', Password: ' 2223 '},5Successfunction(data) {6 console.log (data);7 },8Errorfunction(data) {9 Console.log (error);Ten } One})
In addition to the URL settings above, other parameters are optional
1<script type= "Text/javascript" >2$(function(){3$ ("#btn"). Click (function(){4 $.ajax ({5Type: "Get",6URL: './05open.php?username= China &password=123 ',7Success:function(data) {8 console.log (data);9 }Ten }); One A }); - }); - the</script>
Ajax native notation and jquery notation
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
