jQuery动态内容加载

1. load()方法

load()方法是最简单的动态加载方法，可以从服务器加载数据并放入匹配的元素中。

实时演示

加载HTML片段 加载部分内容 加载后回调

这里将显示加载的内容

正在加载内容...

代码示例：

// 基本用法 - 加载整个文件
$("#loadBtn").click(function(){
    $("#result").load("content.html");
});

// 加载文件的部分内容（使用选择器）
$("#loadPartialBtn").click(function(){
    $("#result").load("content.html #specific-section");
});

// 带回调函数
$("#loadCallbackBtn").click(function(){
    $("#result").load("data.php", function(response, status, xhr){
        if(status == "success") {
            console.log("加载成功！");
            console.log("响应内容:", response);
        } else {
            console.log("加载失败");
        }
    });
});

// 带参数的加载
$("#loadWithDataBtn").click(function(){
    $("#result").load("data.php", {
        user_id: 123,
        action: "get_profile"
    });
});

// 加载失败处理
$("#loadErrorBtn").click(function(){
    $("#result").load("nonexistent.html", function(response, status, xhr){
        if(status == "error") {
            $("#result").html("加载失败: " + xhr.status + " " + xhr.statusText);
        }
    });
});
                            

注意：load()方法使用GET请求，如果需要发送大量数据，请使用POST方法。出于安全考虑，不能跨域加载内容。

2. AJAX请求

jQuery提供了完整的AJAX方法，可以更精细地控制HTTP请求。

实时演示

GET请求 POST请求 完整AJAX 错误处理

这里将显示AJAX响应

请求处理中...

代码示例：

// $.get() 方法 - GET请求
$("#getBtn").click(function(){
    $.get("api/data.php", { id: 123 }, function(data){
        $("#result").html(data);
    });
});

// $.post() 方法 - POST请求
$("#postBtn").click(function(){
    $.post("api/save.php", {
        name: $("#name").val(),
        email: $("#email").val()
    }, function(response){
        console.log("保存成功:", response);
    });
});

// $.ajax() 方法 - 完整控制
$("#ajaxBtn").click(function(){
    $.ajax({
        url: "api/data.php",
        type: "GET",
        dataType: "json",
        data: { user_id: 123 },
        beforeSend: function(){
            $("#loading").show();
        },
        success: function(response){
            $("#result").html(JSON.stringify(response));
        },
        error: function(xhr, status, error){
            console.log("请求失败:", status, error);
        },
        complete: function(){
            $("#loading").hide();
        }
    });
});

// 并发请求
$("#multipleBtn").click(function(){
    $.when(
        $.get("api/user.php"),
        $.get("api/products.php")
    ).then(function(userResp, productResp){
        var user = userResp[0];
        var products = productResp[0];
        // 处理两个请求的结果
    });
});

// 设置全局AJAX默认值
$.ajaxSetup({
    timeout: 5000, // 5秒超时
    cache: false   // 禁用缓存
});
                            

3. JSON数据处理

JSON是现代Web应用中最常用的数据格式，jQuery提供了方便的方法处理JSON数据。

实时演示

获取JSON 解析JSON 构建列表

JSON数据将显示在这里

正在获取数据...

代码示例：

// $.getJSON() 方法 - 获取JSON数据
$("#getJSONBtn").click(function(){
    $.getJSON("api/users.json", function(data){
        var html = "<ul>";
        $.each(data, function(index, user){
            html += "<li>" + user.name + " - " + user.email + "</li>";
        });
        html += "</ul>";
        $("#result").html(html);
    });
});

// 解析JSON字符串
var jsonString = '{"name":"张三","age":25,"city":"北京"}';
var jsonObj = JSON.parse(jsonString);
console.log(jsonObj.name); // 输出：张三

// 创建JSON字符串
var user = {
    name: "李四",
    age: 30,
    hobbies: ["阅读", "游泳", "编程"]
};
var jsonStr = JSON.stringify(user);

// 处理嵌套JSON
$.getJSON("api/complex.json", function(data){
    // 访问嵌套属性
    var userName = data.user.profile.name;
    var userPosts = data.posts;

    // 使用模板构建HTML
    var template = "<div class='user-profile'>" +
                   "<h3>{{name}}</h3>" +
                   "<p>邮箱: {{email}}</p>" +
                   "</div>";

    var html = template
        .replace("{{name}}", data.user.name)
        .replace("{{email}}", data.user.email);

    $("#profile").html(html);
});

// 错误处理
$.getJSON("api/data.json")
    .done(function(data){
        console.log("成功:", data);
    })
    .fail(function(jqxhr, textStatus, error){
        console.log("失败:", textStatus, error);
    });
                            

示例JSON数据

{
  "success": true,
  "message": "数据获取成功",
  "data": {
    "users": [
      {
        "id": 1,
        "name": "张三",
        "email": "zhangsan@example.com",
        "age": 25
      },
      {
        "id": 2,
        "name": "李四",
        "email": "lisi@example.com",
        "age": 30
      }
    ],
    "total": 2
  }
}
                                    

4. 动态表单提交

使用AJAX提交表单，实现无刷新表单处理，提升用户体验。

实时演示

姓名：

邮箱：

留言：

提交表单 重置

表单提交结果将显示在这里

正在提交表单...

代码示例：

// 表单序列化提交
$("#myForm").submit(function(e){
    e.preventDefault(); // 阻止默认表单提交

    var formData = $(this).serialize(); // 序列化表单数据

    $.post("api/submit.php", formData, function(response){
        if(response.success){
            $("#result").html("<div class='alert alert-success'>" +
                           response.message + "</div>");
        } else {
            $("#result").html("<div class='alert alert-danger'>" +
                           response.message + "</div>");
        }
    }, "json");
});

// 表单序列化数组
$("#formArrayBtn").click(function(){
    var formArray = $("#myForm").serializeArray();
    console.log(formArray); // 输出：[{name: 'field1', value: 'value1'}, ...]

    // 转换为对象
    var formObject = {};
    $.each(formArray, function(i, field){
        formObject[field.name] = field.value;
    });
});

// 表单数据验证
$("#validateForm").submit(function(e){
    e.preventDefault();

    var name = $("#name").val();
    var email = $("#email").val();
    var errors = [];

    if(name.length < 2){
        errors.push("姓名至少2个字符");
    }

    if(!email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)){
        errors.push("邮箱格式不正确");
    }

    if(errors.length > 0){
        $("#errors").html("<div class='alert alert-danger'><ul>" +
                        errors.map(function(e){ return "<li>" + e + "</li>"; }).join('') +
                        "</ul></div>");
        return false;
    }

    // 验证通过，提交表单
    submitForm();
});

// 文件上传（需要FormData）
$("#fileForm").submit(function(e){
    e.preventDefault();

    var formData = new FormData(this);

    $.ajax({
        url: "api/upload.php",
        type: "POST",
        data: formData,
        processData: false, // 重要：告诉jQuery不要处理数据
        contentType: false, // 重要：不要设置内容类型
        success: function(response){
            console.log("上传成功:", response);
        },
        error: function(xhr, status, error){
            console.log("上传失败:", error);
        }
    });
});
                            

提示：使用AJAX提交表单时，一定要在服务器端进行数据验证，客户端验证只是为了提升用户体验。