> 科技资讯 > day35-JSON&Ajax03

day35-JSON&Ajax03

科技资讯 投稿 7400℃ 0 评论

day35-JSON&Ajax03

JSON&Ajax03

4.jQuery的Ajax请求

    编写原生的Ajax要写很多的代码，还要考虑浏览器兼容问题，使用不方便
  1. 在实际工作中，一般使用JavaScript的框架（比如jquery）发动Ajax请求，从而解决这个问题。

4.1jQuery Ajax操作方法

在线文档：jQuery 参考手册 - Ajax (w3school.com.cn

4.2$.ajax(方法

jQuery ajax - ajax( 方法

$.ajax 常用参数：

  • type：请求的方式get或者post，默认为 "GET"。

  • data：发送到服务器的数据，将自动转换为请求字符串格式

  • 参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。

  • error：默认值: 自动判断 (xml 或 html，请求失败时的回调函数。

4.3$.get(和$.post(请求

jQuery AJAX get( 和 post( 方法

$.get(请求和$.post(请求常用参数：
    url：请求的url地址
  • data：请求发送到服务器的数据
  • success：成功时的回调函数
  • type：返回内容的格式，xml，html，script，json，text

$.get( 和 $.post( 底层还是使用$.ajax(方法来实现异步请求

4.3.1$.get(

这是一个简单的 GET 请求功能以取代复杂 $.ajax，请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax(。

$(selector.get(url,data,success(response,status,xhr,dataType
4.3.2$.post(

post( 方法通过 HTTP POST 请求从服务器载入数据。

jQuery.post(url,data,success(data, textStatus, jqXHR,dataType

4.4$.getJSON(方法

jQuery ajax - getJSON( 方法

    url：请求发送哪个url
  • data：请求发送到服务器的数据
  • success：请求成功时运行的函数

说明：$.getJSON(底层使用$.ajax(方法来实现异步请求

jQuery.getJSON(url,data,success(data,status,xhr

4.5应用实例

4.5.1$.ajax(应用实例

演示jquery发送ajax的案例

    在输入框输入用户名
  1. 点击验证用户名，服务端验证该用户是否已经占用了，如果是，则以json格式返回该用户信息
  2. 假定king为已使用的用户名
  3. 对页面进行局部刷新，显示返回的信息

引入jquery库：

配置servlet：

<servlet>
    <servlet-name>CheckUserServlet2</servlet-name>
    <servlet-class>com.li.ajax.servlet.CheckUserServlet2</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>CheckUserServlet2</servlet-name>
    <url-pattern>/checkUserServlet2</url-pattern>
</servlet-mapping>

创建CheckUserServlet2：

package com.li.ajax.servlet;

import com.google.gson.Gson;
import com.li.ajax.entity.User;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;

public class CheckUserServlet2 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 {
        //接收jquery发送的ajax数据
        String username = request.getParameter("username";//参数名取决于前端的参数名

        response.setContentType("text/json;charset=utf-8";//指定MIME类型为json

        Gson gson = new Gson(;
        if ("king".equals(username {
            //后面可以接入数据库database
            User user = new User(100, "king", "123", "king@163.com";
            response.getWriter(.print(gson.toJson(user;
        } else {
            //返回一个不存在的User-->测试
            User user = new User(-1, "", "", "";
            response.getWriter(.print(gson.toJson(user;
        }
    }
}

login2.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!--    引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function ( {
            //绑定事件
            $("#btn1".click(function ( {
                //发出ajax请求
                /**
                 * 1.指定参数时，需要在{}里面
                 * 2.指定参数时，需要指定参数名
                 * 3.dataType:"json" 代表要求服务器返回的数据是json，
                 *          如果服务器返回的不是json，就会解析出错
                 */
                $.ajax({
                    url: "/ajax/checkUserServlet2",
                    type: "post",
                    data: {//这里我们直接给一个json
                        username: $("#uname".val(,
                        date : new Date(//防止浏览器缓存
                    },
                    error:function ( {//失败后的回调函数
                        console.log("失败"
                    },
                    success:function (data,status,xhr {
                        console.log("成功";
                        console.log("data=",data;
                        console.log("status=",status;
                        console.log("xhr=",xhr;
                        //data是一个json对象，需要转成json字符串
                        $("#div1".html(JSON.stringify(data;
                        //对返回的结果进行处理
                        if (""==data.username{//说明用户名可用
                            $("#myres".val("该用户名可用";
                        }else {
                            $("#myres".val("该用户名不可用";
                        }
                    },
                    dataType:"json"
                }
            }
        }
    </script>
</head>
<body>
<h2>用户注册-Jquery+Ajax</h2>
<form action="/ajax/checkUserServlet2" method="post">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="btn1" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用户注册">
</form>
<h2>返回的 json 数据</h2>
<div id="div1"></div>
</body>
</html>
4.5.2$.get(应用实例

使用4.5的应用实例，将上面的html页面改写，其他不变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!--    引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function ( {
            //绑定事件
            $("#btn1".click(function ( {
                //演示$.get(使用
                // $.get(默认是get请求，不需要指定请求方式
                //不需要写参数名，但是参数的位置要正确对应，
                // 顺序是：url，data，success回调函数，返回的数据格式
                $.get(
                    "/ajax/checkUserServlet2",
                    {//这里我们直接给一个json
                        username: $("#uname".val(,
                        date: new Date(//防止浏览器缓存
                    },
                    function (data, status, xhr {
                        console.log("$.get成功"
                        console.log("data=", data;
                        console.log("status=", status;
                        console.log("xhr=", xhr;
                        //data是一个json对象，需要转成json字符串
                        $("#div1".html(JSON.stringify(data;
                        //对返回的结果进行处理
                        if ("" == data.username {//说明用户名可用
                            $("#myres".val("该用户名可用";
                        } else {
                            $("#myres".val("该用户名不可用";
                        }
                    },
                    "json"
                
            }
        }
    </script>
</head>
<body>
<h2>用户注册-Jquery+Ajax</h2>
<form action="/ajax/checkUserServlet2" method="post">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="btn1" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用户注册">
</form>
<h2>返回的 json 数据</h2>
<div id="div1"></div>
</body>
</html>
4.5.3$.post(应用实例

使用4.5的应用实例，将上面的html页面改写，其他不变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!-- 引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function ( {
            //绑定事件
            $("#btn1".click(function ( {
                //$.post 和 $.get的调用方式基本一样，只是这时是以post方式发送ajax请求
                $.post(
                    "/ajax/checkUserServlet2",
                    {//这里我们直接给一个json
                        username: $("#uname".val(,
                        date: new Date(//防止浏览器缓存
                    },
                    function (data, status, xhr {
                        console.log("$.post成功"
                        console.log("data=", data;
                        console.log("status=", status;
                        console.log("xhr=", xhr;
                        //data是一个json对象，需要转成json字符串
                        $("#div1".html(JSON.stringify(data;
                        //对返回的结果进行处理
                        if ("" == data.username {//说明用户名可用
                            $("#myres".val("该用户名可用";
                        } else {
                            $("#myres".val("该用户名不可用";
                        }
                    },
                    "json"
                
            }
        }
    </script>
</head>
<body>
<h2>用户注册-Jquery+Ajax</h2>
<form action="/ajax/checkUserServlet2" method="post">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="btn1" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用户注册">
</form>
<h2>返回的 json 数据</h2>
<div id="div1"></div>
</body>
</html>
4.5.4$.getJSON(应用实例

使用4.5的应用实例，将上面的html页面改写，其他不变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <!--    引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function ( {
            //绑定事件
            $("#btn1".click(function ( {
                //如果你通过jquery发出的ajax请求是get请求，并且返回的数据格式是json，
                // 可以直接使用getJSON(函数，很方便
                $.getJSON(
                    "/ajax/checkUserServlet2",
                    {//这里我们直接给一个json
                        username: $("#uname".val(,
                        date: new Date(//防止浏览器缓存
                    },
                    function (data, status, xhr {//成功后的回调函数
                        console.log("$.getJSON成功"
                        console.log("data=", data;
                        console.log("status=", status;
                        console.log("xhr=", xhr;
                        //data是一个json对象，需要转成json字符串
                        $("#div1".html(JSON.stringify(data;
                        //对返回的结果进行处理
                        if ("" == data.username {//说明用户名可用
                            $("#myres".val("该用户名可用";
                        } else {
                            $("#myres".val("该用户名不可用";
                        }
                    }
                
            }
        }
    </script>
</head>
<body>
<h2>用户注册-Jquery+Ajax</h2>
<form action="/ajax/checkUserServlet2" method="post">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="btn1" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用户注册">
</form>
<h2>返回的 json 数据</h2>
<div id="div1"></div>
</body>
</html>

4.6练习

    点击验证用户名, 到数据库中验证用户名是否可用

  2. 使用 Jquery + ajax 方式，服务端验证该用户名是否已经占用了, 如果该用户已经占用，以 json 格式返回该用户信息

提示: 根据day34-JSON&Ajax02-3.3练习 的 ajax 请求+jdbc+mysql 到数据库验证案例完成

package com.li.ajax.servlet;

import com.google.gson.Gson;
import com.li.ajax.entity.User;
import com.li.ajax.service.UserService;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.sql.SQLException;

public class CheckUserServlet2 extends HttpServlet {
    private UserService userService = new UserService(;

    @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 {
        request.setCharacterEncoding("utf-8";
        response.setContentType("text/json;charset=utf-8";//指定MIME类型为json
        Gson gson = new Gson(;
        //接收jquery发送的ajax数据
        String username = request.getParameter("username";//参数名取决于前端的参数名
        //到数据库中查找有无重名用户
        try {
            User userByName = userService.getUserByName(username;
            //如果有返回的就是一个User对象，如果没有，返回的就是null
            response.getWriter(.print(gson.toJson(userByName;
        } catch (SQLException e {
            e.printStackTrace(;
        }
    }
}

前端html页面使用4.5.4的$.getJSON(方法发送ajax请求，在4.5.4代码的基础上修改返回数据的判断条件即可：

测试结果：

编程笔记 » day35-JSON&Ajax03

赞同 (30) or 分享 (0)
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽