AJAX异步请求数据-蒲公英云

文章目录

前言
一、AJAX是什么？
二、使用步骤
- 1.语法格式
- 2.示例
- 2.注意事项
总结

前言

本篇主要介绍怎么使用AJAX向服务器请求数据。

一、AJAX是什么？

异步请求技术,可以实现页面局部刷新,在不刷新页面的情况下发送请求到后台加载数据,并且展现在前端

二、使用步骤

1.语法格式

代码如下：

$.get(url,data,function(data){
})
发送get请求
参数1: url 是后台服务器地址
参数2: data 是发送到后台服务器的数据,是map格式,
        形如 {
     name: "John", time: "2pm" }
参数3: function 函数,是回调函数,是请求完成后执行的函数,参数data就是后台返回的数据
--------------------------------------------------------------------
$.post(url,data,function(data){
})
发送post请求
参数1: url 是后台服务器地址
参数2: data 是发送到后台服务器的数据,是map格式,
        形如 {
     name: "John", time: "2pm" }
参数3: function 函数,是回调函数,是请求完成后执行的函数,参数data就是后台返回的数据
--------------------------------------------------------------------
$.ajax()是综合应用,
        1) 可以随意指定请求方式
        2) 可以指定发送到后台的数据类型
            一般表单发送的数据,称作表单数据,形如name=admin&pwd=123456
                                 servlet后台使用req.getParameter()接收
            可以指定为json数据,形如{
    "name":"admin","pwd":"123456"}
                        servlet后台使用字符流读取数据,拼接成json串                   
        3) 可以指定接收数据的格式
--------------------------------------------------------------------
$.ajax({
    url:"",  // 请求路径
    type:"get|post", // 指定请求方式,不写默认是get
    contenType:"application/x-www-form-urlencoded", // 默认的,发送表单数据
                              // "application/json" , 按json格式发送
    data:"name=admin&pwd=123456", // 发送到后台的数据
           // 如果是指定是json格式,此处应该{"name":"admin","pwd":"123456"}
    success:function(data){
      // 请求成功的回调,data就是后台返回的数据
    },
    error:function(){
      // 请求异常的回调函数
        alter("服务器正忙,稍后再试");
    }
})

2.示例

需求: 注册时,写完用户名,提示该用户名是否存在可否注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
用户名<input id="input-1" type="text" name="username"> <span id="span-1"></span>
<script src="/day42/js/jquery-3.6.0.js" type="text/javascript"></script>
<script type="text/javascript">
    $("#input-1").blur(function (){
        var name = $("#input-1").val();
        // $.get 发送到后台的数据,其实表单数据
       $.get("/day42/check/user",{
    username:name},function (data){
            // console.log(data);
           // 后台返回的是json数据
           if (data.code == 200) {
               $("#span-1").text(data.msg)
               $("#span-1").css("color","green")
           } else {
               $("#span-1").text(data.msg)
               $("#span-1").css("color","red")
           }
       })
    })
</script>
</body>
</html>
package com.qf.servlet;
import com.qf.model.User;
import com.qf.service.impl.UserServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
 * --- 天道酬勤 ---
 *
 * @author QiuShiju
 * @desc
 */
@WebServlet("/check/user")
public class CheckUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 接收数据
        String username = req.getParameter("username");
        System.out.println("CheckUserServlet.doGet() username = " + username );
        // 传递数据给service
        UserServiceImpl userService = new UserServiceImpl( );
        User user = userService.findUserByUsename(username);
        System.out.println("CheckUserServlet.doGet() user = " + user );
        // 设置响应的内容类型为json格式
        resp.setContentType("application/json;charset=utf-8");
        // 响应json数据,拼接json
        PrintWriter out = resp.getWriter( );
        // 判断
        if (user != null) {
     // 已存在,不能再注册
            // 响应json数据
            out.write("{\"code\":500,\"msg\":\"已经存在,不能注册\"}");
        } else {
     // 不存在,可以注册
            out.write("{\"code\":200,\"msg\":\"可以注册\"}");
        }
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}