如何构建 jQuery 发布数据 - Javascript

在 Web 开发中，经常需要传递数据到服务器或者从服务器获取数据。jQuery 提供了多种方法以方便我们构建 Ajax 请求和处理服务器响应。本文将会介绍如何使用 jQuery 构建 Ajax 请求，以及如何在服务器端处理这些请求。

发送数据

GET 请求

以 GET 方式向服务器发送数据的方法十分简单：

$.get('http://example.com/data.php', { name: '张三', age: 20 }, function(data) {
  // 处理服务器返回的数据
});

上述代码的第一个参数是 URL，第二个参数是需要发送的数据（可以是对象、数组等等），第三个参数是回调函数，用来处理服务器返回的数据。接下来通过 jQuery 函数 $.get() 发起请求。

POST 请求

以 POST 方式向服务器发送数据也相对简单：

$.post('http://example.com/data.php', { name: '张三', age: 20 }, function(data) {
  // 处理服务器返回的数据
});

上述代码中，第一个参数仍然是 URL，第二个参数也是需要发送的数据，第三个参数同样是回调函数，用来处理服务器返回的数据。注意，使用 POST 请求的时候需要确保服务器能够正常处理 POST 请求。

JSONP 请求

有些跨域请求需要使用 JSONP，那么如何使用 jQuery 发起一个 JSONP 请求呢？很简单：

$.getJSON('http://example.com/data.php?callback=?', { name: '张三', age: 20 }, function(data) {
  // 处理服务器返回的数据
});

其中，通过 $.getJSON() 来发起请求，第一个参数是一个 URL，其中包含了一个 callback=? 的查询字符串，这个查询字符串告诉服务器要使用 JSONP 格式进行返回数据。第二个参数仍然是需要发送的数据，第三个参数是回调函数。

处理服务器返回的数据

无论是使用 GET、POST 还是 JSONP，在服务器端处理完成后，都需要将数据返回给客户端。如果需要对返回的数据进行处理，可以在上述代码中的回调函数中完成处理。

以下是服务器返回数据的示例代码：

// 以 JSON 格式返回数据
header('Content-Type: application/json');
echo json_encode([
    'name' => $_POST['name'],
    'age' => $_POST['age']
]);

// 以 XML 格式返回数据
header('Content-Type: application/xml');
echo '<person><name>' . $_POST['name'] . '</name><age>' . $_POST['age'] . '</age></person>';

在客户端中可以使用回调函数处理这些数据：

$.get('http://example.com/data.php', { name: '张三', age: 20 }, function(data) {
  console.log(data.name); // 输出张三
  console.log(data.age); // 输出20
}, 'json');

上述代码中，第四个参数 json 告诉 jQuery 返回的数据格式是 JSON。

除了可以使用 $.get()、$.post()、$.getJSON() 处理服务器返回的数据外，也可以使用 $.ajax() 方法自定义请求。这里不再赘述。

结论

使用 jQuery 发送请求和处理服务器返回的数据非常方便。通过本文所介绍的方法，可以轻松地构建具有实际应用价值的 Web 应用程序。