AJAX笔记

最新推荐文章于 2021-03-10 01:20:42 发布

壮壮小朋友

最新推荐文章于 2021-03-10 01:20:42 发布

阅读量219

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42733916/article/details/94614589

版权

前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

删除

if (isset($_GET["id"])) {
	$id = $_GET["id"];
	$sql = "DELETE FROM userinfo WHERE id = '$id'";
	if (opt($sql)) {
		header("Location: static.php");
	} else {
		echo "<script>history.back();</script>";
	}
}

编辑

获取显示数据

if ($_SERVER["REQUEST_METHOD"] == "GET") {
	$id = $_GET["id"];
	$sql = "SELECT * FROM userinfo WHERE id = '$id'";
	$result = getData($sql);
	$result = $result[0];
}

<select name="gender">
	<option value="-1">请选择</option>
	<option value="男" <?php echo $result["gender"] == "男" ? "selected" : "" ?> >男</option>
	<option value="女" <?php echo $result["gender"] == "女" ? "selected" : "" ?> >女</option>
</select>

更新数据

$id = $_POST["id"];

$name = $_POST["name"];
$gender = $_POST["gender"];
$birthday = $_POST["birthday"];
$photo = "./assets/img/".uniqid().strrchr($_FILES["photo"]["name"], ".");

if (!empty($_FILES["photo"]["name"]) && $_FILES["photo"]["error"] == 0) {
	move_uploaded_file($_FILES["photo"]["tmp_name"], $photo);
	$sql = "UPDATE userinfo set name = '$name', gender = '$gender', birthday = '$birthday', photo = '$photo' where id = '$id'";
} else {
	$sql = "UPDATE userinfo set name = '$name', gender = '$gender', birthday = '$birthday' where id = '$id'";
}

$result = opt($sql);

Ajax

Asynchronous Javascript And XML

作用：可以在页面不刷新的情况下，请求服务器，局部更新页面的数据

问题

提交表单以后每次要刷新页面加载了很多不必要的html
表单提交以后虽然可以直接显示html页面但是表单里的所有数据都没有需要用户重新输入一次

异步的概念

同步：同一时刻只能做一件事，上一步完成才能开始下一步
异步：同时做多件事，效率更高

XMLHttpRequest

get

var name = "zhangsan"; // 用户名
var xhr = new XMLHttpRequest(); // xhr异步请求对象
xhr.open("get", "v.php?username="+name); // 请求行
// xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 请求头 get不需要设置
xhr.send(null); // 请求体 get不需要传入参数

// 响应处理
xhr.onreadystatechange = function() {
	// xhr的准备状态是4 并且 服务器响应状态码为200
	if (xhr.readystate == 4 && xhr.status == 200) {
		console.log(xhr.responseText);
	}
}

post

var name = "zhangsan"; // 用户名
var xhr = new XMLHttpRequest(); // xhr异步请求对象
xhr.open("post", "v.php"); // 请求行
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 请求头
xhr.send("username="+name); // 请求体

// 响应处理
xhr.onreadystatechange = function() {
	// xhr的准备状态是4 并且 服务器响应状态码为200
	if (xhr.readystate == 4 && xhr.status == 200) {
		console.log(xhr.responseText);
	}
}

readystate 状态

0. 创建xhr对应以后的初始状态
1. 调用了send方法 请求正在发送
2. 请求发送成功
3. 接收响应, 正在处理数据
4. 响应内容解析完成, 可以使用

响应json数据

header("Content-Type: application/json; charset=utf-8");
$arr = [
	["src" => "1.png", "name" => "京东超市"],
	["src" => "1.png", "name" => "京东超市"],
	["src" => "1.png", "name" => "京东超市"],
];
echo json_encode($arr);

xhr.onreadystatechange = function() {
	// xhr的准备状态是4 并且 服务器响应状态码为200
	if (xhr.readystate == 4 && xhr.status == 200) {
		console.log(xhr.responseText);

		// json_encode JSON.stringify 将js对象或者数据转换成json字符串
		// json_decode JSON.parse 将json字符串转换为js对象或者数组

		var json = xhr.responseText;
		var data = JSON.parse(json);

		var html = "";
		for (var i = 0; i < data.length; i++) {
			html += `<li>
				[外链图片转存失败(img-srhir7Wz-1562220472773)(https://mp.csdn.net/$%7Bdata[i].src%7D)]
				<span>${data[i].name}</span>
			</li>`;
		}

		document.querySelector("ul").innerHTML = html;
	}
}

响应xml数据

header("Content-Type: application/xml; charset=utf-8");
$xml = '
<?xml version="1.0" encoding="utf-8"?>
<!-- 上面这一句必须是整个xml文档的第一句，否则格式错误 -->
<root>
    <!-- 标签名称 以字母和下划线开头，不能有空格，不能包含特殊字符，区分大小写 -->
    <items>
        <!-- 说明下面的内容需要描述为数组 -->
        <item>
            <!-- 描述数组中的具体的成员值 -->
            <src>./images/nav_1.png</src>
            <text>京东超市</text>
        </item>
        <item>
            <!-- 描述数组中的具体的成员值 -->
            <src>./images/nav_2.png</src>
            <text>全球购物</text>
        </item>
        <item>
            <!-- 描述数组中的具体的成员值 -->
            <src>./images/nav_3.png</src>
            <text>京东市场123</text>
        </item>
    </items>
</root>
';
echo $xml;

xhr.onreadystatechange = function() {
	// xhr的准备状态是4 并且 服务器响应状态码为200
	if (xhr.readystate == 4 && xhr.status == 200) {
		// console.log(xhr.responseText); //xhr.responseText为null值 因为服务器返回的类型是application/xml
		var doc = xhr.responseXML;
		var items = doc.querySelector("item");
		var html = "";
		for (var i = 0; i < items.length; i++) {
			var src = items[i].querySelector("src").innerText;
			var name = items[i].querySelector("text").innerText;
			html += `<li>
				[外链图片转存失败(img-3JMYorEW-1562220472790)(https://mp.csdn.net/$%7Bsrc%7D)]
				<span>${name}</span>
			</li>`;
		}

		document.querySelector("ul").innerHTML = html;
	}
}

封装

简版

function ajax(type, url, data, callback) {
	var xhr = new XMLHttpRequest();
	xhr.open(type, data ? url+"?"+data : url);
	if (type == "post") {
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	}
	xhr.send(type == "post" ? data : null);

	xhr.onreadystatechange = callback;
}

高级版本

参数不需要根据位置来传递
如果不需要可以传递使用默认值
扩展起来非常方便

var $ = {
	getpa: function(params) {
		var str = "?";
		for (var key in params) {
			str += `${key}=${params[key]}&`;
		}
		str = str.substr(0, str.length-1);
		return str;
	}
	ajax: function(option) {
		var type = option.type || "get";
		var url = option.url || location.href;
		var data = option.data ? this.getpa(option.data) : "";
		var success = option.success;

		var xhr = new XMLHttpRequest();
		if (type == "get") {
			url += data;
			data = null;
		}
		xhr.open(type, url);
		if (type == "post") {
			xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		}
		xhr.send(data);
		if (success) {
			xhr.onreadystatechange = success;
		}
	},
	get: function(option) {
		option.type = "get";
		this.ajax(option)
	},
	post: function(option) {
		option.type = "post";
		this.ajax(option)
	}
};

数据库查询函数的封装

function query($sql) {
	// 链接数据库
	$conn = mysqli_connect("127.0.0.1", "root", "root", "db_baixiu");
	// 执行查询
	$result = mysqli_query($conn, $sql);
	// 读取数据
	$rows = [];
	while ($row = mysqli_fetch_assoc($result)) {
		$rows[] = $row;
	}
	// 关闭连接
	mysqli_close($conn);
	return $rows;
}

列表页

$categoryId = $_GET["categoryId"];
$sql = "
SELECT posts.*, categories.name, users.nickname, 
(SElECT count(*) FROM comments WHERE post_id = posts.id) as commentsCount
FROM posts
LEFT JOIN categories ON posts.category_id = categories.id
LEFT JOIN users ON posts.user_id = users.id
WHERE posts.category_id = $categoryId
ORDER BY posts.created DESC
LIMIT 10
";
$postsArr = query($sql);

加载更多的接口

$categoryId = $_POST["categoryId"];
$currentPage = $_POST["currentPage"];
$pageSize = $_POST["pageSize"];

$offset = ($currentPage - 1) * $pageSize;

$sql = "
SELECT posts.*, categories.name, users.nickname, 
(SElECT count(*) FROM comments WHERE post_id = posts.id) as commentsCount
FROM posts
LEFT JOIN categories ON posts.category_id = categories.id
LEFT JOIN users ON posts.user_id = users.id
WHERE posts.category_id = $categoryId
ORDER BY posts.created DESC
LIMIT $offset, $pageSize
";
$postsArr = query($sql);

$rowSql = "SELECT count(*) AS rowCount FROM posts WHERE category_id = $categoryId";
$rowCount = query($rowSql)[0]["rowCount"];

$response = ["code"=>0, "msg"=>"获取失败"];
if ($postsArr) {
	$response["code"] = 1;
	$response["msg"] = "获取成功";
	$response["data"] = $postsArr;
	$response["rowCount"] = $rowCount;
}

header("Content-Type: appliction/json; charset=utf-8");
echo json_encode($response);

调用加载更多接口

var categoryId = <?php echo $_GET["categoryId"]; ?>;
var currentPage = 1;
var pageSize = 10;
$(".loadmore .btn").on("click", function(){
	currentPage++;
	$.ajax({
		type: "POST",
		url: "api/_getMore.php",
		data: {categoryId: categoryId, currentPage: currentPage, pageSize: pageSize},
		success: function(result) {
			if (result.code == 1) {
				for (var i = 0; i < result.data.length; i++) {
					var html = "<div>" + result.data[i].id + "</div>"; // 拼接html 这里不详细写
					var divDom = $(html);
					divDom.insertBefore(".loadmore");
				}
				// 是否有下一页
				var maxPage = Math.ceil(result.rowCount / pageSize);
				if (currentPage >= maxPage) {
					$(".loadmore").hide();
				}
			}
		}
	})
});

修改列表页的url

<a href="detail.php?postId=<?php echo $value['id']?>;"><?php echo $value['title']?></a>

内容也获取数据

$postId = $_GET["postId"];
$sql = "
SELECT posts.*, categories.name, users.nickname, 
FROM posts
LEFT JOIN categories ON posts.category_id = categories.id
LEFT JOIN users ON posts.user_id = users.id
WHERE posts.id = $postId
";
$post = query($sql)[0]; // 文章数据

后台登陆接口

$email = $_POST["email"];
$password = $_POST["password"];

$sql = "SELECT * FROM users WHERE email = '$email' AND password = '$password' AND status = 'actived'";
$user = query($sql);

$response = ["code"=>0, "msg"=>"登录失败"];
if ($user) {
	$response["code"] = 1;
	$response["msg"] = "登录成功";

	// 将登录状态存入session
	session_start();
	$_SESSION["isLogin"] = 1;
}

header("Content-Type: appliction/json; charset=utf-8");
echo json_encode($response);

后台登录ajax

$("login_btn").on("click", function(){
	var email = $("#email").val();
	var password = $("#password").val();

	if (!/\w+@\w+\.\w+/.test(email)) {
		$(".msg").text("电子邮箱格式不正确!");
		$(".alert").show();
	}

	$.ajax({
		type: "POST",
		url: "api/userlogin.php",
		data: {email: email, password: password},
		success: function(result) {
			if (result.code == 1) {
				location.href = "index.php"; // 登录成功 跳转到后台首页
			} else {
				$(".msg").text("用户名或密码错误!");
				$(".alert").show();
			}
		}
	})
})

登录验证函数

function checkLogin() {
	session_start();
	if (!isset($_SEEION["isLogin"]) || $_SEEION["isLogin"] != 1) {
		header("Location: login.php");
		exit();
	}
}

后台抽离公共模块

index.php

$current_page = "index";
require_once "public/_aside.php";

posts.php

$current_page = "posts";
require_once "public/_aside.php";

public/_aside.php

<div class="aside">
    <div class="profile">
      [外链图片转存失败(img-BfZcWxrL-1562220530205)(https://mp.csdn.net/static/uploads/avatar.jpg)]
      <h3 class="name">布头儿</h3>
    </div>
    <ul class="nav">
      <li class="active">
        <a href="index.php"><i class="fa fa-dashboard"></i>仪表盘</a>
      </li>
      <li>
<?php
$page_arr = ["posts", "post-add", "categories"];
$bool = in_array($current_page, $page_arr);
?>
        <a href="#menu-posts" class="<?php echo $bool ? "" : "collapsed"; ?>" data-toggle="collapse" <?php echo $bool ? 'aroa-expanded="true"' : ''; ?>>
          <i class="fa fa-thumb-tack"></i>文章<i class="fa fa-angle-right"></i>
        </a>
        <ul id="menu-posts" class="<?php echo $bool ? "" : "collapsed"; ?>">
          <li class="<?php echo $current_page == "posts" ? 'active' : ''; ?>"><a href="posts.php">所有文章</a></li>
          <li class="<?php echo $current_page == "post-add" ? 'active' : ''; ?>"><a href="post-add.php">写文章</a></li>
          <li class="<?php echo $current_page == "categories" ? 'active' : ''; ?>"><a href="categories.php">分类目录</a></li>
        </ul>
      </li>
      <li>
        <a href="comments.php"><i class="fa fa-comments"></i>评论</a>
      </li>
      <li>
        <a href="users.php"><i class="fa fa-users"></i>用户</a>
      </li>
      <li>
<?php
$page_arr = ["nav-menus", "slides", "settings"];
$bool = in_array($current_page, $page_arr);
?>
        <a href="#menu-settings" class="<?php echo $bool ? "" : "collapsed"; ?>" data-toggle="collapse" <?php echo $bool ? 'aroa-expanded="true"' : ''; ?>>
          <i class="fa fa-cogs"></i>设置<i class="fa fa-angle-right"></i>
        </a>
        <ul id="menu-settings" class="<?php echo $bool ? "" : "collapsed"; ?>">
          <li class="<?php echo $current_page == "nav-menus" ? 'active' : ''; ?>"><a href="nav-menus.php">导航菜单</a></li>
          <li class="<?php echo $current_page == "slides" ? 'active' : ''; ?>"><a href="slides.php">图片轮播</a></li>
          <li class="<?php echo $current_page == "settings" ? 'active' : ''; ?>"><a href="settings.php">网站设置</a></li>
        </ul>
      </li>
    </ul>
  </div>

登录接口

api?_userLogin.php

$email = $_POST["email"];
$password = $_POST["password"];

$conn = mysqli_connect("127.0.0.1", "root", "root", "db_baixiu");
$sql = "SELECT * from users WHERE email = '$email' and password = '$password' and status = 'acitved'";
$result = mysqli_query($conn, $sql);
$user = mysqli_fetch_assoc($result);

if ($user) {
	// 保存用户id到session中
	session_start();
	$_SEESSION["user_id"] = $user["id"];
}

获取用户信息的接口

api/_getUserAvatar.php

session_start();
$user_id = $_SESSION["user_id"];
$conn = mysqli_connect("127.0.0.1", "root", "root", "db_baixiu");
$sql = "SELECT * from users WHERE id = '$user_id'";
$result = mysqli_query($conn, $sql);
$user = mysqli_fetch_assoc($result);
$response = ["code" => 0, "msg" => "错误"];
if ($user) {
	$response["code"] = 1;
	$response["msg"] = "成功";
	$response["data"] = [
		"avatar" => $user["avatar"],
		"nickname" => $user["nickname"],
	];
}
header("Content-Type: application/json; charset=utf-8");
echo json_encode($response);

用户头像 ajax

$.ajax({
	type: "post",
	url: "api/_getUserAvatar.php",
	success: function(res){
		if (res.code == 1) {
			$(".profile").children("img").attr("src", res.data.avatar);
			$(".profile").children("h3").text(res.data.nickname);
		}
	}
})

分类数据接口

api/_getCategoryData.php

$conn = mysqli_connect("127.0.0.1", "root", "root", "db_baixiu");
$sql = "SELECT * from categories";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($result)) {
	$categories[] = $row;
}
$response = ["code" => 0, "msg" => "错误"];
if ($categories) {
	$response["code"] = 1;
	$response["msg"] = "成功";
	$response["data"] = $categories;
}
header("Content-Type: application/json; charset=utf-8");
echo json_encode($response);

分类数据ajax

$.ajax({
	type: "post",
	url: "api/_getCategoryData.php",
	success: function(res){
		if (res.code == 1) {
			var html = "";
			for (var i=0; i<res.data.length; i++) {
				html += `<tr>
                <td class="text-center"><input type="checkbox"></td>
                <td>${res.data[i].name}</td>
                <td>${res.data[i].slug}</td>
                <td>${res.data[i].classname}</td>
                <td class="text-center">
                  <a href="javascript:;" data-id="${res.data[i].id}" class="btn btn-info btn-xs">编辑</a>
                  <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
                </td>
              </tr>`;
			}
			$(html).appendTo("tbody");
		}
	}
})

分类添加接口

api/_addCategory.php

$name = $_POST["name"];
$slug = $_POST["slug"];
$classname = $_POST["classname"];

$conn = mysqli_connect("127.0.0.1", "root", "root", "db_baixiu");
$sql = "insert into categories(name, slug, classname) values ('$name', '$slug', '$classname')";
$result = mysqli_query($conn, $sql);
$response = ["code" => 0, "msg" => "错误"];
if ($result) {
	$response["code"] = 1;
	$response["msg"] = "成功";
}
header("Content-Type: application/json; charset=utf-8");
echo json_encode($response);

分类添加ajax

$("#add-btn").on("click", function(){
	var name = $("#name").val();
	var slug = $("#slug").val();
	var classname = $("#classname").val();

	if (name == "") {
		$("#msg").text("名称不能为空");
		$(".alert").show();
	}

	$.ajax({
		type: "post",
		url: "api/_addCategory.php",
		data: {name:name, slug:slug, classname: classname};
		success: function(res){
			if (res.code == 1) {
				var html = `<tr>
	                <td class="text-center"><input type="checkbox"></td>
	                <td>${name}</td>
	                <td>${slug}</td>
	                <td>${classname}</td>
	                <td class="text-center">
	                  <a href="javascript:;" data-id="" class="btn btn-info btn-xs">编辑</a>
	                  <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
	                </td>
	              </tr>`;
				$(html).appendTo("tbody");
			}
		}
	})
})

分类编辑按钮事件

var current_tr;
$("tbody").on("click", ".edit", function(){
	current_tr = $(this).parents("tr"); 

	var name = current_tr.children().eq(1).text();;
	var slug = current_tr.children().eq(2).text();;
	var classname = current_tr.children().eq(3).text();

	$("#name").val(name);
	$("#slug").val(slug);
	$("#classname").val(classname);

	$("add-edit").attr("data-id", $(this).attr("data-id"));

	$("add-btn").hide();
	$("add-edit").show();
	$("add-cancel").show();
})

分类编辑接口

api/_updateCategory.php

$id = $_POST["id"];
$name = $_POST["name"];
$slug = $_POST["slug"];
$classname = $_POST["classname"];

$conn = mysqli_connect("127.0.0.1", "root", "root", "db_baixiu");
$sql = "UPDATE categories set name = '$name', slug = '$slug', classname = '$classname' WHERE id = $id";
$result = mysqli_query($conn, $sql);
$response = ["code" => 0, "msg" => "错误"];
if ($result) {
	$response["code"] = 1;
	$response["msg"] = "成功";
}
header("Content-Type: application/json; charset=utf-8");
echo json_encode($response);

分类编辑ajax

$("#add-edit").on("click", function(){
	var id = $(this).attr("data-id");
	var name = $("#name").val();
	var slug = $("#slug").val();
	var classname = $("#classname").val();

	if (name == "") {
		$("#msg").text("名称不能为空");
		$(".alert").show();
	}

	$.ajax({
		type: "post",
		url: "api/_updateCategory.php",
		data: {id:id, name:name, slug:slug, classname: classname};
		success: function(res){
			if (res.code == 1) {
				var name = $("#name").val();
				var slug = $("#slug").val();
				var classname = $("#classname").val();

				$("#name").val("");
				$("#slug").val("");
				$("#classname").val("");

				current_tr.children().eq(1).text(name);
				current_tr.children().eq(2).text(slug);
				current_tr.children().eq(3).text(classname);

				$("add-btn").show();
				$("add-edit").hide();
				$("add-cancel").hide();
			}
		}
	})
})

删除功能接口

$id = $_POST["id"];
$conn = mysqli_connect("127.0.0.1", "root", "root", "db_baixiu");
$sql = "DELETE FROM categories WHERE id = $id";
$result = mysqli_query($conn, $sql);
$response = ["code" => 0, "msg" => "失败"];
if ($result) {
	$response["code"] = 1;
	$response["msg"] = "成功";
}
header("Content-Type: appliction/json; charset=utf-8");
echo json_encode($response);

删除功能ajax

$("tbody").on("click", ".del", function(){
	var tr = $(this).parents("tr");
	var id = tr.attr("data-categoryid");
	$.ajax({
		type: "post",
		url: "api/_delCategory.php",
		data: {id:id},
		success: function(res){
			if (res.code == 1) {
				tr.remove();
			}
		}
	})
})

批量删除功能接口

$ids = $_POST["ids"];
$conn = mysqli_connect("127.0.0.1", "root", "root", "db_baixiu");
$sql = "DELETE FROM categories WHERE id in (" . implode(",", $ids) . ")";
$result = mysqli_query($conn, $sql);
$response = ["code" => 0, "msg" => "失败"];
if ($result) {
	$response["code"] = 1;
	$response["msg"] = "成功";
}
header("Content-Type: appliction/json; charset=utf-8");
echo json_encode($response);

删除功能ajax - 全选

$("thead input").on("click", function() {
	// var status = $(this).prop("checked");
	var status = this.checked;
	$("tbody input").prop("checked", status);
	if (status) {
		$("#delAll").show();
	} else {
		$("#delAll").hide();
	}
});

删除功能ajax - 勾选分类

$("tbody input").on("click", function() {
	var delAll = $("#delAll");
	var cks = $("tbody input");
	delAll.prop("checked", cks.size() == $("tbody input:checked").size());
	$("tbody input").prop("checked", status);
	if ($("tbody input:checked").size() > = 2) {
		$("#delAll").show();
	} else {
		$("#delAll").hide();
	}
});

删除功能ajax - 批量删除按钮

$("#delAll").on("click", function(){
	var ids = [];
	var cks = $("tbody input:checked").parents("tr");
	$.each(function(i, c){
		ids.push(c.attr("data-categoryid"));
	})
	$.ajax({
		type: "post",
		url: "api/_delCategorys.php",
		data: {ids:ids},
		success: function(res){
			if (res.code == 1) {
				cks.remove();
			}
		}
	})
})

所有文章 - 分类加载

$.ajax({
	type: "post",
	url: "api/_getCategoryData.php",
	success: function(res){
		if (res.code == 1) {
			for (var i = 0; i < res.data.length; i++) {
				var html = `<option value="${res.data[i].id}">${res.data[i].name}</option>`; 
				$(html).appendTo("#category");
			}
		}
	}
})

所有文章 - 状态下拉列表

<select id="status" name="" class="form-control input-sm">
<option value="all">所有状态</option>
<option value="drafted">草稿</option>
<option value="published">已发布</option>
<option value="trashed">已作废</option>
</select>

所有文章 - 分页函数

function showpage(currentpage, pagecount) {
	var start = currentpage - 2;
	if (start < 1) {
		start = 1;
	}
	var end = start + 4;
	if (end >= pagecount) {
		end = pagecount;
		if (pagecount > 4) {
			start = pagecount - 4;
		}
	}
	var html = "";
	if (currentpage > 1) {
		html += `<li><a href="javascript:;" data-page="${currentpage - 1}">上一页</a></li>`
	}
	for (var i = start; i <= end; i++) {
		html += `<li class="${i == currentpage ? "active" : ""}"><a href="javascript:;" data-page="${currentpage + 1}">${i}}</a></li>`
	}
	if (currentpage < pagecount) {
		html += `<li><a href="javascript:;" data-page="${currentpage + 1}">下一页</a></li>`
	}
	$("#pagination").html(html);
}

所有文章 - 显示数据

var statusData = {
  drafted: "草稿",
  published: "已发布",
  trashed: "已作废"
};

function showtable(data) {
	$("tbody").empty();
	for (var i = 0; i < data.length; i++) {
		data[i]
		var html = `<tr>
			<td class="text-center"><input type="checkbox"></td>
			<td>${data[i].title}</td>
			<td>${data[i].nickname}</td>
			<td>${data[i].name}</td>
			<td class="text-center">${data[i].created}</td>
			<td class="text-center">${statusData[data[i].status]}</td>
			<td class="text-center">
			  <a href="javascript:;" class="btn btn-default btn-xs">编辑</a>
			  <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
			</td>
		</tr>`;
		$("tbody").appendTo(html);
	}
}

所有文章 - 加载数据

function loaddata(categoryid, status, currentpage, pagesize){
	$.ajax({
		type: "get",
		url: "api/_getPostsData.php",
		data: {categoryid: categoryid, status: status, currentpage: currentpage, pagesize: push},
		success: function(res) {
			if (res.code == 1) {
				// 显示分页
				showpage(currentpage, res.pagecount);
				// 显示数据
				showtable(res.data);
			}
		}
	})
}

所有文章 - 点击分页链接事件

$("#pagination").on("click", "a", function(){
	var categoryid = $("categoryid").val();
	var status = $("#status").val();
	var currentpage = $(this).attr("data-page");
	loaddata(categoryid, status, categoryid, 10);
})

所有文章 - 点击筛选按钮事件

$("#btn-filt").on("click", function(){
	var categoryid = $("categoryid").val();
	var status = $("#status").val();
	loaddata(categoryid, status, 1, 10);
})

所有文章 - 接口

$categoryid = $_POST["categoryid"];
$status = $_POST["status"];
$currentpage = $_POST["currentpage"];
$pagesize = $_POST["pagesize"];

// 拼接sql语句
$sql = "SELECT posts.*, categories.name, users.nickname FROM posts
	LEFT JOIN categories ON posts.category_id = categories.id
	LEFT JOIN users ON posts.user_id = users.id";

// 拼接查询条件 categoryid status
$wheres = [];
if (empty($categoryid)) {
	$wheres[] = "posts.category_id = $categoryid";
}
if (empty($status)) {
	$wheres[] = "posts.status = '$status'";
}
$sql .= empty($wheres) ? "" : " WHERE " . implode(" AND ", $wheres);

// 拼接分页参数
$offset = ($currentpage - 1) * $pagesize;
$sql .= " LIMTI $offset, $pagesize";

// 链接数据库
$conn = mysqli_connect("127.0.0.1", "root", "root", "db_baixiu");

// 查询数据
$result = mysqli_query($conn, $sql);
$data = [];
while ($row = mysqli_fetch_assoc($result)) {
	$data[] = $row;
}

// 查询总行数 计算总页数
$sql = "SELECT count(*) AS pagecount FROM posts";
$sql .= empty($wheres) ? "" : " WHERE " . implode(" AND ", $wheres);
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_assoc($result);
$pagecount = ceil($row["pagecount"] / $pagesize);

$response = ["code" => 0, "msg" => "失败"];
if ($result) {
	$response["code"] = 1;
	$response["msg"] = "成功";
	$response["data"] = $data;
	$response["pagecount"] = $pagecount;
}
header("Content-Type: appliction/json; charset=utf-8");
echo json_encode($response);

模板引擎

art-template第三方

引入js文件

<script type="text/javascript" src="../template-web.js"></script>

模板

<script type="text/javascript" id="tmp_id">
// $data 代表传入的所有数据
// 显示数据
{{var_name}} <%=var_name%>
// 条件语句
{{if 条件}} xxx {{else if 条件}} {{else}} xxx {{/if}}
<% if (条件) { %> xxx <% } else if (条件) { %> xxx <% } else { %> xxx <% } %>
// 循环语句 
{{each $data value index}} xxx {{/each}}
<% for(var i=0; i< data.length; i++) { %> xxx <% } %>
</script>

渲染数据

var html = template("tmp_id", {数据});

其他三种拼接字符串的方式

字符串拼接 += 
模板字符串 `
斜杠转义 行尾\

分页插件

twbsPagination分页插件依赖jQuery

// 当前第几页 总共多少也
$(".pagination要将分页显示在哪里").twbsPagination({
	totalPages: 100, // 总页数
	visiblePages: 7, // 显示多少页
	onPageClick: function(event, page) { // event 事件对象 page 当前点击的是哪一页
		// 根据page加载数据
	}
})

模块化

requirejs 模块化

优点

只需要一次引入js文件就可以了

方便模块管理

一个模块就是一个单独的js, js中封装了单独的业务逻辑

轮播图js文件

// 配置模块文件所在的路径
require.config({
	paths: {
		"jquery": "/static/assets/vendors/jquery/jquery.js",
		"xxxx": "/static/assets/vendors/xxxx/xxxx.js",
	},
	shim: {
		"xxxx": ["jquery"]
	}
})

// require 方法 会在加载完依赖模块以后 在执行回调函数中的代码
require(["jquery", "xxxx"], function($, xxx){
	$("img").on("load", function(){
		// xxx
	});
})

html页面中使用

<script type="text/javascript" src="/static/assets/vendors/requirejs/requirejs.js" data-main="../slides.js"></script>

requirejs模块化的优点

所有的功能只需要一个js文件就可以如果以来其他文件 requirejs会帮你加载js文件

壮壮小朋友

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX笔记

删除if (isset($_GET["id"])) { $id = $_GET["id"]; $sql = "DELETE FROM userinfo WHERE id = '$id'"; if (opt($sql)) { header("Location: static.php"); } else { echo "<script>history.back();&lt...
复制链接

扫一扫