jQuery Ajax 调用 - 成功时设置变量值[重复]

Ajax

使用 jQuery Ajax 调用是在前端开发中经常使用的一种技术。通过 Ajax 调用，我们可以通过异步方式与服务器进行通信，获取数据并更新页面内容，而无需重新加载整个页面。在实际开发中，经常会遇到需要在 Ajax 请求成功时设置变量值的情况。本文将介绍如何使用 jQuery Ajax 调用，并在成功时设置变量值。

在使用 jQuery Ajax 调用之前，我们需要先引入 jQuery 库。可以在 HTML 文件的 标签中添加以下代码来引入 jQuery 库：

html
<script src="JSdelivr.net/npm/jquery@3.6.0/dist/jquery.min.JS">https://cdn.JSdelivr.net/npm/jquery@3.6.0/dist/jquery.min.JS</a>"></script>

引入 jQuery 库后，我们就可以使用其中的 Ajax 方法来进行服务器通信了。下面是一个基本的 jQuery Ajax 调用的例子：

Javascript
$.Ajax({
  url: "https://api.example.com/data",
  method: "GET",
  dataType: "JSon",
  success: function(response) {
    // 在这里处理成功的响应
    var data = response.data;
    // 设置变量值
    var variable = data.variable;
    // 其他操作...
  },
  error: function(xhr, status, error) {
    // 在这里处理错误的响应
    console.log("请求失败：" + error);
  }
});

在上述例子中，我们使用 $.Ajax 方法发起一个 GET 请求，请求的 URL 是 https://api.example.com/data。成功时，success 回调函数会被执行。在这个回调函数中，我们可以处理服务器返回的数据。例如，可以将返回的数据中的某个字段值赋给一个变量。

接下来，让我们看一个具体的案例，演示如何使用 jQuery Ajax 调用，并在成功时设置变量值。

案例：根据用户输入的城市名称，获取该城市的天气信息并设置变量值

首先，我们需要在 HTML 文件中添加一个输入框和一个按钮，用于输入城市名称和触发 Ajax 请求。代码如下：

html
<input type="text" id="cityInput" placeholder="请输入城市名称">
<button id="getWeatherButton">获取天气信息</button>

然后，在 JavaScript 文件中，我们可以通过监听按钮的点击事件来触发 Ajax 请求，并在成功时设置变量值。代码如下：

Javascript
$(document).ready(function() {
  $("#getWeatherButton").click(function() {
    var cityName = $("#cityInput").val();
    // 发起 Ajax 请求
    $.Ajax({
      url: "https://api.example.com/weather",
      method: "GET",
      data: {
        city: cityName
      },
      dataType: "JSon",
      success: function(response) {
        // 在这里处理成功的响应
        var weatherData = response.weather;
        // 设置变量值
        var temperature = weatherData.temperature;
        // 其他操作...
      },
      error: function(xhr, status, error) {
        // 在这里处理错误的响应
        console.log("请求失败：" + error);
      }
    });
  });
});

在上述代码中，我们通过监听按钮的点击事件来获取用户输入的城市名称，并将其作为参数传递给 Ajax 请求。成功时，success 回调函数会被执行，我们可以在其中处理服务器返回的天气信息，并将温度赋给一个变量。

通过上述案例，我们可以看到如何使用 jQuery Ajax 调用，并在成功时设置变量值。这样，我们就可以根据服务器返回的数据来动态更新页面内容或进行其他操作了。使用 jQuery Ajax 调用可以使网页更加动态和用户友好，提升用户体验。