【PHP学习】—利用ajax原理实现登录功能（八）

缺乏、安全感 2022-10-08 13:22 133阅读 0赞

## 【PHP学习】—利用ajax原理实现登录功能（八） ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70]  
**通过学习上篇文章我们发现这种方法存在了一定的缺陷，利用页面跳转，HTML页面访问服务器，要等待服务器响应，账号密码输入错误后，还要回退页面重新输入账号和密码，通过观察其他平台的登录页面可以发现页面是不刷新的，也不存在页面跳转的情况。怎么来实现呢？见下文**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20210621184831314.gif_pic_center]

**实现思路如下**

*  点击按钮 登录事件
 *  获取输入表单的数据的值
 *  创建 ajax对象 (jquery) 封装好的方法
 *  ajax配置的参数 请求的url 请求的方式post/get 发送数据
 *  PHP返回数据 JS渲染数据——界面  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 2]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70]: /images/20221005/4eff38cb171e44a99e4ce1dfe7b110e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 1]: /images/20221005/d7833462b53f4136bae3145879e33e7f.png
[20210621184831314.gif_pic_center]: /images/20221005/3ca0665cca3f4892a8a8ea3b344f65bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 2]: /images/20221005/1c31bb984803434b9a356223be93083d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 3]: /images/20221005/cb219b87db66408ab25c299db8dd0700.png