Ajax Post 與 Get 例項

神馬和浮雲發表於2014-05-04

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);



?>

 

 

相關文章