ajax的三种基本操作

ajax三种基本操作：

方法一：
$.ajax({name:value, name:value, … })

方法二：
$.get(url, [data], [callback], [type])

方法三：
$.post(url, [data], [callback], [type])

代码整体目录:

在原来导包的基础上，又导入了jquery-xxx.min.js和fastjson-xxx.jar包：

实现效果：

get:

post:

ajax:

代码部分：

AjaxServlet :

package com.servlet;

import com.alibaba.fastjson.JSONArray;

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;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@WebServlet(urlPatterns = "/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String method = req.getMethod();
        System.out.println("method:"+method);
        String name = req.getParameter("name");
        String sex = req.getParameter("sex");
        System.out.println(name+" "+sex);

        //String locaDateTime = LocalDateTime.now().toString();
        Map<String,Object> map1 = new HashMap<String,Object>();
        map1.put("id",1001);
        map1.put("name","张三");
        map1.put("sex","男");

        Map<String,Object> map2 = new HashMap<>();
        map2.put("id",1002);
        map2.put("name","李四");
        map2.put("sex","女");

        List<Map<String,Object>> stuList = new ArrayList<>();
        stuList.add(map1);
        stuList.add(map2);

        //String jsonStr = "{\"name\":\"张三\",\"sex\":\"男\"}";

        //将java对象转为json字符串:jackson,Gson,fastjson
        System.out.println(stuList);
        //将数据转为json字符串
        String jsonStr =  JSONArray.toJSONString(stuList); //实体对象,map
        System.out.println(jsonStr);


        resp.setContentType("text/html;charset=utf-8");
        //获取输出流对象
        PrintWriter out = resp.getWriter();
        out.println(jsonStr);
        out.flush();
        out.close();

    }
}

jq1.jsp:

<%--
  Created by IntelliJ IDEA.
  User: 33154
  Date: 2022/8/5
  Time: 11:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <input type="button" id="btn1" value="jq:get方式发送ajax">
    <input type="button" id="btn2" value="jq:post方式发送ajax">
    <input type="button" id="btn3" value="jq:ajax方式发送ajax">
    <hr/>
    <div style="border:1px solid red;width:300px;height:200px" id="mydiv">

    </div>

    <!--引入jq-->
    <script type="text/javascript" src="${pageContext.request.contextPath}/assets/plugins/jq/jquery-1.12.4.min.js"></script>
    <!--定义自己的代码块-->
    <script type="text/javascript">
        //测试jq
        //alert($);

        //json:

        //jq页面加载事件
        $(function (){
            $("#btn1").click(function (){
                //使用$.get发送ajax请求
                $.get("${pageContext.request.contextPath}/AjaxServlet", //url
                    {name:"张三",sex:"男"}, //data
                    function (res){ //回调函数，jq会在服务器响应完成时,自己调用这个函数，
                        //并将返回的数据，通过函数参数传入
                        //alert("服务器返回的数据:"+res+" 数据的类型:"+ typeof(res));

                        //将服务器返回的json字符串,转为json对象
                        //var obj = JSON.parse(res);
                        //console.log(obj);
                        //alert(typeof(obj)+" "+typeof(res));
                        //获取对象中的属性
                        //alert(obj.name+" "+obj.sex);

                        alert(typeof(res));
                        console.log(res);

                        //将数据添加到div中
                        for(var i=0;i<res.length;i++){
                            var stu = res[i];
                            var str = "姓名:"+stu.name+" 性别:"+stu.sex+" 序号:"+stu.id;
                            $("#mydiv").append("<p>"+str+"</p>");
                        }

                    },
                    "json"  //type:表示将服务器返回数据转为特定格式。默认是文本
                );
            })

            $("#btn2").click(function(){
                $.post(
                    "${pageContext.request.contextPath}/AjaxServlet",
                    function(res){
                        //将数据添加到div中
                        for(var i=0;i<res.length;i++){
                            var stu = res[i];
                            var str = "姓名:"+stu.name+" 性别:"+stu.sex+" 序号:"+stu.id;
                            $("#mydiv").append("<p>"+str+"</p>");
                        }
                    },
                    "json"
                );
            })

            $("#btn3").click(function (){
                $.ajax({
                    url:"${pageContext.request.contextPath}/AjaxServlet", //请求地址
                    data:{},//发送的数据
                    type:"post",//请求方式
                    dataType:"json",//服务器返回的数据格式
                    success:function(res){//数据成功接收的回调函数
                        alert("成功接收数据");
                        console.log(res);
                        //将数据添加到div中
                        for(var i=0;i<res.length;i++){
                            var stu = res[i];
                            var str = "姓名:"+stu.name+" 性别:"+stu.sex+" 序号:"+stu.id;
                            $("#mydiv").append("<p>"+str+"</p>");
                        }
                    },
                    error:function (xhr,msg){//数据处理失败会执行的方法
                        alert("出错了:"+msg);
                        console.log(xhr); //xhr是jquery底层使用的XMLHttpRequest对象
                    }
                });
            })
        })

        /*
        var x = new XMLHttpRequest();  //1.创建ajax对象
        //回调函数
        x.onreadystatechange=function (){ //4.请求完成时，通过调用回调函数，接受数据
            //判断ajax请求状态，当状态为4时,请求完成，接受服务器返回的数据
        }
        x.open("GET","xxxx")//2.设置请求方式
        x.send(); //3.发送请求
        */
    </script>
</body>
</html>

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/118072.html