ajax.php:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language= "javascript" >
function saveUserInfo()
{
//获取接受返回信息层
var msg = document.getElementByIdx_x( "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_output.php" ;
//需要POST的值,把每个变量都通过&来联接
var postStr = "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( "POST" , url, true);
//定义传输的文件HTTP头信息
ajax.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );
//发送POST数据
ajax.send(postStr);
//获取执行状态
ajax.onreadystatechange = function () {
//如果执行状态成功,那么就把返回信息写到指定的层里
if (ajax.readyState == 4 && ajax.status == 200) {
msg.innerHTML = ajax.responseText;
}
}
alert (userName);
}
</script>
<body >
<div id= "msg" ></div>
<form name= "user_info" method= "post" action= "" >
姓名:<input type= "text" id= "user_name" name= "user_name" /><br />
年龄:<input type= "text" name= "user_age" /><br />
性别:<input type= "text" name= "user_sex" /><br />
<input type= "button" value= "提交表单" onClick= "saveUserInfo()" >
</form>
</body>
|
ajax_output.php:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<?php
$username = $_POST [ 'user_name' ];
$userage = $_POST [ 'user_age' ];
$usersex = $_POST [ 'user_sex' ];
echo "$username <br>" ;
echo "$userage <br>" ;
echo "$usersex <br>" ;
$db = new mysqli( 'localhost' , 'root' , '123456' , 'test' );
if (! $db ){
echo "连接失败!" ;
}
$db ->query( "set names utf8" );
$query = "insert into userinfo(uname,uage,usex) values ('" . $username . "','" . $userage . "','" . $usersex . "')" ;
$result = $db ->query( $query );
if ( $result ){
echo "上传成功!" ;
}
else {
echo "失败!" ;
}
$db ->close();
?>
|
以上这篇AJAX PHP无刷新form表单提交的简单实现(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。