Ajax Post 与 Get 实例

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



?>

 

 

posted @ 2014-05-04 17:13  神马和浮云  阅读(3789)  评论(0)  编辑  收藏  举报