首先新建两个文件,文件名分别为:ajax_post.html、ajax_output_post.php,放在同一目录下。
ajax_post.html内容如下:
1 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head>
2
3 <script language="javascript">
4
5 function saveUserInfo() {
6
7 //获取接受返回信息层
8
9 var msg = document.getElementById("msg");
10
11 //获取表单对象和用户信息值
12
13 var f = document.user_info; var userName = f.user_name.value; var userAge = f.user_age.value; var userSex = f.user_sex.value;
14
15 //接收表单的URL地址
16
17 var url = "ajax_output_post.php";
18
19 //需要POST的值,把每个变量都通过&来联接
20
21 var postStr = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;
22
23 //实例化Ajax //var ajax = InitAjax();
24
25 // var ajax = false;
26
27 //开始初始化XMLHttpRequest对象
28
29 if(window.XMLHttpRequest) {
30
31 //Mozilla 浏览器
32
33 ajax = new XMLHttpRequest();
34
35 if (ajax.overrideMimeType) {
36
37 //设置MiME类别
38
39 ajax.overrideMimeType("text/xml"); }
40
41 } else if (window.ActiveXObject) {
42
43 // IE浏览器
44
45 try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!ajax) {
46
47 // 异常,创建对象实例失败
48
49 window.alert("不能创建XMLHttpRequest对象实例."); return false; }
50
51 //通过Post方式打开连接
52
53 ajax.open("POST", url, true);
54
55 //定义传输的文件HTTP头信息
56
57 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
58
59 //发送POST数据
60
61 ajax.send(postStr);
62
63 //获取执行状态
64
65 ajax.onreadystatechange = function() {
66
67 //如果执行状态成功,那么就把返回信息写到指定的层里
68
69 if (ajax.readyState == 4 && ajax.status == 200) { msg.innerHTML = ajax.responseText; } }
70
71 }
72
73 </script>
74
75 <body > ?<form name="user_info" method="post" action=""> 姓名:<input type="text" name="user_name" /><br /> 年龄:<input type="text" name="user_age" /><br /> 性别:<input type="text" name="user_sex" /><br />
76
77 <input type="button" value="提交表单" onClick="saveUserInfo()"> </form><div id="msg"> </div> </body>
ajax_output_post.php内容如下:
1 <?
2
3 echo ’姓名:‘.$_POST[‘user_name‘].‘<br>‘;
4
5 echo ’年龄:‘.$_POST[‘user_age‘].‘<br>‘;
6
7 echo ’性别:‘.$_POST[‘user_sex‘].‘<br>‘;
8
9 ?>