java 中 ajax 的学习

ajax 传值的三种方式

月老吃面包

16742人浏览 · 2022-07-28 10:48:35

月老吃面包 · 2022-07-28 10:48:35 发布

1、原生 ajax 实现

首先在 web 工程下创建一个 .jsp 文件，用来与前台 ajax 进行数据传递

在创建的 .jsp 文件中->引入 jquery-1.8.3.min.js 文件（可直接粘贴至 web 目录下，也可新建一个 js 文件夹，然后粘贴进去）

<head>
    <title>Title</title>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="UTF-8"></script>
</head>

再定义一个发送 ajax 的按钮，实现点击按钮之后就触发 ajax 事件

<body>
    <input id="myBtn" type="button" value="发送ajax请求"><span id="mymsg"></span>
</body>

<body>标签外实现 ajax

<script>
    $("#myBtn").click(function (){
        //创建异步请求对象
        var xhr = new XMLHttpRequest();

        //配置请求地址，请求方式，
        //这里的 ajaxServlet 对应的是java文件,
        //AjaxServlet.clss中对应的注解@WebServlet("/ajaxServlet"),mykey=abc123 是模拟传回的数据
        xhr.open("GET","${pageContext.request.contextPath}/ajaxServlet?mykey=abc123",true);

        //发送
        xhr.send();
        //配置回调函数
        xhr.onreadystatechange = function (){
            if(xhr.readyState==4 && xhr.status==200){
                //处理响应数据
                var responseText = xhr.responseText;
                console.log(responseText);
                $("#mymsg").html(responseText);
            }
        }

    })
</script>

后台数据处理

src 文件下新建包，新建 ajax 数据交互类：AjaxServlet.class

在AjaxServlet.class文件中使用注解进行地址映射，类继承了 HttpServlet 并且重写了 doGet() 和 doPost() 方法

2、jqueryAjax 方式

$.ajax({
    //访问路径
    url:"",
    //数据发送方式：get(不安全)/post(安全性高)
    type:"post/get",
    //传递给后台的数据，可以用 json 格式传递多数据
    data:"mykey=abc123"/{"mykey":"abc123"},
    //定义接收的数据类型，默认为 text 文本格式
    dataType:"text/json",
    //数据访问成功后，对后天传来的数据 data 进行处理
    success:function(data){
    //处理回传过来的数据
    }
});

大体操作如上，在 web 目录下新建一个 .jsp 文件

<head>
    <title>Title</title>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <input id="myBtn" type="button" value="发送ajax请求"><span id="mymsg"></span>
</body>
<script>
    $("#myBtn").click(function (){
        $.ajax({
            //请求地址，已经 java 文件中对应的注解
            url:"${pageContext.request.contextPath}/ajaxServlet",
            //数据发送方式
            type:"post",
            //传给后台 java 文件处理的数据
            data:{"mykey":"abc1234"},
            //返回数据类型
            dataType:"text",
            //回调函数，数据交互成功后进行的操作
            success:function (data){
                console.log(data);
            }
        })
    })
</script>

后台 .java 文件与上面相同，不做赘述

3、简化 ajax 编写

使用 $.post() / $.get()

两种格式相同

$.post(
        //直接写访问路径
        "url路径",
        //传给后台的数据，多数据可采用 json 格式传递
        "uname=marry"/{"uname":$("#username").val()},
        //成功后的回调函数，对后台传来的数据 data 进行处理
        function(data){后台传来的数据 data 进行处理},
        //定义后台传来的数据的类型，默认为 text 文本格式
        "text/json"
)

同样新建 .jsp 文件

<body>
    <input id="username" type="text" placeholder="请输入用户名"><span id="checkName"></span>
</body>
<script>
    $("#username").change(function (){
        $.post("${pageContext.request.contextPath}/register",
            {"uname":$("#username").val()},function (data){
            var obj = JSON.parse(data);
            $("#checkName").html(obj.msg);
            $("#checkName").css("color",obj.tcolor);
            },"text")
    })
</script>

新建 .java 文件，（实现的功能是：当页面输入框失去焦点时就判断输入框中的内容是否与给定的值（marry）相等，如果相等则在输入框的后面显示用户名重复，并且显示红色，反之则显示用户名可用，显示绿色）

4、再进一步简化

在 3 的基础上直接给定 ajax 的发送方式和接收数据的格式

$.getJSON(

        //直接写访问路径
        "url路径",
        //传给后台的数据，多数据可采用 json 格式传递
        "uname=marry"/{"uname":$("#username").val()},
        //成功后的回调函数，对后台传来的数据 data 进行处理
        function(data){后台传来的数据 data 进行处理}

)