【Python Web】Ajax 使用详解

最新推荐文章于 2025-03-03 00:54:19 发布

chaser&upper

最新推荐文章于 2025-03-03 00:54:19 发布

阅读量3.3k

点赞数 5

分类专栏： Web 文章标签： ajax javascript jquery

本文链接：https://blog.csdn.net/qq_46092061/article/details/122217379

版权

Web 专栏收录该内容

46 篇文章

订阅专栏

本文详细介绍了Ajax的基本概念，包括其异步数据交换的特性，以及如何在JavaScript中使用jQuery库进行Ajax请求。通过示例代码展示了$.ajax()方法和$.get()、$.post()的简写形式，强调了局部刷新和异步请求的优势。最后，总结了Ajax在前后端数据交互中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ajax

ajax

ajax

1. ajax的介绍

ajax 是 Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以 让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，ajax 最大的优点是 实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住， 当前端页面想和后台服务器进行数据交互就可以使用ajax了。

这里提示一下大家, 在 html页面使用ajax需要在web服务器环境下运行, 一般向自己的web服务器发送ajax请求。

2. ajax的使用

jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。

示例代码:

<script>
    $.ajax({
    // 1.url 请求地址
    url:'http://t.weather.sojson.com/api/weather/city/101010100',
    // 2.type 请求方式，默认是'GET'，常用的还有'POST'
    type:'GET',
    // 3.dataType 设置返回的数据格式，常用的是'json'格式
    dataType:'JSON',
    // 4.data 设置发送给服务器的数据, 没有参数不需要设置

    // 5.success 设置请求成功后的回调函数
    success:function (response) {
        console.log(response);    
    },
    // 6.error 设置请求失败后的回调函数
    error:function () {
        alert("请求失败,请稍后再试!");
    },
    // 7.async 设置是否异步，默认值是'true'，表示异步，一般不用写
    async:true
});
</script>

ajax 方法的参数说明:

url 请求地址
type 请求方式，默认是’GET’，常用的还有’POST’
dataType 设置返回的数据格式，常用的是’json’格式
data 设置发送给服务器的数据，没有参数不需要设置
success 设置请求成功后的回调函数
error 设置请求失败后的回调函数
async 设置是否异步，默认值是’true’，表示异步，一般不用写

同步和异步说明

同步是一个ajax请求完成另外一个才可以请求，需要等待上一个ajax请求完成，好比线程同步。

异步是多个ajax同时请求，不需要等待其它ajax请求完成，好比线程异步。

ajax 的简写方式:

$.ajax按照请求方式可以简写成$.get或者$.post方式

ajax 简写方式的示例代码:

<script>
   $(function(){
       /*
        1. url 请求地址
        2. data 设置发送给服务器的数据, 没有参数不需要设置
        3. success 设置请求成功后的回调函数
        4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式
       */ 
       $.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
           console.log(dat);
           console.log(status);
           alert(dat);
       }).error(function(){
           alert("网络异常");
       });

       /*
        1. url 请求地址
        2. data 设置发送给服务器的数据, 没有参数不需要设置
        3. success 设置请求成功后的回调函数
        4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式
       */ 
       $.post("test.php", {"func": "getNameAndTime"}, function(data){
           alert(data.name); 
           console.log(data.time); 
       }, "json").error(function(){
           alert("网络异常");
       }); 
   });
</script>

$.get和$.post方法的参数说明:

$.get(url,data,success(data, status, xhr),dataType).error(func)  
$.post(url,data,success(data, status, xhr),dataType).error(func)

url 请求地址
data 设置发送给服务器的数据，没有参数不需要设置
success 设置请求成功后的回调函数

data 请求的结果数据
status 请求的状态信息, 比如: “success”
xhr 底层发送http请求XMLHttpRequest对象

dataType 设置返回的数据格式
- “xml”
- “html”
- “text”
- “json”
error 表示错误异常处理
- func 错误异常回调函数

3. 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        //  向web服务器发送ajax请求，本质上是一个http协议的请求
        // $.ajax({
        //     //  请求的资源地址, 不指定ip地址和端口号表示请求的是自己的服务器资源数据
        //     url: "data.json",
        //     //  请求方式: GET,POST
        //     type: "GET",
        //     //  指定对服务器数据的解析格式
        //     dataType: "JSON",
        //     //  data: 表示发送给web服务器的参数
        //     data:{"name":"ls"},
        //     //  请求成功执行的函数
        //     success:function(data){
        //         console.log(data.name);
        //         //  数据请求回来以后可以绑定给html中的某个标签控件，实现局部刷新
        //     },
        //     //  请求失败执行的函数
        //     error:function(){
        //         alert("网络异常");
        //     },
        //     //  是否使用异步，默认不指定表示是异步请求
        //     async: true
        // });

        //  发送get方式的ajax请求的简写方式
        //  1. 请求的地址
        //  2. 请求传给web服务器的参数
        //  3. 请求成功的回调函数
        //  4. 返回数据的解析方式
        //  5. error 失败执行的回调函数
        // $.get("data.json",{"name":"ls"},function(data){
        //     //  如果按照json格式进行数据，js这块能得到一个JavaScript
        //     alert(data.name);
        // }, "JSON").error(function(){
        //     alert("网络异常，请求失败");
        // });
        // 这里没有指定http协议头和ip地址和端口号，那么默认ajax请求会自动帮我们加上
        // 如果请求的是自己的web服务器可以不用加上http协议，请求别人服务器的数据需要加上http协议
        $.post("data.json",{"name":"ls"},function(data){
            //  如果按照json格式进行数据，js这块能得到一个JavaScript
            alert(data.name);
        }, "JSON").error(function(){
            alert("网络异常，请求失败");
        });
    
    </script>
</head>
<body>
    
</body>
</html>