AJAX+PHP

选择了远方,便只顾风雨兼程;目标是地平线,留给世界的是如风的背影!

 

最简单的AJAX实现

其实呢,准备从今天开始正式复习PHP的基础内容,为下一步的高阶内容做铺垫。。。
于是乎在复习的同时准备多动动手,敲敲代码。。。

不敲不知道,真是一敲吓一跳啊!!!手太生了T.T...

不多说了,看看今天都敲了什么东西吧。。。

一、最简单的POST_AJAX:

1.test.html

<script>
function InitAjax()
{
    
var ajax=false;

    
try {
        ajax 
= new ActiveXObject("Msxml2.XMLHTTP");
    } 
catch (e) {
        
try {
             ajax 
= new ActiveXObject("Microsoft.XMLHTTP");
        } 
catch (E) {
              ajax 
= false;
         }
    }

    
if (!ajax && typeof XMLHttpRequest!='undefined') {
    ajax 
= new XMLHttpRequest();
    }

    
return ajax;

}

function postUserInfo(){

    
var msg = document.getElementById("msg");

    
var f = document.user_info;
    
var userName = f.user_name.value;
    
var userAge = f.user_age.value;
    
for(var i=0;i<f.user_sex.length;i++){
        
if(f.user_sex[i].checked){
            
var userSex = f.user_sex[i].value;
        }
    }
    
var url = "test.php";
    
var postStr = "name="+userName+"&age="+userAge+"&sex="+userSex;

    
var ajax = InitAjax();
    ajax.open(
"POST",url,true);
    ajax.setRequestHeader(
"Content-Type","application/x-www-form-urlencoded");
    ajax.send(postStr);
    ajax.onreadystatechange 
= function(){
        
if(ajax.readyState == 4 && ajax.status == 200){
            msg.innerHTML 
= ajax.responseText;
        }
    }



}

</script>

<form name="user_info">
姓名:
<input type="text" name="user_name"><br />
年龄:
<input type="text" name="user_age"><br />
性别:
<input type="radio" name="user_sex" value="男">&nbsp;
<input type="radio" name="user_sex" value="女"><br />

<input type="button" value="提交" onClick="postUserInfo()">
</form>
<br />
<div id="msg"><div>

2.test.php

<?php
header('Content-Type:text/html;charset=utf-8');


$name = $_POST['name'];
$age = $_POST['age'];
$sex = $_POST['sex'];

echo "姓名:".$name."</br>"."年龄:".$age."</br>"."性别:".$sex."</br>";

?>

二、用JQ实现同样功能

1、test.html


<script src="jquery.js" type="text/javascript"></script>


<script type="text/javascript">


$(
function(){
    $(
"#postInfo").click(function(){

        
var user_name = $(":text")[0].value;
        
var user_age = $(":text")[1].value;
        
for(var i=0;i<$(":radio").length;i++){
            
if($(":radio")[i].checked){
                
var user_sex = $(":radio")[i].value;
            }
        }
        
        $.post(
"test.php",{name:user_name,age:user_age,sex:user_sex},function(txt){
                $(
"#msg").html(txt);
        });
    
    });
});

</script>



<body>

<div id="msg"></div>
<form name="user_info">
姓名:
<input type="text" name="user_name"><br />
年龄:
<input type="text" name="user_age"><br />
性别:
<input type="radio" name="user_sex" value="男">&nbsp;
<input type="radio" name="user_sex" value="女"><br />

<input type="button" value="提交" id="postInfo">
</form>
<br />


</body>

2.test.php

<?php
header('Content-Type:text/html;charset=utf-8');


$name = $_POST['name'];
$age = $_POST['age'];
$sex = $_POST['sex'];

echo "姓名:".$name."<br />"."年龄:".$age."<br />"."性别:".$sex."<p>";

?>

三、又封装了一下

<script>

var ajax;
function initAjax(){
    
try {
        ajax 
= new ActiveXObject("Msxml2.XMLHTTP");
    } 
catch (e) {
        
try {
             ajax 
= new ActiveXObject("Microsoft.XMLHTTP");
        } 
catch (E) {
              ajax 
= false;
         }
    }

    
if (!ajax && typeof XMLHttpRequest!='undefined') {
        ajax 
= new XMLHttpRequest();
    }

}

function postAjax(url,data){
    ajax.open(
"POST",url,true);
    ajax.setRequestHeader(
"Content-Type","application/x-www-form-urlencoded");
    ajax.onreadystatechange 
= callBack;
    ajax.send(data);
}

function callBack(){
    
if(ajax.readyState == 4 && ajax.status == 200){
        
var msg = document.getElementById("msg");
        msg.innerHTML 
= ajax.responseText;
    }
}

function postUserInfo(){
    
var f = document.user_info;
    
var userName = f.user_name.value;
    
var userAge = f.user_age.value;
    
for(var i=0;i<f.user_sex.length;i++){
        
if(f.user_sex[i].checked){
            
var userSex = f.user_sex[i].value;
        }
    }
    
var url = "test.php";
    
var postStr = "name="+userName+"&age="+userAge+"&sex="+userSex;

    initAjax();

    postAjax(url,postStr);
}

</script>

<form name="user_info">
姓名:
<input type="text" name="user_name"><br />
年龄:
<input type="text" name="user_age"><br />
性别:
<input type="radio" name="user_sex" value="男">&nbsp;
<input type="radio" name="user_sex" value="女"><br />

<input type="button" value="提交" onClick="postUserInfo()">
</form>
<br />
<div id="msg"><div>

posted on 2008-03-12 02:06 刘伟 阅读(1246) 评论(0)  编辑 收藏 引用 网摘 所属分类: jQueryPHP


只有注册用户登录后才能发表评论。
网站导航:

导航

统计

公告

严正申明:严禁任何营利性商业网站在未经作者授权同意情况下进行转载等侵权行为。

留言簿(1)

随笔分类

随笔档案

新闻档案

相册

css

搜索

积分与排名

最新评论