jQuery AJAX 是一种使用 JavaScript 和 jQuery 请求服务器上数据的简单方法。它允许您在不重新加载整个页面的情况下与服务器交换数据和更新部分网页内容。

以下是关于 jQuery AJAX 的基本教程:

基本用法

  1. 创建 AJAX 请求: 使用 jQuery 的 $.ajax() 方法可以创建 AJAX 请求。

    $.ajax({
        url: "example.txt",
        success: function(result) {
            $("#div1").html(result);
        }
    });
    
  2. 使用 GET 和 POST 方法: AJAX 请求可以发送 GET 或 POST 请求。默认情况下,GET 请求用于获取数据,POST 请求用于发送数据。

    $.ajax({
        type: "POST",
        url: "test.php",
        data: "name=John&age=30",
        success: function(html){
            $("#div1").html(html);
        }
    });
    

示例

以下是一个简单的示例,演示如何使用 jQuery AJAX 从服务器获取数据:

$(document).ready(function(){
    $("#btn1").click(function(){
        $.ajax({
            url: "/en/videos/tutorials/js/jquery-ajax/example.json",
            dataType: "json",
            success: function(data){
                $("#div1").html(data.name);
            }
        });
    });
});

在上面的示例中,当用户点击按钮时,会发送一个 AJAX 请求到服务器上的 example.json 文件。服务器返回的数据将被显示在 div1 元素中。

图片示例

jQuery AJAX 示例

更多资源

如果您想了解更多关于 jQuery AJAX 的信息,请访问我们的 jQuery AJAX 教程 页面。