最近想想自己前端知识中比较匮乏的部分, 感觉Ajax方面的内容是我比较不熟练的, 于是决定重看以前妙味课堂的视频, 然后再自己做一些前端HTML+Ajax+MYSQL+PHP的小实例, 想了想便决定做一个登录框然后从MYSQL读取数据进行验证并且在前端返回结果, 弹出对话框显示用户名不存在或密码错误或者登陆成功等信息. 接下来讲讲制作的过程以及遇到的问题和解决方案.
整个实例的思路是这样子的: 一个前端页面上有两个输入框, 当用户什么都不输入直接点击登录按钮时, 通过JS弹出警告框提示用户输入内容. 如果用户输入好内容后点击登录按钮, 则通过JS代码实现Ajax, 将用户输入的数据整理成传送数据的格式后传到后台PHP文件, PHP从MYSQL数据库中读取数据, 检测用户输入的用户名是否存在, 如果不存在则返回信息给前端, 如果存在, 检测数据库中该用户名对应的密码与用户在前端页面输入的密码是否一致, 如果不一致则返回"输入密码错误"到前端页面并弹出对话框提醒用户, 如果密码一致的话则返回"登录成功"到前端页面
一. 在MYSQL中新建数据库和数据表并插入几条记录
二. 准备好静态页面(登录框)
三. 点击登录按钮涉及的相关JS
点击登录按钮后获取用户名和密码两个输入框的值, 首先验证输入是否为空, 若不为空则通过deliverData将数据传递, deliverData方法用于将两个输入框的值串联成适合用于Ajax中get方法传递数据的方式:在url后面加"?"然后将数据以"username=aaa&password=bbb"的形式连接起来, 然后调用Ajax方法, 这个Ajax方法是妙味课堂中学到的一个已经封装好的使用Ajax方法, 而且封装的比较完善, 考虑到了不同浏览器的兼容问题已经传递数据是get方式还是post方式, 下面是这个Ajax方法
Ajax方法中的几个参数分别对应: method是指传递数据是以get方式还是以post的方式, url是指传递数据到指定文件的路径, data是指传递过去的数据, fn是指要执行的回调函数, 而第53行的xhr.responseText就是通过Ajax返回的内容. 从上图中的deliverData方法可以看出, 本次调用ajax方法是采取get的方式, 传递数据到validateLogin.php文件, 传递的数据是用户输入的用户名和密码, 执行的回调函数为将返回的信息通过对话框显示出来.
几个值得注意的地方:
1. 第34行是为了为了兼容IE6,IE6下没有XMLHttpRequest对象
2. 36-38行是在get方式下是以在url后面添加"?"并加上数据的方式来传递数据的.
3. 42-47行是指, 如果传递方式是get的方式的话, 直接调用send方法来发送指令就可以了, 而如果是通过post的方式的话传递数据就跟get的那种在url后面加数据的方式不同, 需要先调用setRequestHeader方法, 然后将传递的数据作为send方法的参数进行传递.
我所理解的ajax其实主要就是几个步骤: 1. 建立执行Ajax操作的XMLHttpRequest对象 2.调用open方法, 三个参数分别是使用get还是post方式, 传递数据的目标文件, 同步还是异步执行( true为同步, false为异步). 3.调用send()方法发送请求. 4.通过readystatechange事件监听ajax的进程执行状态发生改变 5.当xhr对象的属性readyState的值为4时表示发送请求成功且成功返回内容, 可以操作返回的内容了. xhr对象的属性responseText表示通过Ajax返回的内容.
四. 执行从数据库读取数据并与前端传递过来的数据进行对比的PHP文件validateLogin.php
由于我是第一次接触PHP连接数据库, 所以感觉可以总结的东西比较多, 内容如下:
1. 第2行"header("Content-type:text/html;charset=utf-8");"的作用是可以解决中文乱码问题, 没有这一行的话从数据库读取出来的中文可能是乱码.
2. 第5,6行是获取通过Ajax传递过来的数据, 如果是通过get方式则使用$_GET获取, 如果是通过post方式则使用$_POST方式获取.
3. 第9-12行为声明变量, 分别是服务器的名称( MYSQL如果不修改的话默认端口号为3306 ), 登录数据库的用户名和密码, 读取数据的数据库. 第14行通过mysql_connect方法连接数据库, 16行通过mysql_select_db方法选择要从哪个数据库读取数据.
4. 第17行为SQL的查询语句, 通过"."将查询语句的字符串和从前端获取的数据$username进行结合, 就可以根据传递过来的数据动态得执行查询语句. 第18行通过mysql_query方法执行查询语句并将返回的结果集保存在变量result中.
5. 第20行使用mysql_num_rows方法计算结果集中的记录条数并保存在变量$num中, 如果$num = 0, 说明结果集为空, 也就是说用户输入的用户名在数据库中没有查询到匹配记录, 则输出"用户名不存在"的字样. 通过Ajax传递数据并得到返回内容时, 在PHP中使用echo 'xxx'就可以返回内容到前端.
6. 如果$num不等于0, 说明结果集不为空, 也就是说用户输入的字符串是可以在数据库中查询到匹配记录的. 第26行使用mysql_data_seek方法跳到结果集中的第一条记录.
7. 第30行通过mysql_fetch_row方法将结果集result中当前行的记录取出来保存在变量$row中, 而$row[2]表示将记录中的第3个字段的值取出来,