Ajax的POST實例，index.html
<html> <head> <script type="text/javascript"> function showCustomer(str){ var userName = str; var postStr = "user_name="+ str; var xmlhttp; if (str==""){ document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("POST","getcustomer.php",true); xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlhttp.send(postStr); } </script> </head> <body> <form action="" style="margin-top:15px;"> <label>請選擇一位客戶： <select name="customers" onchange="showCustomer(this.value)" > <option value="APPLE">Apple Computer, Inc.</option> <option value="BAIDU ">BAIDU, Inc</option> <option value="Canon">Canon USA, Inc.</option> <option value="Google">Google, Inc.</option> <option value="Nokia">Nokia Corporation</option> <option value="SONY">Sony Corporation of America</option> </select> </label> </form> <br /> <div id="txtHint">客戶信息將在此處列出 ...</div> </body> </html>
getcustomer.php
<?php print_r($_POST); ?>
============================================================
下面的實例是GET。index.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax Get 傳值</title> </head> <script language="javascript"> function saveUserInfo() { //獲取接受返回信息層 var msg = document.getElementById("msg"); //獲取表單對象和用戶信息值 var f = document.user_info; var userName = f.user_name.value; var userAge = f.user_age.value; var userSex = f.user_sex.value; //接收表單的URL地址 var url = "ajax_output2.php? user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex; //實例化Ajax //var ajax = InitAjax(); var ajax = false; //開始初始化XMLHttpRequest對象 if(window.XMLHttpRequest) { //Mozilla 瀏覽器 ajax = new XMLHttpRequest(); if (ajax.overrideMimeType) {//設置MiME類別 ajax.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) { // IE瀏覽器 try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!ajax) { // 異常，創建對象實例失敗 window.alert("不能創建XMLHttpRequest對象實例."); return false; } //通過Post方式打開連接 ajax.open("GET", url, true); //發送GET數據,已經在URL中賦了值所以send那里只要加個空參. ajax.send(null); //獲取執行狀態 ajax.onreadystatechange = function() { //如果執行狀態成功，那么就把返回信息寫到指定的層里 if (ajax.readyState == 4 && ajax.status == 200) { msg.innerHTML = ajax.responseText; } } } </script> <body> <div id="msg"></div> <form name="user_info" method="post" action=""> <input type="text" name="user_name" style="display:none;" /> <input type="text" name="user_age" style="display:none;" /> <input type="text" name="user_sex" style="display:none;" /> <input type="button" value="獲取服務器變量" onClick="saveUserInfo()"> </form> </body>
ajax_output2.php
<?php print_r($_GET); ?>