ajax 使用

1、定义一个data.json数据集

{"name":"张三", "age":22, "money":480298409328}

2、向web服务器发送ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./main.js"></script>
    <script>
        // 向web服务服务器发送一个ajax请求
        // 传发送的为一个JavaScript对象
        $.ajax({
            // 请求的资源地址,不指定ip地址与端口号请求的是自己的IP地址
            url: "data.json",
            // 请求方式get请求
            type:"GET",
            // 返回数据指定的解析格式
            dataType:"JSON",
            // 请求成功的函数
            success:function (params) { 
                console.log(params);
                alert(params.name)
                // 数据请求回来可以绑定给html的某个控件
                // 就可以实现局部刷新
            },
            // 请求失败的函数
            error:function(){
                alert("请求失败")

            },
            // 是否使用异步,默认使用异步请求
            async:true

        });
        
    </script>
</head>
<body>
    
</body>
</html>

3、 .get与.post 发送方式的ajax简写

post方式请求参数要放入…中

     $.get(url,data,success(data, status, xhr),dataType).error(func)
     $.post(url,data,success(data, status, xhr),dataType).error(func)
     1. url 请求地址
     2. data 设置发送给服务器的数据, 没有参数不需要设置
     3. success 设置请求成功后的回调函数
     4. dataType 设置返回的数据格式,常用的是'json'格式, 默认智能判断数据格式
     5.error 为失败回调函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./main.js"></script>
    <script>
        // $.ajax({
        //     // 请求的资源地址,不指定ip地址与端口号请求的是自己的IP地址
        //     url: "data.json",
        //     // 请求方式get请求
        //     type:"GET",
        //     // 返回数据指定的解析格式
        //     dataType:"JSON",
        //     // 请求成功的函数
        //     success:function (params) { 
        //         console.log(params);
        //         alert(params.name)
        //         // 数据请求回来可以绑定给html的某个控件
        //         // 就可以实现局部刷新
        //     },
        //     // 请求失败的函数
        //     error:function(){
        //         alert("请求失败")

        //     },
        //     // 是否使用异步,默认使用异步请求
        //     async:true

        // });

        // get 方式发送ajax的简写
        $.get("data.json",{"name":"ls"},function(data){
            alert("请求成功"+data.name);
        },"JSON").error(function(){
            alert("请求失败");
        });
        // 参数说明
         /*

         $.get和$.post方法的参数说明:发送get方式的ajax简写.html

         $.get(url,data,success(data, status, xhr),dataType).error(func)
         $.post(url,data,success(data, status, xhr),dataType).error(func)
         1. url 请求地址
         2. data 设置发送给服务器的数据, 没有参数不需要设置
         3. success 设置请求成功后的回调函数
         4. dataType 设置返回的数据格式,常用的是'json'格式, 默认智能判断数据格式
         5.error 为失败回调函数
        */ 
    </script>
</head>
<body>
    
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

toptap8_nn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值