ajax02.html
用戶端
<!DOCTYPE html><!--用戶端--><!--課時47初探瀏覽器原生Ajax介面(2)_2--><!--使用post方式傳資料給伺服器，並返回資料--><html id="html"><head> <meta charset="utf-8" /> <title>demo</title> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <script type="text/javascript"> function encodeU(data) { var str=''; for (var i in data) {// 對參數進行url編碼 str+=encodeURIComponent(i)+'='+encodeURIComponent(data[i])+'&'; } console.log(str.substr(0,str.length-1)); return str.substr(0,str.length-1); } $(function(){ $('button').click(function(){ //建立XHR對象,後面的Ajax操作都是基於這個對象的。 var xhr=new XMLHttpRequest(); xhr.addEventListener('readystatechange',function(){ if (xhr.readyState==4) { //請求完成，將伺服器返回的資料，輸出來。 console.log(xhr.responseText); $('body').append(xhr.responseText); } });// 調用encodeU的方法，傳入一個對象 var data=encodeU({ id:10, a:1, b:2, c:3 }); xhr.open('post','ajax02.php');// 這個頭資訊一定要設定，不設定拿不到，是固定的，伺服器返回的資料（表單提交已經預設設定過了） xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');// post請求吧拼接好的字串id=10&a=1&b=2&c=3放到 xhr.send(data); xhr.send(data); }); }); </script></head><body><button>開始</button></body></html>
ajax02.php
伺服器端
<?php//可以執行各種PHP代碼，各種判斷，以及從資料庫中擷取到資料,返回給用戶端////sleep(5);//if($_GET['id']==10){// print_r($_GET);//}else{// echo'沒有資料';//}print_r($_POST);echo'訪問到資料';?>
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
