Tech Blog

2024-08-13

以下是一个简单的AJAX前后端交互的例子。前端使用JavaScript和AJAX发送请求，后端使用Python的Flask框架处理请求。

前端（HTML + JavaScript）:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX Example</title>
    <script>
        function fetchData() {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "/get_data", true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("data").innerHTML = xhr.responseText;
                }
            };
            xhr.send();
        }
    </script>
</head>
<body>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="data">Data will appear here after fetching.</div>
</body>
</html>

后端（Python + Flask）:




from flask import Flask, render_template, request
 
app = Flask(__name__)
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/get_data')
def get_data():
    # 这里只是示例，通常后端会处理数据库数据等
    data = "Hello, this is the data!"
    return data, 200
 
if __name__ == '__main__':
    app.run(debug=True)

在这个例子中，当用户点击按钮时，JavaScript中的fetchData函数会被调用，发送一个AJAX GET请求到/get_data。后端的Flask应用处理这个请求，并返回一个简单的字符串数据。这个数据随后被插入到HTML页面中的指定元素内。

- 阅读更多 -

AJAX在PHP中的应用示例代码

System

2024-08-13

所有,ajax

以下是一个简单的PHP代码示例，用于处理通过AJAX发送的数据，并返回响应：




<?php
// 确保只有AJAX请求可以访问此文件
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
    // 连接数据库（以PDO为例）
    try {
        $pdo = new PDO('mysql:host=localhost;dbname=your_database', 'username', 'password');
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    } catch(PDOException $e) {
        die('数据库连接失败: ' . $e->getMessage());
    }
 
    // 获取AJAX发送的数据
    $data = $_POST['data'];
 
    // 执行数据库操作
    // 例如：插入数据到数据库
    $stmt = $pdo->prepare("INSERT INTO your_table (column_name) VALUES (:data)");
    $stmt->bindParam(':data', $data);
    $stmt->execute();
 
    // 返回成功响应
    echo json_encode(array('status' => 'success', 'message' => '数据已保存'));
} else {
    // 非AJAX请求时的响应
    echo json_encode(array('status' => 'error', 'message' => '非法请求'));
}
?>

这段代码首先检查了请求是否是一个AJAX请求，如果是，则连接数据库，处理数据，并返回一个JSON格式的响应。如果不是AJAX请求，它将返回一个错误信息。这是一个简化的示例，实际应用中可能需要更复杂的数据处理和错误处理。

- 阅读更多 -

java 上传图片，图片预览，2种方法

System

2024-08-13

所有,ajax

在Java中，您可以使用Servlet和JSP技术来实现图片上传和预览的功能。以下是两种方法：

方法一：使用Apache Commons FileUpload库上传图片，然后通过Servlet将图片发送到客户端。

添加依赖库：Apache Commons FileUpload和Commons IO。
创建一个Servlet来处理文件上传。
创建一个JSP页面来显示图片（如果已上传）。

示例代码：




// FileUploadServlet.java
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    DiskFileItemFactory factory = new DiskFileItemFactory();
    ServletFileUpload upload = new ServletFileUpload(factory);
 
    try {
        List<FileItem> items = upload.parseRequest(request);
        for (FileItem item : items) {
            if (!item.isFormField()) {
                String fileName = item.getName();
                // Process the input stream
                InputStream fileContent = item.getInputStream();
                // Write the file
                Files.copy(fileContent, Paths.get("uploads", fileName), StandardCopyOption.REPLACE_EXISTING);
                // Redirect to JSP page with image preview
                response.sendRedirect("upload.jsp");
            }
        }
    } catch (FileUploadException e) {
        e.printStackTrace();
    }
}




<!-- upload.jsp -->
<%
    String imagePath = "uploads/" + request.getParameter("imageName");
%>
<img src="<%= imagePath %>" alt="Uploaded Image"/>

方法二：使用Spring框架的MultipartFile接收上传的文件，然后通过控制器将图片路径发送到客户端。

添加Spring相关依赖。
创建一个控制器来处理文件上传。
创建一个视图来显示图片（如果已上传）。

示例代码：




// FileUploadController.java
@PostMapping("/upload")
public String handleFileUpload(@RequestParam("file") MultipartFile file) throws IOException {
    String fileName = file.getOriginalFilename();
    Path filePath = Paths.get("uploads", fileName);
    Files.copy(file.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING);
    return "redirect:/upload";
}
 
@GetMapping("/upload")
public String showUploadForm(Model model) {
    // Check if there is an uploaded image
    // Add image path to the model if it exists
    return "upload";
}




<!-- upload.jsp -->
<c:if test="${imagePath != null}">
    <img src="${imagePath}" alt="Uploaded Image"/>
</c:if>

在两种方法中，我们都是将图片保存到服务器的"uploads"目录下，然后通过JSP页

- 阅读更多 -

JavaWeb学习总结AJAX

System

2024-08-13

所有,ajax

AJAX（Asynchronous JavaScript and XML）是一种创建交互式网页的技术，可以实现页面的部分刷新，而不需要重新加载整个页面。

以下是一个简单的AJAX请求示例，使用JavaScript和jQuery实现：




<!DOCTYPE html>
<html>
<head>
    <title>AJAX Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#myButton").click(function(){
                $.ajax({
                    type: "POST",
                    url: "server.php",
                    data: {name: "John", location: "Boston"},
                    success: function(msg){
                        alert("Server replied: " + msg);
                    }
                });
            });
        });
    </script>
</head>
<body>
 
<button id="myButton">Send Request</button>
 
</body>
</html>

在上述代码中，当按钮被点击时，会发送一个AJAX请求到server.php。请求类型为POST，发送了两个数据字段：name和location。成功收到响应后，会弹出一个包含服务器响应的警告框。

服务器端的server.php可能看起来像这样：




<?php
$name = $_POST['name'];
$location = $_POST['location'];
 
echo "Hello, $name from $location!";
?>

这个简单的例子展示了如何使用AJAX发送数据到服务器并处理响应，而不需要刷新页面。

- 阅读更多 -

Ajax模拟视频点赞功能

System

2024-08-13

所有,ajax

以下是一个使用Ajax模拟视频点赞功能的简单示例。这个示例假设你已经有了一个视频列表和一个点赞按钮，并且你有一个API可以处理点赞逻辑。

HTML 部分：




<!-- 视频列表示例 -->
<ul id="video-list">
  <li data-video-id="123">
    <button class="like-button">点赞</button>
  </li>
  <!-- 更多视频... -->
</ul>

JavaScript 部分：




// 获取视频列表和点赞按钮
const videoList = document.getElementById('video-list');
videoList.addEventListener('click', function(event) {
  // 检查点赞按钮是否被点击
  const likeButton = event.target.closest('.like-button');
  if (likeButton) {
    // 获取视频ID
    const videoId = likeButton.closest('li').dataset.videoId;
 
    // 发送Ajax请求到服务器以处理点赞逻辑
    fetch('/api/videos/' + videoId + '/like', {
      method: 'POST', // 使用POST请求处理点赞逻辑
      headers: {
        'Content-Type': 'application/json',
        // 这里添加其他需要的头部信息，例如认证token等
      },
      // 发送数据到服务器，如果需要的话
      body: JSON.stringify({ videoId: videoId })
    })
    .then(response => response.json()) // 解析服务器响应的JSON数据
    .then(data => {
      // 处理服务器响应的数据，例如更新前端状态
      if (data.success) {
        // 点赞成功的逻辑，例如更新视频的点赞数等
        console.log('点赞成功！');
      } else {
        // 点赞失败的逻辑，例如提示用户错误信息等
        console.log('点赞失败：' + data.error);
      }
    })
    .catch(error => {
      // 错误处理
      console.error('点赞时发生错误：', error);
    });
  }
});

这个JavaScript代码会监听点赞按钮的点击事件，当点赞按钮被点击时，它会向服务器发送一个POST请求处理点赞逻辑。服务器需要有相应的API接口来处理这个请求，并返回成功或失败的响应。

请注意，这个示例假定服务器返回的数据格式是JSON，并且服务器已经配置好了CORS策略以允许前端代码发送Ajax请求。根据你的实际API和安全需求，你可能需要添加额外的头部信息，如认证token等。

- 阅读更多 -

Spark内容分享：三种 Spark 部署模式介绍

System

2024-08-13

所有,ajax

Spark支持三种常见的部署模式：本地模式（Local Mode）、集群模式（Cluster Mode）和客户端模式（Client Mode）。

本地模式（Local Mode）：
本地模式通常用于开发和测试。它在单个进程中运行Spark，不需要其他服务。




val conf = new SparkConf().setMaster("local").setAppName("Local Mode App")
val sc = new SparkContext(conf)

集群模式（Cluster Mode）：
集群模式需要一个已经启动的Spark集群。作业提交给集群的主节点，然后在计算节点上执行。




val conf = new SparkConf().setMaster("spark://207.184.161.189:7077").setAppName("Cluster Mode App")
val sc = new SparkContext(conf)

客户端模式（Client Mode）：
客户端模式也是在集群上运行，但是会在提交作业的机器上开启一个客户端（driver），用于提交作业和接收运行状态。




val conf = new SparkConf().setMaster("spark://207.184.161.189:7077").setAppName("Client Mode App").set("spark.submit.deployMode", "client")
val sc = new SparkContext(conf)

以上代码中，setMaster方法设置了Spark应用程序要连接的Spark集群的URL。setAppName方法设置了应用程序的名称，用于在集群管理器界面展示。在客户端模式中，通过set方法设置了提交模式为"client"。

- 阅读更多 -

ajaxForm表单的基本使用

System

2024-08-13

所有,ajax

在使用ajaxForm进行表单的基础用法时，首先需要引入jQuery和jQuery Form插件。以下是一个简单的示例：

HTML部分：




<form id="myForm" action="submit.php" method="post">
    Name: <input type="text" name="name" />
    Comment: <textarea name="comment"></textarea>
    <input type="submit" value="Submit" />
</form>

JavaScript部分：




$(document).ready(function() {
    $('#myForm').ajaxForm({
        beforeSubmit: function(arr, $form, options) {
            // 可以在这里进行表单验证
            console.log('正在提交...');
        },
        success: function(responseText, statusText, xhr, $form) {
            // 提交成功后的回调函数
            console.log('提交成功');
            console.log(responseText);
        },
        error: function() {
            // 提交失败的回调函数
            console.log('提交失败');
        }
    });
});

在这个例子中，当表单被提交时，数据会异步发送到服务器，而不会导致页面刷新。在提交前，可以在beforeSubmit函数中进行表单验证，提交成功后，服务器返回的响应会在success函数中处理，如果出现错误，则在error函数中处理。

System

2024-08-13

所有,ajax

在AJAX请求中，我们通常使用回调函数（callback）来处理异步操作。然而，深层嵌套的回调会导致所谓的"回调地狱"（callback hell），不仅代码可读性差，还可能导致错误管理复杂。因此，Promise、async/await和事件循环为我们提供了更现代和可维护的异步代码解决方案。

使用Promise链式调用：




getJSON('/posts')
  .then(function(posts) {
    return getJSON(posts[0].commentURL);
  })
  .then(function(comments) {
    console.log(comments);
  })
  .catch(function(error) {
    // 处理前面任何步骤中的错误
    console.error(error);
  });

使用async/await（需要在顶部声明async）：




async function fetchPostsAndComments() {
  try {
    const posts = await getJSON('/posts');
    const comments = await getJSON(posts[0].commentURL);
    console.log(comments);
  } catch (error) {
    console.error(error);
  }
}

事件循环和异步函数：




const eventLoop = setInterval(function handleInterval() {
  console.log('这是一个事件循环的tick');
}, 0);
 
async function asyncFunction() {
  while (true) {
    console.log('这是一个异步函数的tick');
    await new Promise(resolve => setTimeout(resolve, 1000));
  }
}
 
asyncFunction();

以上代码展示了如何使用现代JavaScript特性处理AJAX请求。Promise和async/await是编写异步代码的更好方法，因为它们使得代码更易读、管理和维护。

- 阅读更多 -

使用jQuery的Ajax发送POST请求

System

2024-08-13

所有,ajax

在使用jQuery发送POST请求时，可以使用$.ajax()方法。以下是一个简单的例子：




$.ajax({
    url: 'your-endpoint.php', // 目标URL
    type: 'POST', // 请求类型
    data: {
        key1: 'value1', // 要发送的数据
        key2: 'value2'
    },
    success: function(response) {
        // 请求成功时的回调函数
        console.log(response);
    },
    error: function(xhr, status, error) {
        // 请求失败时的回调函数
        console.error(error);
    }
});

在这个例子中，your-endpoint.php是你想要发送POST请求到的服务器端点，data对象包含了你想要发送的键值对数据。当请求成功完成时，success回调函数会被调用，并且响应内容会作为参数传入。如果请求失败，error回调函数会被调用，并且错误信息会作为参数传入。

- 阅读更多 -

php操作服务器中json文件进行读写操作用ajax交互

System

2024-08-13

所有,ajax

在PHP中，你可以使用file_get_contents和file_put_contents函数来读取和写入JSON文件。以下是一个简单的例子，展示了如何通过AJAX与PHP交互来进行JSON文件的读写操作。

首先，创建一个PHP脚本来处理AJAX请求：




<?php
// 文件路径
$jsonFile = 'data.json';
 
// 根据请求类型进行操作
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
    // 读取JSON文件
    $data = file_get_contents($jsonFile);
    header('Content-Type: application/json');
    echo $data;
} elseif ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 接收POST数据
    $data = json_decode(file_get_contents('php://input'), true);
 
    // 写入JSON文件
    file_put_contents($jsonFile, json_encode($data));
 
    // 返回操作成功的响应
    echo json_encode(['status' => 'success']);
}
?>

然后，创建一个JavaScript脚本来使用AJAX与PHP通信：




// 读取JSON数据
function getJsonData() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'your-php-script.php', true);
    xhr.onload = function() {
        if (this.status == 200) {
            const data = JSON.parse(this.responseText);
            console.log(data);
            // 处理读取到的数据
        }
    };
    xhr.send();
}
 
// 写入JSON数据
function postJsonData(data) {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'your-php-script.php', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onload = function() {
        if (this.status == 200) {
            const response = JSON.parse(this.responseText);
            console.log(response.status);
            // 处理写入操作的结果
        }
    };
    xhr.send(JSON.stringify(data));
}
 
// 使用示例
const jsonData = { key: 'value' };
postJsonData(jsonData);

确保替换your-php-script.php为实际的PHP脚本路径。这个例子中，我们定义了两个函数getJsonData和postJsonData来分别进行JSON文件的读取和写入操作。使用XMLHttpRequest对象通过AJAX与服务器进行通信。

- 阅读更多 -