jQuery AJAX 简介学习笔记

什么是 AJAX？

AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，通过后台与服务器交换数据的技术。

jQuery 中的 AJAX 方法

jQuery 提供了一系列的 AJAX 方法，使得 AJAX 的使用变得更加简单。以下是几个常用的 AJAX 方法：

$.ajax()

用于执行异步 AJAX 请求。

javascriptCopy Code
$.ajax({
    url: "test.html",
    success: function(result){
        $("#div1").html(result);
    }
});

$.get()

用于执行 HTTP GET 请求。相对于 $.ajax()，$.get() 具有更简洁的语法。

javascriptCopy Code
$.get("test.php", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
});

$.post()

用于执行 HTTP POST 请求。相对于 $.ajax()，$.post() 具有更简洁的语法。

javascriptCopy Code
$.post("test.php",
{
    name: "binjie09",
    age: 18
},
function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
});

实例

下面是一个简单的实例，演示如何使用 AJAX 从服务器获取 JSON 数据并显示在页面上。

HTML：

htmlCopy Code
<div id="user"></div>

JavaScript：

javascriptCopy Code
$.get("user.json", function(data, status){
    var html = "<ul>";
    $.each(data, function(index, value){
        html += "<li>" + value.name + "（" + value.age + "岁）</li>";
    });
    html += "</ul>";
    $("#user").html(html);
});

JSON 数据：

jsonCopy Code
[
  {
    "name": "张三",
    "age": 20
  },
  {
    "name": "李四",
    "age": 22
  },
  {
    "name": "王五",
    "age": 25
  }
]

以上就是 jQuery AJAX 简介学习笔记的内容和实例。希望对你有所帮助！