ajax 表单提交 无刷新

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>登录angularJS</title>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/login.css" />
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //DOM的
$("#button").click(function(){ //当按钮button被点击时的处理函数
postdata(); //button被点击时执行postdata函数
});
});
function postdata(){ //提交数据函数
$.ajax({ //调用jquery的ajax方法
type: "POST",//设置ajax方法提交数据的形式
url: "ajax_output.PHP",//把数据提交到ok.PHP
data: "username="+$("#username").val()+"&pass="+$("#pass").val()+"&age="+$("#age").val(),//输入框username pass age 多个值时用&符号中的值作为提交的数据
success: function(msg){ //提交成功后的回调,msg变量是ok.PHP输出内容
alert("数据提交成功"); //如果有必要,可以把msg变量的值显示到某个DIV元素中
}
});
}


</script>
</head>
<body>
<div class="container">
<div class="img-responsive" id="msg"></div>
<form class="form-signin" id= "form1" method="post" name="user_info" action="">
<h2>Please sign in</h2>
<input name="username" id="username" type="text" value="" />
<input name="pass" id="pass" type="text" value="" />
<input name="age" id="age" type="text" value="" />
<input type="submit" name="button" id="button" value="提交" />
</form>
</div>
</body>

</html>


<?PHP header("content-type:text/html;charset=utf-8");/* $MysqL_username="localhost"; // 连接数据库用户名 $MysqL_password=""; // 连接数据库密码*/ $MysqL_database="test"; // 数据库的名字 // 连接到数据库 $conn = MysqL_connect('localhost','root','') or die("MysqL_connect:".MysqL_errno()); MysqL_select_db($MysqL_database); $username=$_POST['username']; $pass=$_POST['pass']; $age=$_POST['age']; $sql = "INSERT INTO `login2` VALUES ('$username','$pass','$age')"; $query = MysqL_query($sql); if($query){ echo '1'; }else{ echo '注册失败!'; }?>

相关文章

IE6是一个非常老旧的网页浏览器,虽然现在很少人再使用它,但...
PHP中的count()函数是用来计算数组或容器中元素的个数。这个...
使用 AJAX(Asynchronous JavaScript and XML)技术可以在不...
Ajax(Asynchronous JavaScript and XML)是一种用于改进网页...
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX,我们可以...
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax...