Jquery——JSON、Ajax

最新推荐文章于 2024-01-05 13:29:13 发布

PETRICHOR03

最新推荐文章于 2024-01-05 13:29:13 发布

阅读量129

点赞数

分类专栏： JavaWeb 文章标签： ajax jquery css html5 javascript

本文链接：https://blog.csdn.net/weixin_43616750/article/details/105447097

版权

JavaWeb 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

JSON

JavaScript对象表示形式，作为数据的载体，在网络中进行传输

JSON基础语法

* 对象类型
		{name:value,name:value}
		
* 数组类型
		[
            {name:value,name:value},
            {name:value,name:value},
            {name:value,name:value}
		]
		
* 复杂对象
		{
            name:value,
            list:[{name:value},{},{}]
            user:{name:value}
		}

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    //描述用户对象
    let user = {"username": "小明", "sex": "男", "age": 10};
    user.username;
    //描述用户数组/集合
    let arr = [
        {"username": "小明", "sex": "男", "age": 10},
        {"username": "小红", "sex": "女", "age": 12},
        {"username": "小花", "sex": "女", "age": 13},
    ];
    //遍历数组，增强for
    for (let obj of arr) {
        console.log(obj);
        console.log(obj.username);
    }
    //复杂对象
    let xiaobao = {
        "age": 18,
        "list": [
            {"name": "双儿", "address": "北京"},
            {"name": "皇后", "address": "日本"},
        ],
        "shifu": {"name": "南哥"}

    };
    console.log(xiaobao);
    xiaobao.age;
    let male = xiaobao.list;//集合
    for(let nvre of male){
        console.log(nvre);
        console.log(nvre.address);
    };
    let shifu = xiaobao.shifu;
    console.log(shifu.name);
</script>
</body>
</html>

JSON格式转换

* JSON对象与字符串转换的相关函数
	语法：
    	1. JSON.stringify(object) 把json对象转为字符串
    
    	2. JSON.parse(string) 把字符串转为json对象

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    let user = '{"username": "小明", "sex": "男", "age": 10}';//用引号引起来是一个字符
    //1、将字符串转换为json对象
    let use = JSON.parse(user);
    console.log(use.username);
    //2、将json对象转换为字符串
    let s = JSON.stringify(use);
    alert(s);
</script>
</body>
</html>

Ajax

Ajax可以请求并获取服务器的数据,来完成与服务的通信，在无需重新加载整个网页的情况下，能够更新部分网页的技术，提高用户体验

适用场景

搜索框提示、表单数据验证、无刷新分页

Jquery的Ajax插件

ajax函数

$.ajax({json对象格式})
参数：
url：请求地址、type：请求方式（get post）、data：请求参数、success：请求成功时，执行的回调函数
error：请求失败时，执行的回调函数、dataType：预期服务器返回的数据类型

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text" id="username" placeholder="请输入用户名"><span id="userwarn"></span>
<script>
    //给文本框绑定失去焦点事件
    $('#username').blur(function () {

        //使用ajax函数发送请求
        $.ajax({
            url: "http://localhost:8080/check",
            type: "post",
            data: "username=" + $(this).val(),
            //实现局部刷新
            success: function (resp) {
                $('#userwarn').text(resp);
            }
        })
    })

</script>
</body>
</html>

get函数

$.get(url,callback)
参数：
url：请求地址、callback：请求成功时，执行的回调函数

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text" id="username" placeholder="请输入用户名"><span id="userwarn"></span>


<!--
* 语法：
		$.get(url,success);

* 参数：
		url:请求地址
		success：请求成功时的回调函数

-->
<script>
    //给文本框绑定失去焦点事件
    $('#username').blur(function () {

        //使用get函数发送请求
            let url= "http://localhost:8080/check?username="+$(this).val();
            $.get(url,function(resp){
            //实现局部刷新
                $('#userwarn').text(resp);

        })
    })

</script>
</body>
</html>

post函数

$.post(url,data,success)
参数：
url：请求地址、data：请求参数、success：请求成功时，执行的回调函数

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text" id="username" placeholder="请输入用户名"><span id="userwarn"></span>

<!--
* 语法：
		$.post(url,data,success);

* 参数：
		url：请求地址
		data：请求参数
		success：请求成功时的回调函数

-->
<script>
    //给文本框绑定失去焦点事件
    $('#username').blur(function () {
        //使用post函数发送请求
        let url = 'http://localhost:8080/check';
        let data = "username=" + $(this).val();

        $.post(url, data, function (resp) {
            //实现局部刷新
            $('#userwarn').text(resp);
        })
    })

</script>
</body>
</html>

同步和异步处理

使用ajax发送的是异步请求

同步和异步请求指的是，客户端和服务器交互的行为

同步：客户端发送请求后，必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
异步：客户端发送请求后，不需要等待服务器端的响应。在服务器处理的过程中，客户端可以进行其他的操作。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>同步和异步</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text">
<button id="btn">发送ajax</button>
<script>
    // 给按钮绑定点击事件
    $('#btn').click(function () {
        // 使用ajax函数发送请求，ajax默认的是异步提交，可以改为同步（了解）
        $.ajax({
            url:'http://localhost:8080/sleep',
            type:'get',
            success:function (resp) {
                alert(resp)
            },
            //async:false// 同步提交
        })
    })
</script>
</body>
</html>

案例练习

需求：搜索案例
分析：
1.、给搜索框绑定键盘抬起事件 keyup()
2、获取用户输入的值 val()函数
3、通过ajax对象发送请求post()函数
4、实现局部更新

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>百度搜索</title>
    <script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
    <style type="text/css">
        .content {
            width: 643px;
            margin: 200px auto;
            text-align: center;
        }

        input[type='text'] {
            width: 530px;
            height: 40px;
            font-size: 14px;
        }

        input[type='button'] {
            width: 100px;
            height: 46px;
            background: #38f;
            border: 0;
            color: #fff;
            font-size: 15px
        }

        .show {
            position: absolute;
            width: 535px;
            height: 100px;
            border: 1px solid #999;
            border-top: 0;
        }
    </style>

</head>
<body>
<div class="content">
    <img alt="" src="../img/logo.png"><br/><br/>
    <input type="text" id="search" name="keyword">
    <input type="button" value="搜索一下">
    <div class="show" style="display: none"></div>
</div>

<script>
    //给搜索框绑定键盘弹起事件
    $('#search').keyup(function () {
        //显示div
        $('.show').show();
        //alert($(this).val());})
        //判断一下输入的内容
        if (this.value.trim().length == 0) {
            $('.show').hide();//div中没有内容时，隐藏div
            return;
        }
        // //使用post函数
        let url = 'http://localhost:8080/search';
        let data = "keyword=" + $(this).val();
        $.post(url, data, function (resp) {
            //清空上次搜索内容
            $('.show').empty();
            console.log(resp);
            //局部更新
            //遍历resp，将内容添加到div中
            for (let ele of resp) {
                $('.show').append(`<div οnmοuseοver="yiru(this)" οnmοuseοut="yichu(this)"οnclick="dianji(this)" style="cursor: pointer;text-align: left;padding-left: 5px"> ${ele}</div>`)
            }
        })
    })

    //鼠标移入
    function yiru(obj) {
        $(obj).css('background-color', '#f0f0f0')
    }

    //鼠标移出
    function yichu(obj) {
        $(obj).css('background-color', 'white')
    }

    //设置选中的值绑定一个鼠标点击事件
    function dianji(obj) {
        $('#search').val($(obj).text())
        //选中后隐藏div
        $('.show').hide();
    }
</script>
</body>
</html>

PETRICHOR03

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery——JSON、Ajax

JSONJavaScript对象表示形式，作为数据的载体，在网络中进行传输JSON基础语法* 对象类型 {name:value,name:value} * 数组类型 [ {name:value,name:value}, {name:value,name:value}, {name:value,name:va...
复制链接

扫一扫