前言

在当今高度互动的Web应用环境中，Ajax技术无处不在，它如同桥梁般连接前端与后端，实现了页面的无缝更新与流畅交互。本实战项目将深入浅出地引领你构建一个实时响应、高效沟通的Ajax应用，从基础配置到高级技巧，每一步都旨在加深理解并提升实战能力。让我们一同启程，探索Ajax如何重塑现代Web体验，赋予网页应用程序前所未有的活力与效率。接下来，让我们开始ajax项目实战，深入了解它的魅力吧！

1.项目要求

做一个如下的网易云页面，并且能够将数据正确传输给后端(已有后端地址)，如果账号密码符合后端要求，后端会返回密码，如果得到密码，显示登陆成功图标，1秒后消失。

2.html部分

  <div class="login">
    <div class="bgi"></div>
    <div class="hd">网易云音乐</div>
    <div class="logo"></div>
    <div class="login-container">
      <div class="input1">
        <p>账号</p>
        <input type="text" placeholder="输入手机号" class="input11">
      </div>
      <div class="input2">
        <p>密码</p>
        <input type="text" placeholder="输入密码" class="input22">
      </div>
      <button class="btn">登录</button>
    </div>
  </div>

我们的大致内容是这样的：

• <div class="login">: 整个登录界面的容器，包含所有登录相关的元素。

• <div class="bgi">: 背景图片或背景层的容器，可以通过CSS设置背景图像或颜色，为登录界面提供视觉背景。

• <div class="hd">网易云音乐</div>: 显示登录页面的标题，这里是“网易云音乐”。

• <div class="logo"></div>: 通常用来放置应用或品牌的Logo图标，具体样式需通过CSS定义。

• <div class="login-container">: 包含登录表单元素的容器，对齐并组织输入框和按钮等元素。

  • <div class="input1"> 和 <div class="input2">: 分别为账号输入和密码输入的容器，每个容器内包含一个描述标签（<p>）和输入框（<input>）。

    • <input type="text" placeholder="输入手机号" class="input11">: 账号输入框，类型为文本，提示用户输入手机号。
    • <input type="text" placeholder="输入密码" class="input22">: 密码输入框，同样类型为文本，提示用户输入密码。实际应用中，密码输入框应使用type="password"以隐藏输入内容。

• <button class="btn">登录</button>: 登录按钮，用户点击此按钮以提交登录信息。后续可通过JavaScript或Ajax处理按钮的点击事件，验证用户输入并执行登录逻辑。

3.css部分

 <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      position: relative;
      width: 375px;
      height: 667px;
    }

    .login {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: red;
    }

    .hd {
      width: 100%;
      height: 120px;
      text-align: center;
      line-height: 50px;
      color: white;
    }

    .logo {
      width: 100%;
      height: 139px;
      background-image: url(./wangyiyun.png);
      background-size: 120px 120px;
      background-repeat: no-repeat;
      background-position: center;
    }

    .login-container {
      position: relative;
      width: 100%;
      height: 412px;
      overflow: hidden;
    }

    .input1 {
      width: 100%;
      height: 44px;
      margin-top: 160px;
      line-height: 44px;
    }

    .input2 {
      width: 100%;
      height: 42px;
      margin-top: 40px;
    }

    button {
      position: absolute;
      height: 36px;
      width: 271px;
      border-radius: 10px;
      text-align: center;
      line-height: 36px;
      border: 1px white solid;
      left: 60px;
      bottom: 48px;
    }

    p {
      display: inline-block;
      margin-left: 56px;
      color: white;
    }

    input {
      width: 211px;
      height: 42px;
      margin-left: 24px;
      background-color: red;
      color: white;
      border: 1px white solid;
    }

    input::placeholder {
      color: white;
    }

    .bgi {
      position: absolute;
      background-image: url(./dengluchenggong.png);
      width: 100%;
      height: 139px;
      background-size: 141px 141px;
      background-repeat: no-repeat;
      background-position: center;
      margin-top: 153px;
      margin-left: 0;
      display: none;
    }
  </style>

这段CSS代码为一个移动端的登录界面提供了样式设定。整体布局采用绝对定位，适应375x667像素的屏幕尺寸。登录界面背景色为红色，包含页头、logo区域、登录表单及登录按钮。页头(.hd)居中显示应用名称，使用白色文字以提高对比度。logo部分通过背景图片(wangyiyun.png)展示品牌形象。登录表单(.login-container)内含两个输入框(.input1, .input2)分别用于输入账号和密码，均设置了红色背景、白色边框及占位符文字。按钮位于界面底部，具备圆角、白色边框及居中文本。输入框和按钮在视觉上进行了适当的空间调整以保证良好的用户体验。此外，还有一个隐藏的背景图片(dengluchenggong.png)预备用于登录成功等场景。

这个时候我们的静态图是这样的。

接下来让我们重点关注ajax部分。

4. 前后端交互部分

4.1获取数据

    let input11 = document.querySelector('.input11')
    let input22 = document.querySelector('.input22')
    let bgi = document.querySelector('.bgi')
    let btn = document.querySelector('.btn')

我们首先进行一些必要数据的获取。方便后面在js中进行操作。

4.2绑定事件

 btn.addEventListener('click', () => {
      fetch(`后端地址?username=${input11.value}&password=${input22.value}`)
        .then((res) => {
          return res.json()
        })
        .then((data) => {
          if (data.code == 0) {
            bgi.style.display = 'block'
            setTimeout(() => {
              bgi.style.display = 'none'
            }, 1000)
          }
        })
    })

接下来我们进行事件的绑定，在按钮上绑定点击事件，我们采用fetch（还有手写和jquery方法），

1. 首先我们在fetch里面填入后端地址+‘？’+传送给后端的参数，这里因为要传入一个变量，因此我们采用模板字符串的方式。此外大家要记得两点，一个是文本输入框没有innerhtml结构，必须用value，还有就是不能在绑定事件之前就确定好了value，这个时候是空，我在一开始就不小心犯了这个错误。
2. 然后我们调用then方法，返回这个结果的对象形式。
3. 再次调用then方法，这个时候，由于我们后端会有返回值code=0，如果输入均正确的话。因此我们可以将之前隐藏的登录成功按钮显示，然后设置一个定时器，1秒后消失。

最终我们输入正确形式的电话号码和密码后，会成功传输数据到后端，并且弹出登录成功的界面，三秒后将会消失。