jQuery的ajax的简单应用

jQuery的ajax的简单应用

ajax 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。在结对编程项目中，我第一次使用了ajax，以前还觉得前后端数据交互很麻烦，不得不说真香啊！

先来看一个简单的例子~ 场景是注册用户时向后台发送数据

    function submit() {
        //根据元素id获取元素内容
        var username = $("#username").val();
        var password = $("#password").val();
        var passwordToo = $("#passwordToo").val();
        var VCode = $("#VCode").val();
        $.ajax({
            type: "post",
            url: "http://localhost:8083/RegisterSuccess",
            data: {
                'username': username,
                'password': password,
                'passwordToo': passwordToo,
                'VCode': VCode
            },
            success: function (response) {
                alert(response)
            }
        })
    }

submit是一个按钮的点击事件，当点击这个按钮时，程序会从前端界面根据id获取对应元素中的内容，并将数据传到所设定的接口。

接下来我们详细了解一下ajax中的内容：

        $.ajax({
            //规定请求的类型  get或者post
            type: "post",
            //规定请求发送的url
            url: "http://localhost:8083/RegisterSuccess",
            //规定要发送到服务器的数据，冒号前时数据传入服务器的变量名，冒号后是数据在前端的变量名，相当于变量赋值操作
            data: {
                'username': username,
                'password': password,
                'passwordToo': passwordToo,
                'VCode': VCode
            },
            //当发送成功时，接收返回的数据response，可以是字符串或者json格式
            success: function (response) {
                alert(response)
            }
        })

那后端是怎么接收数据的捏

  @RequestMapping("/RegisterSuccess")
    //HttpServletRequest 对象用于封装 HTTP 请求信息，HttpServletReponse 对象用于封装 HTTP 响应信息
  public void toRegisterSuccess(HttpServletResponse response, HttpServletRequest request)
      throws IOException {
      //request.getParameter("VCode") 是获取发送过来的变量名为VCode的数据，同理request.getParameter("password") 是获取ajax发送的变量名为password的数据，以此类推...
    if (verificationCode.validOrNot(request.getParameter("VCode"), new Date())) {
      if (request.getParameter("password").equals(request.getParameter("passwordToo"))) {
        User user = new User(request.getParameter("username"), request.getParameter("password"));
        userServiceImpl.add(user);
          //使用response返回数据给前端
        response.getWriter().write("Registered successfully");
        System.out.println("插入数据成功");
      }
    }
  }

总而言之就是 HttpServletRequest负责接受前端发送的数据，HttpServletResponse负责向前端发送的数据！

ajax还有其他的方法，比如 get 和 post ，但是全部属于在原始ajax方法上的简化，这里暂时不做讲解啦