JQuery+Ajax+php(POST)前后端数据传输,并显示简单的样式
通过JQuery，Ajax，PHP进行数据操作，进而达到数据显示，数据逻辑的处理，数据的前后端分离的效果
我看网上的写的比较深奥，小弟自己写了一个适合初学者看的原生代码
如有不好，请留言提示，勿喷。
test.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax+PHP</title>
<!-- 这是在某鸟教程网站复制下来的jquery ,可以上官网下载-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1 id="header">测试</h1>
用户名:<input type="text" id="username" name="username" /><br>
密码: <input type="password" id="password" name="password" /><br>
<button type="button" class="butn">Ajax提交</button><br>
<span id = "con"></span>
<script type="text/javascript">
$(document).ready(function(){
$(".butn").click(function(){
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
//请求的地址
url: "test.php",
//数据传输的方式
type: "POST",
//需要传输的数据
data:{name:username,pwd:password},
//返回数据的格式
dataType: "json",
//若json返回失败
error: function(){
alert('请输入用户名,和密码');
},
//若json有数据返回
// 将所有数据写到res中,直接用 res.status/res.data/res.msg调调用数据(res可以自定义)
success: function(res){//如果调用php成功
/*
function returnJson($status,$data="",$msg="")
{
$j_array = array("status"=>$status,"data"=>$data,"msg"=>$msg);
echo json_encode($j_array);
exit;
}
注意:status,data,msg,需要前后端一致
*/
if(res.status==0)
{
alert(res.msg);
var str = res.msg;
$("#header").empty();//我习惯先清空id=header 里的值
$("#header").append(str);//然后进行赋值
$("#con").empty();//因为是登录失败,所有清空id=con里面的值
}
else
{
alert('用户密码正确');
var str = res.msg;//我这里用来接收session
$("#header").empty();//我习惯先清空id=header 里的值
$("#header").append(str+'登录成功')//然后进行赋值
$("#con").empty();//因为我这里登录按钮重复按,所有我就登录后先清空在赋值
//输出数据
var i=0;
var res_len = res.data.length ;
for(i=0;i<res_len;i++)
{
//输出类似于表格的数据---也可以设置id样式,或者设置class样式
//这里就要 i 做循环,可以用别的
// var str = "<p>后台的序号输出:"+res.data[i].id+"</p>"; 原来版本
var str = "<p id="+'p_'+i+" class="+'c_'+i+">后台的序号输出:"+res.data[i].id+"</p>";
//重点:-- 赋值给id=con 里面
$("#con").append(str)
}
}
}
});
})
})
</script>
</body>
</html>
test.php代码
<?php
//一、假设用户名和密码为admin,admin
//二、开启session,判断登录状态
session_start();
//三、定义JSON函数
/*
$status 用来做匹配的状态
$data 传输的数据(数组格式)
$msg 传输后反应的信息
*/
function returnJson($status,$data="",$msg="")
{
$j_array = array("status"=>$status,"data"=>$data,"msg"=>$msg);
echo json_encode($j_array);
exit;
}
/*判断是否通过POST传来了name和pwd,这里先判断是否有用户名,
因为没有用户名直接输出前端的
error: function()
{
alert('请输入用户名,和密码');
},
原因是没有返回json:详情可以看代码逻辑
*/
if(isset($_POST['name'])&&$_POST['name']!='')
{
$name = $_POST['name'];
$pwd = $_POST['pwd'];
//判断是否有密码
if(empty($pwd))
{
returnJson(0,"","请输入密码");
}
else
{
//当有密码时候,判断用户和密码是否正确
if($name=='admin'&&$pwd=='admin')
{
//登录成功后赋值给session
$_SESSION['username'] = $name;
/*这里可以检索数据库语句
我就简单的写一个for循环当做数据库的数据
*/
$i=0;
for($i=0;$i<=10;$i++)
{
//把循环的数据写成数组
$data[$i]['id'] = $i;
}
//通过JSON函数将数组转化为json格式,这里我将session写到msg里面,也可以另写json
returnJson(1,$data,$_SESSION['username']);
}
else
{
//用户或者密码不正确的
returnJson(0,"","账户或者密码输入错误");
}
}
}
//个人喜欢这样引入HTML文件,我觉得写起来比较美观,方便查看.
include "test.html";
?>
代码里面有详细的注释，如有错误：请留言提示、勿喷。
3603
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
