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";
?>