Ajax异步刷新技术，实现前后端异步交互

jQuery Ajax 局部刷新实现笔记

Ajax（Asynchronous JavaScript and XML）是一种创建交互式网页应用的网页开发技术，它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。

基础用法

$.ajax({
  type: "GET",       // 请求方式：GET/POST
  url: "api/data",   // 请求地址
  async: true,       // 是否异步（默认true）
  data: {            // 发送到服务器的数据
    key1: "value1"
  },
  dataType: "json",  // 预期服务器返回的数据类型
  success: function(data) { // 请求成功回调
    console.log("成功:", data);
  },
  error: function(xhr, status, error) { // 请求失败回调
    console.error("失败:", status, error);
  }
});

加载数据示例

$("#btn").click(function(){
    $.ajax({
        type: "get",  
        url: "js/data.txt",  
        data: { 
            // 无参数时可省略或保留空对象
        },
        dataType: "json",  // 修正：中文逗号
        // 请求成功回调
        success: function(data){  // data是已解析的JSON对象（因dataType设为json）
            console.log(data);
            
            // 创建ul元素
            var ul = $("<ul></ul>");
            
            // 遍历数据数组
            for(var i = 0; i < data.length; i++) {  // 修正：e改为0（起始索引）
                var user = data[i];  // 获取单个用户对象
                
                // 创建li元素（修正：变量名11改为合法名称，标签闭合应为</li>）
                var li = "<li>" + user.userName + "</li>";  
                
                // 将li添加到ul
                ul.append(li);
            }
            
            // 将ul添加到body
            $("body").append(ul);
        }
    });
});

注意事项

1. 当设置dataType: "json"时，jQuery会自动将响应文本解析为JSON对象
2. 循环遍历数组时注意索引从0开始
3. 动态创建元素推荐使用jQuery的$()方法，避免字符串拼接
4. 异步请求默认开启，无需特别设置async: true