PHP与jQuery

发表于 更新于 Disqus：

摘要

作为一个初入 PHP、偶尔写一点后台管理系统的前端部分的小菜鸟，需要学习的东西真的太多太多。
     循序渐进，本月研读了 Pro PHP and jQuery 这本书，印象深刻，所以趁热打铁整理了一些对前后端联调很有用的小 Tips。

后台向前端传值方式：1、模板输出(smarty); 2、ajax 函数回调；

写在最前

为了防止 PHP 中的变量符$与jQuery冲突，本文代码中jQuery与正常情况使用jQuery时的$等价。

准备工作

获取数据

即传送给后端的数据，多数为表单内容。

1
2
3
4
5
jQuery('.content').html();  //获取标签内所有内容，包括html符号等
jQuery('.content').text();  //获取标签内所有文本
jQuery('.content').val();  //获取value值
jQuery(this).parent().find('.content').text(); //在当前元素的父元素中查找content类，并获取文本值
jQuery(this).attr('type');  //获取当前元素type属性的值

前端数据验证

为防止前端频繁访问后台，加大服务器压力，前端需进行数据验证。

空值判断

手机号、电子邮件等：使用正则表达式验证
提醒式验证：如“确定删除”，可以使用 confirm()等方法
验证失败可弹出提示或重定位界面。

ajax 传值

前端验证成功后就可以向后台请求数据了，jQuery 给我们封装了 ajax 方法，多数操作将是 success 回调函数中完成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
jQuery.ajax({
	type: 'post',	//传值方式，post/get
	url: '/gxapi/rank',	//请求地址
	dataType: "json",   //传送数据格式，json是前后端常用传值数据格式
	data: {content: content, type: type}, //要传送的数据值{后端接受字段名称：前端发送字段名称},通常另两者名称相等。
	success: funtion (res) {
		if(res.code) {
			//有数据的操作,多在此更改局部数据
			...
		}else{
			//请求失败，多为未登录、无数据等
			...
		}
	}
});

注意：1、浏览器可以自动识别 json 数据，web 应用可以不用设置；2、如果涉及移动端，则必须设置 json 格式；3、跨域请求数据需设置 dataType 格式为 jsonp。

碎片功能

点击事件

  • 点击某元素触发事件，如增加、删除、编辑等。

通过模板渲染所得的页面，可以直接对 dom 元素进行操作，例如：

1
2
3
4
jQuery('.btn').click(function () {
	//点击事件后续操作
	...
});
  • 通过动态生成得到的界面，操作 dom 元素时需要绑定元素，下面的例子中，list 类是非动态生成的元素，我们将 delete 点击事件绑定到该元素上，例：
1
2
3
4
jQuery('.list').on('click', '.delete', function () {
	//点击事件后续操作
	...
});
  • 其中 click 可以更改为 change、hover 等，在对列表进行操作时常用。另外还有一种方式，适用于 jQuery 版本较低的场景。
1
2
3
4
jQuery(".list").delegate(".delete", "click", function () {
	//点击事件后续操作
	...
});

需要注意的是，这两个方法的 click 位置不同。

数据处理

  • 保留小数点后两位：Number(num).toFixed(2)
  • 遍历：可用于批量操作
1
2
3
4
 jQuery.each(res.data, function (i, item) {
	//批量操作、结合append()生成列表行等
	...
});

注意：当遍历 dom 元素时一定要注意在遍历前元素已经生成。

其他小技巧

  • 前端获取到数据后可以存在 display:none 的标签里，便于以后使用。
  • 要更改样式最简单的方法还是通过 css，故我们可以通过给元素添加 class 并设置 class 的值来批量更改样式。