php中Ajax的简单使用
jQuery中如何使用Ajax？
jQuery 中封装了两个方法 get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
1. get
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法格式：
$.get(URL,callback);
或
$.get( URL [, data ] [, callback ] [, dataType ] )
- URL：发送请求的 URL字符串。
- data：可选的，发送给服务器的字符串或 key/value 键值对。
- callback：可选的，请求成功后执行的回调函数。
- dataType：可选的，从服务器返回的数据类型。（可以是xml, json, script, 或 html）。
$.get() 使用例子：
<button id="btn1">get</button>
$("#btn1").click(function (){
// get 格式 $.get(url,callback) $.get(url连接,回调函数)
$.get("请求url",function (data,status){
alert(data+"状态:"+status);
})
});
2. post
$.post() 方法通过 HTTP POST 请求向服务器提交数据
语法格式:
$.post(URL,callback);
或
$.post( URL [, data ] [, callback ] [, dataType ] )
- URL：发送请求的 URL字符串。
- data：可选的，发送给服务器的字符串或 key/value 键值对。
- callback：可选的，请求成功后执行的回调函数。
- dataType：可选的，从服务器返回的数据类型。（可以是xml, json, script, 或 html）。
$.post() 常使用的方式：
<!-- 利用ajax 完成 表单数据的上传 -->
<form>
<input type="text" id="uname" name="uname"><br>
<input type="password" id="upwd" name="upwd"><br>
<input type="button" value="提交" id="btn2">
</form>
$("#btn2").click(function (){
$.post("请求url",{
// 封装表单需要的字段及数据
"uname":$("#uname").val(),// uname="xxx"
"upwd":$("#upwd").val()// upwd="xxx"
},function (data,status) {
if(status=="success"){
alert('请求成功);
}else{
alert('请求失败);
}
})
})
举例：登录结合ajax的使用
为了方便，我们直接使用layui框架，快速完成前端页面的构建
前端部分（login.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入 layui.css -->
<link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.8.0/dist/layui.js"></script>
<!--jquery cdn-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
</head>
<body>
<style>
.demo-login-container{
width: 320px; margin: 21px auto 0;margin-top: 200px;}
.demo-login-other .layui-icon{
position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form">
<div class="demo-login-container">
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名"
autocomplete="off" class="layui-input" lay-affix="clear" id="uname">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" name="password" value="" lay-verify="required" placeholder="密 码" lay-reqtext="请填写密码"
autocomplete="off" class="layui-input" lay-affix="eye" id="upwd">
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-verify="required" id="login" type="button">登录</button>
</div>
<div class="layui-form-item demo-login-other">
<label>社交账号登录</label>
<span style="padding: 0 21px 0 6px;">
<a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
</span>
或 <a href="form.html#reg">注册帐号</a></span>
</div>
</div>
</form>
<script>
// 这里为了方便直接调用ajax来做弹出层
$("#login").click(function () {
$.post("main_post.php",{
// 设定post表单的数据 username="xxx" password="xxx"
"username":$("#uname").val(),
"password":$("#upwd").val()
},function (data,status) {
if(data=="ok"&&status=="success"){
layer.msg('登录成功', {
icon: 6});
}else{
layer.msg('登录失败', {
icon: 5});
}
})
})
</script>
</body>
</html>
后端部分（main_post.php）
<?php
if($_POST){
// 只要输入名为 张三 密码为123，即认为正确登录（实际上肯定是去查询数据库，这里我就简单演示下）
$uname = $_POST['username'];
$upwd = $_POST['password'];
if($uname=="张三"&&$upwd=="123"){
echo "ok";
}else{
echo "no";
}
}
运行测试
1. 测试错误数据
2. 测试正确的数据
jQuery中调用Ajax真的太方便了，调api就是香！
