03.利用JQ实现异步请求

其他 2020-07-24 11:32:09 阅读次数: 0

1. 利用JQ实现异步请求

$.ajax({
    // 请求方式
    method:'POST',
    // 请求资源
    url:'xxxxxx.do',
    // 请求参数
    data:'username=tom&password=123',
    // 成功回调
    success:function(data){
        // data请求返回数据
    },
    // 失败回调
    error:function(error){
    }
});

2. GET请求的Text交互

  • jQuery-min.js提供ajax异步访问方法

2.1 TextServlet.java

package zw.ajax.servlet;

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;

/**
 * @ClassName TextServlet
 * @Description 异步请求处理Servlet类
 * @Author 周威
 * @Date 2020-07-16 9:45
 * @Version 1.0
 **/
@WebServlet("/text")
public class TextServlet extends HttpServlet
{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        //设置response缓冲区字符集
        response.setCharacterEncoding("UTF-8");
        //设置请求响应头
        response.setHeader("Content-Type", "application/x-www-form-urlencoded");
        //获取输出流
        PrintWriter pw = response.getWriter();
        //向客户端写数据
        pw.println("Hello World");
        //关闭流资源
        pw.close();
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        
    }
}

2.2 index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>测试</title>
    <meta http-equiv="Content-Type" content="text/html;charsetr=utf-8"/>
    <meta name="author" content="周威"/>
    <%-- 引入jQuery --%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jQuery-min.js"></script>
    <script type="text/javascript">
      function sendHandler()
      {
        $.ajax({
          // 设置请求方式
          method:'GET',
          // 设置请求地址
          url:'${pageContext.request.contextPath}/text',
          // 请求成功回调
          success:function(data){
            // 控制台打印输出
            console.log(data);
          }
        });
      }
    </script>
  </head>
  <body>
    <%-- 通过按钮发送异步的GET请求 --%>
    <button type="button" onClick="sendHandler()">发送请求</button>
  </body>
</html>

2.3 运行结果

在这里插入图片描述

3. POST请求的Text交互

  • jQuery-min.js提供ajax异步访问方法

3.1 TextServlet.java

package zw.ajax.servlet;

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;

/**
 * @ClassName TextServlet
 * @Description 异步请求处理Servlet类
 * @Author 周威
 * @Date 2020-07-16 9:45
 * @Version 1.0
 **/
@WebServlet("/text")
public class TextServlet extends HttpServlet
{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        //设置request和response缓冲区字符集
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        //获取请求参数
        String data = request.getParameter("data");
        //控制台打印请求字符串
        System.out.println("data = " + data);
        //设置请求响应头
        response.setHeader("Content-Type", "application/x-www-form-urlencoded");
        //获取输出流
        PrintWriter pw = response.getWriter();
        //向客户端写数据
        pw.println(data);
        //关闭流资源
        pw.close();
    }
}

3.2 index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>测试</title>
    <meta http-equiv="Content-Type" content="text/html;charsetr=utf-8"/>
    <meta name="author" content="周威"/>
    <%-- 引入jQuery --%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jQuery-min.js"></script>
    <script type="text/javascript">
      function sendHandler()
      {
        $.ajax({
          // 设置请求方式
          method:'POST',
          // 设置请求地址
          url:'${pageContext.request.contextPath}/text',
          // 设置请求参数
          data:'data=Hello World',
          // 请求成功回调
          success:function(data){
            // 控制台打印输出
            console.log(data);
          }
        });
      }
    </script>
  </head>
  <body>
    <%-- 通过按钮发送异步的POST请求 --%>
    <button type="button" onClick="sendHandler()">发送请求</button>
  </body>
</html>

3.3 运行结果

在这里插入图片描述

在这里插入图片描述

4. GET请求的JSON交互

  • 前台：
    • jQuery-min.js提供ajax异步访问方法
    • jQuery-json.js提供json字符串转json对象，json对象转json字符串
  • 后台：
    • fastjson-1.2.68.jar进行json数据的解析

4.1 Student.java

package zw.ajax.domain;

import java.io.Serializable;
import java.util.Date;

/**
 * @ClassName Student
 * @Description 学生实体类
 * @Author 周威
 * @Date 2020-07-16 11:07
 * @Version 1.0
 **/
public class Student implements Serializable
{
    private String name;
    private Integer age;
    private String sex;
    private Date birthday;

    public String getName()
    {
        return name;
    }

    public void setName(String name)
    {
        this.name = name;
    }

    public Integer getAge()
    {
        return age;
    }

    public void setAge(Integer age)
    {
        this.age = age;
    }

    public String getSex()
    {
        return sex;
    }

    public void setSex(String sex)
    {
        this.sex = sex;
    }

    public Date getBirthday()
    {
        return birthday;
    }

    public void setBirthday(Date birthday)
    {
        this.birthday = birthday;
    }

    @Override
    public String toString()
    {
        return "Student{" +
                "name='" + name + '\'' +
                ", age=" + age +
                ", sex='" + sex + '\'' +
                ", birthday=" + birthday +
                '}';
    }
}

4.2 JsonServlet.java

package zw.ajax.servlet;

import com.alibaba.fastjson.JSON;
import zw.ajax.domain.Student;
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.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.Date;

/**
 * @ClassName JsonServlet
 * @Description 异步请求处理Servlet类
 * @Author 周威
 * @Date 2020-07-16 9:45
 * @Version 1.0
 **/
@WebServlet("/json")
public class JsonServlet extends HttpServlet
{
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        //创建一个student对象
        Student student = new Student();
        student.setName("tom");
        student.setAge(20);
        student.setSex("男");
        student.setBirthday(new Date());
        //设置response缓冲字符集
        response.setCharacterEncoding("UTF-8");
        //响应json字符串
        PrintWriter pw = response.getWriter();
        pw.println(JSON.toJSONString(student));
        pw.close();
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        
    }
}

4.3 index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>测试</title>
    <meta http-equiv="Content-Type" content="text/html;charsetr=utf-8"/>
    <meta name="author" content="周威"/>
    <%-- 引入jQuery --%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jQuery-min.js"></script>
    <%-- 引入jQuery-json --%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jQuery-json.js"></script>
    <script type="text/javascript">
      function sendHandler()
      {
        $.ajax({
          // 设置请求方式
          method:'GET',
          // 设置请求地址
          url:'${pageContext.request.contextPath}/json',
          // 请求成功回调
          success:function(data){
            // 控制台打印输出
            console.log($.parseJSON(data));
          }
        });
      }
    </script>
  </head>
  <body>
    <%-- 通过按钮发送异步的GET请求 --%>
    <button type="button" onClick="sendHandler()">发送请求</button>
  </body>
</html>

4.4 运行结果

在这里插入图片描述

5. POST请求的JSON交互

  • 前台：
    • jQuery-min.js提供ajax异步访问方法
    • jQuery-json.js提供json字符串转json对象，json对象转json字符串
  • 后台：
    • fastjson-1.2.68.jar进行json数据的解析

5.1 Student.java

package zw.ajax.domain;

import java.io.Serializable;
import java.util.Date;

/**
 * @ClassName Student
 * @Description 学生实体类
 * @Author 周威
 * @Date 2020-07-16 11:07
 * @Version 1.0
 **/
public class Student implements Serializable
{
    private String name;
    private Integer age;
    private String sex;
    private Date birthday;

    public String getName()
    {
        return name;
    }

    public void setName(String name)
    {
        this.name = name;
    }

    public Integer getAge()
    {
        return age;
    }

    public void setAge(Integer age)
    {
        this.age = age;
    }

    public String getSex()
    {
        return sex;
    }

    public void setSex(String sex)
    {
        this.sex = sex;
    }

    public Date getBirthday()
    {
        return birthday;
    }

    public void setBirthday(Date birthday)
    {
        this.birthday = birthday;
    }

    @Override
    public String toString()
    {
        return "Student{" +
                "name='" + name + '\'' +
                ", age=" + age +
                ", sex='" + sex + '\'' +
                ", birthday=" + birthday +
                '}';
    }
}

5.2 JsonServlet.java

package zw.ajax.servlet;

import com.alibaba.fastjson.JSON;
import zw.ajax.domain.Student;
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.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.Date;

/**
 * @ClassName JsonServlet
 * @Description 异步请求处理Servlet类
 * @Author 周威
 * @Date 2020-07-16 9:45
 * @Version 1.0
 **/
@WebServlet("/json")
public class JsonServlet extends HttpServlet
{
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
       
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        //设置request、response缓冲字符集
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        String jsonText = readAsText(request.getInputStream(), "UTF-8");
        //解析json字符串
        Student student = JSON.parseObject(jsonText, Student.class);
        System.out.println("student = " + student);
        //响应json字符串
        PrintWriter pw = response.getWriter();
        pw.println(JSON.toJSONString(student));
        pw.close();
    }

    //读取TCP Stream流
    private String readAsText(InputStream is, String charset) throws IOException
    {
        ByteArrayOutputStream bo = new ByteArrayOutputStream(4096);
        byte[] data = new byte[1024];
        while (true)
        {
            int len = is.read(data);
            // 连接已经断开
            if(len < 0)
            {
                break;
            }
            // 数据未完
            if(len == 0)
            {
                continue;
            }
            // 缓存起来
            bo.write(data, 0, len);
            // 上限, 最多读取16KB
            if(bo.size() > 1024*16)
            {
                break;
            }
        }
        return bo.toString(charset);
    }
}

5.3 index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>测试</title>
    <meta http-equiv="Content-Type" content="text/html;charsetr=utf-8"/>
    <meta name="author" content="周威"/>
    <%-- 引入jQuery --%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jQuery-min.js"></script>
    <%-- 引入jQuery-json --%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jQuery-json.js"></script>
    <script type="text/javascript">
      function sendHandler()
      {
        // 定义一个json对象
        let jsonObject = {name:"tom", age:100, sex:"男", birthday:new Date()};

        $.ajax({
          // 设置请求方式
          method:'POST',
          // 设置请求地址
          url:'${pageContext.request.contextPath}/json',
          // 设置请求参数
          data:$.toJSON(jsonObject),
          // 请求成功回调
          success:function(data){
            // 控制台打印输出
            console.log($.parseJSON(data));
          }
        });
      }
    </script>
  </head>
  <body>
    <%-- 通过按钮发送异步的POST请求 --%>
    <button type="button" onClick="sendHandler()">发送请求</button>
  </body>
</html>

5.4 运行结果

在这里插入图片描述

在这里插入图片描述

6. 文件异步上传

  • 前台：
    • jQuery-min.js提供ajax异步访问方法
    • FormData对象封装文件进行提交
  • 后台：
    • commons-fileupload-1.4.jar进行文件上传解析
    • commons-io-2.7.jar进行文件读写

6.1 FileServlet.java

package zw.ajax.servlet;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;
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.*;
import java.util.List;

/**
 * @ClassName FileServlet
 * @Description 异步请求处理Servlet类
 * @Author 周威
 * @Date 2020-07-16 13:57
 * @Version 1.0
 **/
@WebServlet("/file")
public class FileServlet extends HttpServlet
{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        boolean status = false;
        try
        {
            //创建磁盘文件项工厂类
            DiskFileItemFactory dfif = new DiskFileItemFactory();
            //创建核心解析对象
            ServletFileUpload up = new ServletFileUpload(dfif);
            //解析request
            List<FileItem> list = up.parseRequest(request);
            for (FileItem fileItem : list)
            {
                if (fileItem.isFormField())
                {
                    //普通表单域
                }
                else
                {
                    //文件表单域
                    String fileName = fileItem.getName();
                    File file = new File("D://Idea//upload", fileName);
                    //进行文件读写操作
                    InputStream is = fileItem.getInputStream();
                    FileUtils.copyInputStreamToFile(is, file);
                }
            }
            status = true;
        }
        catch (FileUploadException e)
        {
            e.printStackTrace();
            status = false;
        }

        //进行响应
        if(status)
        {
            response.setCharacterEncoding("UTF-8");
            PrintWriter pw = response.getWriter();
            pw.println("上传成功");
            pw.close();
        }
        else
        {
            response.setCharacterEncoding("UTF-8");
            PrintWriter pw = response.getWriter();
            pw.println("上传失败");
            pw.close();
        }
    }
}

6.2 index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>测试</title>
    <meta http-equiv="Content-Type" content="text/html;charsetr=utf-8"/>
    <meta name="author" content="周威"/>
    <%-- 引入jQuery --%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jQuery-min.js"></script>
    <script type="text/javascript">
      function sendHandler()
      {

        // 获取文件
        var data = new FormData();
        data.append("file", $('[name="file"]')[0].files[0]);

        $.ajax({
          // 设置请求方式
          method:'POST',
          // 设置请求地址
          url:'${pageContext.request.contextPath}/file',
          // 设置请求头
          contentType: false,
          processData: false,
          // 设置请求参数
          data:data,
          // 请求成功回调
          success:function(data){
            // 控制台打印输出
            console.log(data);
          }
        });
      }
    </script>
  </head>
  <body>
    <%-- 通过按钮发送异步的POST请求 --%>
    <button type="button" onClick="sendHandler()">发送请求</button>
    <%-- 表单文件域 --%>
    <input type="file" name="file"/>
  </body>
</html>

6.3 运行结果

在这里插入图片描述

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_43625140/article/details/107418376
03.
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022