其实呢，准备从今天开始正式复习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="男">男
<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="男">男
<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="男">男
<input type="radio" name="user_sex" value="女">女<br />
<input type="button" value="提交" onClick="postUserInfo()">
</form>
<br />
<div id="msg"><div>