杂记-前端Ajax

当使用 Java Web 技术构建后端，并使用 AJAX 进行前后端交互时，以下是一个简单的示例：

###前端（使用 AJAX）：

<!DOCTYPE html>
<html>
<head>
  <title>AJAX 示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="getDataBtn">获取数据</button>
  <div id="result"></div>

  <script>
    $(document).ready(function() {
      // 当点击按钮时发送 AJAX 请求
      $('#getDataBtn').click(function() {
        $.ajax({
          url: 'backendServlet', // 后端的 Servlet 地址
          type: 'GET',
          dataType: 'json',
          success: function(data) {
            // 请求成功时更新页面内容
            $('#result').text(data.message);
          },
          error: function() {
            // 请求失败时显示错误信息
            $('#result').text('请求失败');
          }
        });
      });
    });
  </script>
</body>
</html>

后端（Java Servlet）：

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONObject;

public class BackendServlet extends HttpServlet {
  protected void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    // 处理 GET 请求
    JSONObject json = new JSONObject();
    json.put("message", "这是从后端返回的数据");

    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(json.toString());
  }
}

在上面的示例中，前端页面使用 AJAX 发送 GET 请求到名为 backendServlet 的后端 Servlet。后端 Servlet 接收到请求后，构造一个包含 JSON 数据的响应，并将其返回给前端。前端页面接收到响应后，通过 AJAX 回调函数处理响应数据，更新页面上的内容。

请注意，这只是一个简单的示例，实际应用中可能需要更复杂的处理逻辑和错误处理。另外，你需要将后端 Servlet 配置在服务器上，以便能够通过指定的 URL 访问到它。

这个示例演示了如何使用 AJAX 和 Java Web 技术进行前后端交互，通过 AJAX 发送请求，后端 Servlet 接收请求并返回响应数据。

JSON（JavaScript Object Notation）是一种用于数据交换的轻量级文本格式。它以易于阅读和编写的方式表示结构化数据，并且易于解析和生成。JSON数据是基于键值对的集合，其中键和值之间使用冒号（:）分隔，键值对之间使用逗号（,）分隔，整个数据使用花括号（{}）括起来。

以下是一个简单的 JSON 示例：

{
  "name": "John",
  "age": 30,
  "city": "New York"
}

在上面的示例中，JSON 表示一个包含三个键值对的对象。键是字符串，用双引号括起来，值可以是字符串、数字、布尔值、数组、嵌套的对象或null。

JSON 提供了一种通用的数据格式，被广泛用于前后端之间的数据交换。在 Web 开发中，常用于前后端之间的数据传输，尤其是在使用 AJAX 进行异步通信时，常用 JSON 格式来传输数据。

在前端，可以使用 JavaScript 的内置函数 JSON.parse() 将 JSON 字符串解析为 JavaScript 对象，以便对数据进行处理。反之，可以使用 JSON.stringify() 将 JavaScript 对象转换为 JSON 字符串，以便进行传输或存储。

总结：JSON 是一种用于数据交换的文本格式，以易读易写的方式表示结构化数据。它广泛用于前后端之间的数据交互，并可以通过 JavaScript 的内置函数进行解析和生成。

如果前端发送的是 POST 请求，你可以在前端的 AJAX 请求中指定请求方法为 “POST”，并将数据作为请求体发送给后端。在后端的 Servlet 中，你需要相应地处理 POST 请求的数据。

以下是在前端使用 POST 请求发送数据给后端的示例：

###前端（使用 AJAX 发送 POST 请求）：

<!DOCTYPE html>
<html>
<head>
  <title>AJAX POST 请求示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="sendDataBtn">发送数据</button>

  <script>
    $(document).ready(function() {
      // 当点击按钮时发送 POST 请求
      $('#sendDataBtn').click(function() {
        var data = {
          name: 'John',
          age: 30
        };

        $.ajax({
          url: 'backendServlet', // 后端的 Servlet 地址
          type: 'POST',
          dataType: 'json',
          data: JSON.stringify(data), // 将数据转换为 JSON 字符串发送
          contentType: 'application/json',
          success: function(response) {
            // 请求成功时处理响应
            console.log(response.message);
          },
          error: function() {
            // 请求失败时显示错误信息
            console.log('请求失败');
          }
        });
      });
    });
  </script>
</body>
</html>

后端（Java Servlet 处理 POST 请求）：

import java.io.BufferedReader;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONObject;

public class BackendServlet extends HttpServlet {
  protected void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    // 从请求体中读取数据
    StringBuilder requestBody = new StringBuilder();
    BufferedReader reader = request.getReader();
    String line;
    while ((line = reader.readLine()) != null) {
      requestBody.append(line);
    }

    // 解析请求体中的数据
    JSONObject jsonData = new JSONObject(requestBody.toString());
    String name = jsonData.getString("name");
    int age = jsonData.getInt("age");

    // 处理数据并生成响应
    JSONObject jsonResponse = new JSONObject();
    jsonResponse.put("message", "接收到的数据：" + name + ", " + age);

    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(jsonResponse.toString());
  }
}

在上面的示例中，前端通过 AJAX 发送 POST 请求到后端的 Servlet。在前端的 AJAX 请求中，我们将请求方法设置为 “POST”，并将数据对象转换为 JSON 字符串后作为请求体发送。在后端的 Servlet 中，我们使用 request.getReader() 方法获取请求体中的数据，并通过 JSONObject 解析和处理数据。然后，我们生成一个包含响应数据的 JSON 对象，并将其作为响应返回给前端。

需要注意的是，在发送 POST 请求时，要正确设置请求头的 Content-Type 为 'application/json'，以指示请求体的内容类型为 JSON 格式。

通过以上示例，你可以在前后端之间使用 POST 请求进行数据交互，并在后端的 Servlet 中接收和处理 POST 请求的数据。

###实时留言板

要实现一个实时留言板，您可以使用 AJAX 技术与 JavaWeb 后端结合。以下是一个基本的实现示例：

创建前端页面（例如 index.html）：

<!DOCTYPE html>
<html>
<head>
  <title>实时留言板</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>实时留言板</h1>
  <div id="messageContainer"></div>

  <form id="messageForm">
    <input type="text" id="nameInput" placeholder="姓名">
    <textarea id="messageInput" placeholder="留言"></textarea>
    <button type="submit">提交留言</button>
  </form>

  <script>
    // 定时更新留言
    setInterval(loadMessages, 5000);

    // 加载留言
    function loadMessages() {
      $.ajax({
        url: 'GetMessagesServlet', // 后端的 Servlet 地址
        type: 'GET',
        dataType: 'json',
        success: function(data) {
          // 清空留言容器
          $('#messageContainer').empty();

          // 遍历留言列表并添加到容器中
          $.each(data, function(index, message) {
            var messageHtml = '<div><strong>' + message.name + ':</strong> ' + message.content + '</div>';
            $('#messageContainer').append(messageHtml);
          });
        },
        error: function() {
          console.log('请求失败');
        }
      });
    }

    // 提交留言
    $('#messageForm').submit(function(e) {
      e.preventDefault();

      var name = $('#nameInput').val();
      var content = $('#messageInput').val();

      $.ajax({
        url: 'AddMessageServlet', // 后端的 Servlet 地址
        type: 'POST',
        dataType: 'json',
        data: { name: name, content: content },
        success: function() {
          // 提交成功后清空输入框并刷新留言
          $('#nameInput').val('');
          $('#messageInput').val('');
          loadMessages();
        },
        error: function() {
          console.log('提交失败');
        }
      });
    });
  </script>
</body>
</html>

创建后端 Servlet（例如 GetMessagesServlet）用于获取留言列表：

@WebServlet("/GetMessagesServlet")
public class GetMessagesServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 模拟从数据库或其他存储中获取留言列表
        List<Message> messages = new ArrayList<>();
        messages.add(new Message("John", "Hello"));
        messages.add(new Message("Jane", "Hi there"));
        
        // 将留言列表转换为 JSON 格式并发送给前端
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(new Gson().toJson(messages));
    }
}

创建后端 Servlet（例如 AddMessageServlet）用于添加留言：

@WebServlet("/AddMessageServlet")
public class AddMessageServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 获取前端提交的留言信息
        String name = request.getParameter("name

");
        String content = request.getParameter("content");
        
        // TODO: 将留言信息保存到数据库或其他存储中
        
        // 返回成功的状态给前端
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write("{\"status\":\"success\"}");
    }
}

上述示例中，前端页面使用 AJAX 定时请求 GetMessagesServlet 获取留言列表，并通过 AddMessageServlet 提交留言。后端 Servlet 根据业务逻辑获取或保存留言信息，并将留言列表或成功状态返回给前端。

请注意，上述示例是一个基本的实现框架，您可以根据自己的需求进行适当修改和扩展。例如，可以在后端使用数据库存储留言信息，可以增加用户认证和权限控制等功能。

###数组

要在前端依次展示一个数组内的数据内容，并为每个数据应用特定的样式，您可以使用 JavaScript 和 HTML/CSS 来实现。以下是一个简单的示例：

HTML：

<!DOCTYPE html>
<html>
<head>
  <title>展示数组数据</title>
  <style>
    /* 自定义样式 */
    .item {
      color: blue;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div id="container"></div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

JavaScript（script.js）：

$(document).ready(function() {
  // 定义要展示的数据数组
  var data = ["Apple", "Banana", "Orange", "Grapes"];

  // 获取容器元素
  var container = $('#container');

  // 遍历数据数组
  $.each(data, function(index, item) {
    // 创建元素并添加到容器中
    var element = $('<div>').addClass('item').text(item);
    container.append(element);
  });
});

上述示例中，我们定义了一个数组 data，其中包含要展示的数据内容。通过遍历数组，并使用 jQuery 动态创建元素，为每个数据项创建一个 <div> 元素，并为其添加自定义样式。最后，将创建的元素添加到容器 #container 中。

您可以根据自己的需求修改样式和数组数据，以及对创建的元素进行进一步的自定义和处理。

$('<div>') 是使用 jQuery 动态创建一个 <div> 元素的语法。addClass('item') 是为该元素添加一个 CSS 类名为 'item'，这样可以应用特定的样式。.text(item) 是设置该元素的文本内容为变量 item 的值。

这行代码的作用是创建一个 <div> 元素，并添加 'item' 类名和 item 的文本内容。这样可以在 HTML 中展示该元素，并应用特定的样式。

$.each(data, function(index, item) { ... }) 是使用 jQuery 的 $.each() 函数对一个数组或对象进行迭代的语法。在这个语法中，data 是要迭代的数组或对象，index 是当前元素的索引，item 是当前元素的值。

通过这个语法，你可以遍历数组或对象中的每个元素，并在迭代过程中执行特定的操作。你可以在函数体内部编写代码，对每个元素进行处理。

例如，如果 data 是一个包含多个数据的数组，你可以在函数体内部使用 item 变量来访问每个数据，并对其进行操作，比如创建元素、设置样式、添加到页面等。这样可以实现按照特定样式展示数组中的数据内容。

示例代码如下：

$.each(data, function(index, item) {
  var element = $('<div>').addClass('item').text(item);
  // 在这里可以对 element 进行进一步的操作，比如设置样式、添加到页面等
  // ...
});

在这个示例中，对于 data 数组中的每个元素，都会创建一个 <div> 元素，并应用 'item' 类名和元素的文本内容为当前元素的值。你可以根据需要在函数体内部对 element 进行进一步的操作。

Taninluv's blog

杂记-前端Ajax
Click back to the top

Home

Archives

杂记-前端Ajax