likes
comments
collection
share

Ajax简介&Json数据格式(三)

作者站长头像
站长
· 阅读数 12

jQuery的Ajax

原生js的Ajax虽然能够向后台发送请求,但是太过繁琐。jQuery对原生的Ajax方法进行了封装,下面是开发中使用的比较多的3种jQuery的Ajax实现。
请求方式语法
GET请求$.get(url,[data],[callback],[type])
POST请求$.post(url,[data],[callback],[type])
AJAX请求$.ajax([settings])

【注意】以上3种方法都是基于jQuery实现的,所以在使用之前必须先导入jquery的类库。

1、GET请求(掌握)

1.1、GET请求方式概述

通过远程HTTP GET请求发送请求。这是一个简单的GET请求,以取代复杂的$.ajax。请求成功时可调用回调函数。如需复杂的ajax请求参数设置,请使用$.ajax

1.2、GET请求的语法格式

$.get(url,[data],[callback],[type])

其中,参数说明如下:

参数说明
url请求地址
data发送给服务器端的请求参数,格式: 方式一:字符串:key=value&key=value 方式二:json对象:{key:value,key:value...}推荐
callback回调函数:当请求成功后触发的函数
type返回参数类型:取值可以是xml, html, script, json, text(字符) , _default等

1.3、GET请求案例

【案例】GET请求案例

【需求】

  1. 点击按钮后,数据"name=张三,age=18"发送到后台服务器;
  2. 后台接收到数据后,响应"OK";

【JS代码】jqGetAjax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
    <!--
        1. 点击按钮后,数据"name=张三,age=18"发送到后台服务器;
        2. 后台接收到数据后,响应"OK";
            url:请求地址.例如:jqGetServlet
            data:请求的参数,就是提交到servlet中的数据
                方式一:字符串  提交格式:"name=张三&age=18"
                方式二:js对象即json格式,{"name":"张三","age":18}
            callback:回调函数,处理响应数据的。发送请求成功之后调用。
                作用:处理响应数据。

            type:设置响应数据的类型或者格式。
                默认:text字符串格式
                json:json
    -->
</head>
<body>
        <button id="btn">发送ajax的get请求</button>
</body>
        <script>

            $("#btn").click(function () {
                //发送jq 的ajax get请求
                // $.get("/jqGetServlet","name=张三&age=18",function (result) {提交的请求数据以字符串形式提交
                $.get("/jqGetServlet",{"name":"张三","age":18},function (result) {//提交的请求数据以js对象即json格式
                    //请求和响应都OK 的时候 调用
                    alert(result);
                 // },"text");
                     },"json");
            });

        </script>
</html>

【servlet代码】JqGetServlet.java

@WebServlet(urlPatterns = "/jqGetServlet")
public class JqGetServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //处理jq的get请求
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        //响应数据    字符串
        response.setContentType("text/html;charset=utf-8");
        //响应数据
//        response.getWriter().print("接收到了请求数据");
        //响应json格式
        response.getWriter().print("{"name":"班长","age":20}");
    }
}

2、POST请求(掌握)

2.1、POST请求方式概述

通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能,如需复杂的ajax参数设置请使用$.ajax。

2.2、POST请求的语法格式

$.post(url, [data], [callback], [type]) 其中,参数说明如下:

参数说明
url请求的服务器端url地址
data发送给服务器端的请求参数,格式可以是key=value,也可以是json格式
callback当请求成功后的回调函数,可以在函数体中编写我们的逻辑代码
type预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defaul等

2.3、POST请求案例

1 、【js代码】 jqPostAjax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
    <!--
        1. 点击按钮后,数据"name=张三,age=18"发送到后台服务器;
        2. 后台接收到数据后,响应"OK";

    -->
</head>
<body>
<button id="btn">发送ajax的get请求</button>
</body>
<script>

    $("#btn").click(function () {

        //发送jq 的ajax post请求
        $.post("/jqPostServlet",{"name":"张三","age":18},function (result) {
            //请求和响应都OK 的时候 调用
            alert(result);
        },"json");

    });

</script>
</html>

2.Servlet代码

@WebServlet(urlPatterns = "/jqPostServlet")
public class JqPostServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //处理jq的post请求
        request.setCharacterEncoding("utf-8");
        String name = request.getParameter("name");
        String age = request.getParameter("age");

        //响应数据    字符串
        response.setContentType("text/html;charset=utf-8");
        //响应json格式
        response.getWriter().print("{"name":"班长","age":20}");
    }
}

3、Ajax请求(理解)

3.1 Ajax请求概述

对于jq的get或者post请求,如果服务器端发生异常,这两种方式都不能接收异常信息。但是我们可以使用jq的ajax的请求方式来处理。通过 HTTP 请求加载远程数据。jQuery 底层 A JAX 实现。简单易用的高层实现见get和post方法。$.ajax()方法可以更加详细的设置底层的参数。jq的ajax请求不属于一种请求方式,只是一种实现向服务器端发送请求的方式,具体到底是get还是post请求还得看我们设置的是什么请求方式。

3.2 A JAX请求方式语法

$.ajax({settings}) 其中,settings是一个js字面量形式的对象,格式是{name:value,name:value... ...},常用的name属性名如下:

Ajax简介&Json数据格式(三)

3.3 A JAX请求方式代码

【JS代码】jqAjaxDemo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq 的 ajax</title>
</head>
<body>
<button id="btn">发送ajax的get请求</button>
<script src="../js/jquery-3.3.1.js"></script>
</body>
<script>
    $("#btn").click(function () {
        $.ajax({
                url:"/jqGetServlet",
                type:"get",
                // data:"name=张三&age=18",
                data:{"name":"张三","age":18},
                //接收响应数据的类型
                dataType:"json",
                //响应成功
                success:function (aaa) {
                    alert(aaa);
                },
                //服务器端有异常
                error:function () {
                    alert("加班吧");
                }
            });
        });
</script>
</html>

【servlet代码】JqAjaxServlet.java

@WebServlet(urlPatterns = "/jqAjaxServlet")
public class JqAjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //处理jq的ajax请求
       request.setCharacterEncoding("utf-8");
        //处理jq的get请求
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        //处理响应乱码
        response.setContentType("text/html;charset=utf-8");
//        int i=1/0;
        //响应数据
//        response.getWriter().print("接收到了请求数据");
        //响应json格式
        response.getWriter().print("{"name":"班长","age":20}");
    }
}

小结:

jq的三种请求方式,必须掌握的是get和post请求,对于ajax的请求了解即可。那么在开发中什么时候使用get,什么时候使用post呢?

1、查询、删除。一般都是通过id,传递的数据比较少,建议使用get。get请求的数据放到地址栏中。
2、新增、更新(一般都是form表单中),传递数据比较多,建议使用post。
转载自:https://juejin.cn/post/7244719888882286648
评论
请登录