首页 前端知识 jQuery入门(五)Ajax和json

jQuery入门(五)Ajax和json

2024-08-16 22:08:14 前端知识 前端哥 523 319 我要收藏

一、Ajax 简介

        AJAX(Asynchronous JavaScript And XML):异步的 JavaScript 和 XML。  本身不是一种新技术,而是多个技术综合。用于快速创建动态网页的技术。 一般的网页如果需要更新内容,必需重新加载个页面。 而 AJAX 通过浏览器与服务器进行少量数据交换,就可以使网页实现异步更新。也就是在不重新加载整个页 面的情况下,对网页的部分内容进行局部更新。

同步和异步的区别如下图:

二、jQuery实现Ajax

        1)JQuery的GET方式实现AJAX

核心语法:$.get(url,[data],[callback],[type]); 

- url:请求的资源路径。
- data:发送给服务器端的请求参数,格式可以是key=value,也可以是 js 对象。
- callback:当请求成功后的回调函数,可以在函数中编写我们的逻辑代码。 
- type:预期的返回数据的类型,取值可以是 xml, html, js, json, text等

示例代码: 用户注册异步get请求验证用户名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名:<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码:<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.为用户名绑定失去焦点事件
    $("#username").blur(function () {
        let username = $("#username").val();
        //2.jQuery的GET方式实现AJAX
        $.get(
            "userServlet",//请求的资源路径
            "username=" + username, //请求参数
            function (data) {  //回调函数
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            "text"//响应数据形式
        );
    });
</script>
</html>

                2)JQuery的POST方式实现AJAX

**核心语法:**$.post(url,[data],[callback],[type]); 

- url:请求的资源路径。
- data:发送给服务器端的请求参数,格式可以是key=value,也可以是 js 对象。 
- callback:当请求成功后的回调函数,可以在函数中编写我们的逻辑代码。
- type:预期的返回数据的类型,取值可以是 xml, html, js, json, text等。

示例代码:用户注册异步post请求验证用户名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名:<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码:<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.为用户名绑定失去焦点事件
    $("#username").blur(function () {
        let username = $("#username").val();
        //2.jQuery的POST方式实现AJAX
        $.post(
            //请求的资源路径
            "userServlet",
            "username=" + username, //请求参数
            function (data) {//回调函数
                $("#uSpan").html(data); //将响应的数据显示到span标签
            },
            "text"//响应数据形式
        );
    });
</script>
</html>

JQuery的通用方式实现AJAX

**核心语法:**$.ajax({name:value,name:value,…}); 

- url:请求的资源路径。
- async:是否异步请求,true-是,false-否 (默认是 true)。
- data:发送到服务器的数据,可以是键值对形式,也可以是 js 对象形式。
- type:请求方式,POST 或 GET (默认是 GET)。
- dataType:预期的返回数据的类型,取值可以是 xml, html, js, json, text等。 
- success:请求成功时调用的回调函数。
- error:请求失败时调用的回调函数。

示例代码:用户注册异步Ajax post请求验证用户名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名:<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码:<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.为用户名绑定失去焦点事件
    $("#username").blur(function () {
        let username = $("#username").val();
        //2.jQuery的通用方式实现AJAX
        $.ajax({
            url:"userServletxxx",//请求资源路径
            async:true, //是否异步
            data:"username="+username, //请求参数
            type:"POST", //请求方式
            dataType:"text", //数据形式
            success:function (data) { //请求成功后调用的回调函数
                $("#uSpan").html(data);//将响应的数据显示到span标签
            },
            error:function () { //请求失败后调用的回调函数
                alert("操作失败...");
            }
        });
    });
</script>
</html>

上述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;
@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求和响应的乱码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        //1.获取请求参数
        String username = req.getParameter("username");

        //模拟服务器处理请求需要5秒钟
        /*try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }*/

        //2.判断姓名是否已注册
        if("zhangsan".equals(username)) {
            resp.getWriter().write("<font color='red'>用户名已注册</font>");
        }else {
            resp.getWriter().write("<font color='green'>用户名可用</font>");
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}

三、JSON的简介

 1、JSON简介

        JSON(JavaScript Object Notation):是一种轻量级的数据交换格式。它是基于 ECMAScript 规范的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写,同时也易于计算机解析和生成,并有效的 提升网络传输效率。

2、创建格式:

对象类型:

{name:value,name:value,...}
示例代码:

{"city":"北京","date":"2088-08-08","shidu":"22%","wendu":"10~23"}

数组集合类型:

[{name:value,...},{name:value,...}]
 

混合类型:

{name:[{name:value,...},{name:value,...}]}

3、常用方法:

        1)stringify(对象)作用:将指定对象转换成json格式字符串

        2)parse(字符串)作用:将指定json格式字符串解析成对象


        我们除了可以在 JavaScript 中来使用 JSON 以外,在 JAVA 中同样也可以使用 JSON。 JSON 的转换工具是通过 JAVA 封装好的一些 JAR 工具包。 可以将 JAVA 对象或集合转换成 JSON 格式的字符串,也可以将 JSON 格式的字符串转成 JAVA 对象。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15905.html
标签
评论
发布的文章

XML与JSON的使用

2024-08-23 21:08:27

npm i 常见问题

2024-08-23 20:08:23

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!