jQuery对AJAX操作的封装——$.post

最新推荐文章于 2023-11-24 19:53:18 发布

原创最新推荐文章于 2023-11-24 19:53:18 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

AJAX 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一段使用PHP接收客户端输入并保存到数据库的代码，同时展示了如何利用jQuery的$.post方法实现AJAX操作，完成用户注册过程，并通过服务器返回消息反馈操作结果。

php：

<span style="font-size:18px;"><?php
//接收客户端提交的uname/upwd，保存入数据库，
//返回一条成功的提示消息

$uname = $_REQUEST['uname'];
$upwd = $_REQUEST['upwd'];

//假装保存入数据库
//

echo 'SUCCESS!';
echo $uname;
echo $upwd;
?></span>

html：

<span style="font-size:18px;"><!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
	<style>
		.msg {
			display: none;
		}
	</style>
 </head>

 <body>
	<h1>jQuery对AJAX操作的封装——$.post</h1>

	用户名：<input id="uname"><br>
	密码名：<input id="upwd"><br>
	<input type="button" value="注册新用户"><br>

	<br>
	<div class="msg">
		<h4>新用户注册成功</h4>
		<p>服务器端返回的数据：<span id="serverMsg"></span></p>
	</div>

	<script src="js/jquery-1.11.3.js"></script>
	<script>
		$('[type="button"]').click(function(){
			var user = {};
			user.uname = $('#uname').val();
			user.upwd = $('#upwd').val();
			//console.log(user);
			//发起异步的AJAX请求
			$.post('4-register.php', user, function(){
				console.log('接收到服务器端的成功响应！');
				console.log(arguments);
			});
		});
	</script>
 </body>
</html>
</span>