標籤：style class blog c code java
----- 030-ajax.php -----
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <title>Ajax</title> 6 <script type="text/javascript" src="js/ajax.js"> 7 </script> 8 </head> 9 <body>10 <h2>Ajax</h2>11 <form style="border: 1px solid; width:250px" align="center" id="frm">12 姓名：<input type="text" name="user_name"><br/>13 年齡：<input type="text" name="user_age"><br/>14 性別：<input type="text" name="user_sex"><br>15 <input type="button" value="提交" onclick="saveUserInfo()">16 </form>17 <div id="msg"></div>18 </body>19 </html>20 <script type="text/javascript">21 function saveUserInfo()22 {23 var frm = document.getElementById("frm");24 var userName = frm.user_name.value;25 var userAge = frm.user_age.value;26 var userSex = frm.user_sex.value;27 var postString = "user_name="+userName + "&user_age="+userAge + "&user_sex="+userSex;28 29 30 31 32 33 var xmlHttp = createXMLHttpRequest();//初始化XMLHttpRequest對象34 xmlHttp.open("POST", "030-ajax2.php");35 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");36 xmlHttp.send(postString);//發送POST資料37 38 xmlHttp.onreadystatechange = function(){39 if(xmlHttp.readyState==4 && xmlHttp.status==200){40 document.getElementById("msg").innerHTML = xmlHttp.responseText;41 }42 }43 44 }45 </script>
----- 030-ajax2.php -----
1 <?php2 //header("Content-Type: text/html; charset=utf-8");3 echo "使用者名稱：", $_POST[‘user_name‘], "<br/>";4 echo "年齡：", $_POST[‘user_age‘], "<br/>";5 echo "性別：", $_POST[‘user_sex‘], "<br/>";6 ?>
----- ajax.js -----
1 function createXMLHttpRequest() 2 { 3 var xmlHttp = null; 4 try{ 5 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 6 alert("建立了Msxml2.XMLHTTP"); 7 }catch($e1){ 8 try{ 9 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");10 alert("建立了Microsoft.XMLHTTP");11 }catch($e2){12 try{13 xmlHttp = new XMLHttpRequest();14 alert("建立了XMLHttpRequest");15 }catch($e3){16 xmlHttp = null;17 alert("建立XMLHttpRequest失敗");18 }19 }20 }21 return xmlHttp;22 }
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
