标签 Javascript 下的文章

2024-08-18

以下是一个简化的示例，展示了如何使用JavaScript和AJAX实现二级联动菜单。

HTML部分（index.jsp）:




<!DOCTYPE html>
<html>
<head>
    <title>二级联动菜单</title>
    <script src="ajax.js"></script>
    <script>
        function fetchSubCategories(categoryId) {
            var url = 'SubCategoryServlet?categoryId=' + categoryId;
            var subCategorySelect = document.getElementById('subCategory');
 
            // 清空二级菜单选项
            subCategorySelect.options.length = 0;
 
            // 发送AJAX请求获取子分类
            getJSON(url, function(data) {
                if (data) {
                    data.forEach(function(item) {
                        var option = document.createElement('option');
                        option.value = item.id;
                        option.text = item.name;
                        subCategorySelect.appendChild(option);
                    });
                }
            });
        }
    </script>
</head>
<body>
    <form>
        <select id="category" onchange="fetchSubCategories(this.value);">
            <option value="">选择一级分类</option>
            <!-- 动态加载一级分类 -->
        </select>
        <select id="subCategory">
            <option value="">选择子分类</option>
            <!-- 动态加载子分类 -->
        </select>
    </form>
</body>
</html>

JavaScript部分（ajax.js）:




function getJSON(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var data = JSON.parse(xhr.responseText);
            callback(data);
        }
    };
    xhr.send();
}

Servlet部分（SubCategoryServlet.java）:




import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.util.List;
import java.util.ArrayList;
 
public class SubCategoryServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        int categoryId = Integer.parseInt(request.getParameter("categoryId"));
        List<SubCategory> subCategories = fetchSubCategoriesByCategoryId(categoryId);
 
        response.setContentType("application/json");
        response.

System

2024-08-18

所有,ajax

由于提供的查询过于复杂，并且涉及到多个不同的功能，我将提供一个简化的示例来说明如何使用JSP、Servlet和MySQL来实现一个简单的图书借阅查询功能。

假设我们有一个简单的图书借阅数据库，包含图书信息和借阅记录。以下是实现查询的基本步骤：

创建数据库和表：




CREATE DATABASE library;
 
USE library;
 
CREATE TABLE books (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    author VARCHAR(255) NOT NULL
);
 
CREATE TABLE loans (
    id INT AUTO_INCREMENT PRIMARY KEY,
    book_id INT,
    reader_id INT,
    loan_date DATE,
    FOREIGN KEY (book_id) REFERENCES books(id),
    FOREIGN KEY (reader_id) REFERENCES readers(id)
);

创建一个Servlet来处理查询请求：




@WebServlet("/loan-query")
public class LoanQueryServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String bookTitle = request.getParameter("title");
 
        Connection conn = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
 
        try {
            // 建立数据库连接
            conn = DriverManager.getConnection("jdbc:mysql://localhost/library", "username", "password");
 
            // 准备SQL查询
            String sql = "SELECT b.title, b.author, l.loan_date FROM books b INNER JOIN loans l ON b.id = l.book_id WHERE b.title = ?";
            pstmt = conn.prepareStatement(sql);
            pstmt.setString(1, bookTitle);
 
            // 执行查询并处理结果
            rs = pstmt.executeQuery();
            List<Loan> loans = new ArrayList<>();
            while (rs.next()) {
                Loan loan = new Loan();
                loan.setTitle(rs.getString("title"));
                loan.setAuthor(rs.getString("author"));
                loan.setLoanDate(rs.getDate("loan_date"));
                loans.add(loan);
            }
 
            // 将结果设置到request属性中，以便JSP页面使用
            request.setAttribute("loans", loans);
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            // 关闭资源
            ...
        }
 
        // 请求转发到JSP页面
        request.getRequestDispatcher("/loanQuery.jsp").forward(request, response);
    }
}

创建一个JSP页面来显示查询结果：




<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>Loan Query</title>
</head>
<body>
<h2>Loan Query Results</h2>
<ul>
    <c:forEach var="loan" items="${loans}">

- 阅读更多 -

Ajax&jsonp初步

System

2024-08-18

所有,ajax

JSONP（JSON with Padding）是一种跨域请求数据的方式，可以让你在不同域的服务器上获取数据。JSONP请求不受浏览器同源政策的限制。

以下是一个简单的JSONP请求示例：

首先，你需要在服务器上设置一个能够接收JSONP请求的接口。假设你的服务器端代码（如Node.js）可以处理JSONP请求：




app.get('/api/data', function(req, res) {
    var callback = req.query.callback;
    var data = {
        key: 'value'
    };
    res.send(callback + '(' + JSON.stringify(data) + ');');
});

然后，在前端页面上，你可以使用以下方式发送JSONP请求：




<script>
function jsonpCallback(data) {
    // 处理从服务器返回的数据
    console.log(data);
}
 
var script = document.createElement('script');
script.src = 'http://yourserver.com/api/data?callback=jsonpCallback';
document.head.appendChild(script);
</script>

在这个例子中，我们创建了一个script标签，并设置其src属性为我们的服务器地址加上一个查询参数callback，其值为将要处理服务器返回数据的函数名。服务器端会处理这个请求，并返回一个调用callback函数的字符串，传入的数据作为参数。

这就是JSONP的基本使用方式。需要注意的是，JSONP只支持GET请求，不支持POST等其他类型的HTTP请求。

- 阅读更多 -

js函数、事件、常见提示信息、请求、Ajax

System

2024-08-18

所有,ajax

由于您的问题包含多个不同的主题，我将提供每个主题的简要示例代码。

JavaScript 函数：




// 普通函数
function greet(name) {
  return `Hello, ${name}!`;
}
 
// 箭头函数
const greetArrow = (name) => `Hello, ${name}!`;

JavaScript 事件：




// 绑定点击事件到按钮
document.getElementById('myButton').addEventListener('click', function() {
  alert('Button clicked!');
});

常见提示信息：




// 弹出警告框
alert('This is an alert!');
 
// 确认框
if (confirm('Are you sure?')) {
  console.log('User confirmed');
} else {
  console.log('User cancelled');
}
 
// 输入框
let userInput = prompt('Please enter your name:');
if (userInput) {
  console.log(`User entered: ${userInput}`);
}

XMLHttpRequest（简单的 AJAX 请求）：




// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 配置HTTP请求
xhr.open('GET', 'https://api.example.com/data', true);
 
// 设置请求完成的处理函数
xhr.onload = function() {
  if (this.status == 200) {
    // 请求成功
    console.log(this.response);
  }
};
 
// 发送请求
xhr.send();

Fetch API（现代的 AJAX 请求）：




// 发送GET请求
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });
 
// 发送POST请求
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error posting data:', error);
  });

这些代码示例展示了如何在JavaScript中创建函数、处理事件、使用常见的提示信息对话框、发起简单和现代的AJAX请求。

- 阅读更多 -

js 常见递归方式

System

2024-08-18

所有,javascript

在JavaScript中，常见的递归方式主要有两种：直接递归和间接递归。

直接递归：函数调用自身直接进行递归。

间接递归：函数调用另一个间接递归函数，最终再次调用自身进行递归。

以下是两种递归方式的示例代码：

直接递归示例 - 计算阶乘：




function factorial(n) {
  if (n === 1) {
    return 1;
  }
  return n * factorial(n - 1);
}
 
console.log(factorial(5)); // 输出：120

间接递归示例 - 计算二叉树的最大宽度：




class Node {
  constructor(value, left, right) {
    this.value = value;
    this.left = left;
    this.right = right;
  }
}
 
function width(node) {
  if (!node) {
    return 0;
  }
  const leftWidth = width(node.left);
  const rightWidth = width(node.right);
  return Math.max(leftWidth, rightWidth) + 1;
}
 
const root = new Node(
  'a',
  new Node('b', new Node('d', null, null), new Node('e', null, null)),
  new Node('c', null, new Node('f', null, null))
);
 
console.log(width(root)); // 输出：3

在这两个示例中，递归函数都有一个终止条件，否则会导致无限递归。递归函数通常还需要有一个从已知条件向未知条件递归的逻辑。

- 阅读更多 -

moment.js 使用方法总结（最全）

System

2024-08-18

所有,javascript

Moment.js 是一个用于解析、校验、操作、以及显示日期和时间的JavaScript库。以下是一些常用的 Moment.js 方法：

当前时间：




var now = moment();

指定时间：




var specified = moment("2020-10-20");

格式化时间：




var formatted = moment().format("YYYY-MM-DD HH:mm:ss");

校验时间有效性：




var isValid = moment("2020-13-20").isValid(); // 返回 false，因为月份不能大于12

日期操作：




var tomorrow = moment().add(1, "days"); // 明天
var yesterday = moment().subtract(1, "days"); // 昨天
var nextWeek = moment().add(1, "weeks"); // 下个星期
var lastWeek = moment().subtract(1, "weeks"); // 上个星期

计算两个日期之间的差异：




var duration = moment.duration(moment("2020-10-20").diff(moment("2020-10-19")));

获取特定的时间单元：




var year = moment().year();
var month = moment().month(); // 注意：月份是从0开始的
var day = moment().date();
var hour = moment().hour();
var minute = moment().minute();
var second = moment().second();

语言设置：




moment.locale("zh-cn"); // 设置语言为中文

以上是 Moment.js 的一些常用方法，实际使用时可以根据需要选择合适的方法。

- 阅读更多 -

js 深度对象筛选器

System

2024-08-18

所有,javascript




/**
 * 深度对象筛选器
 * @param {Object} obj 要筛选的对象
 * @param {Function} filterFn 筛选函数，返回true保留，false则过滤掉
 * @returns {Object} 筛选后的对象
 */
function deepFilter(obj, filterFn) {
  if (obj === null || typeof obj !== 'object' || typeof filterFn !== 'function') {
    return obj;
  }
 
  if (Array.isArray(obj)) {
    return obj.map(item => deepFilter(item, filterFn)).filter(filterFn);
  }
 
  const filteredObj = {};
  for (const [key, value] of Object.entries(obj)) {
    if (filterFn(value, key)) {
      filteredObj[key] = deepFilter(value, filterFn);
    }
  }
  return filteredObj;
}
 
// 示例使用：
const originalObject = {
  level1: {
    level2: {
      keepMe: 'yes',
      removeMe: 'no'
    }
  },
  level1b: {
    level2b: {
      keepMeToo: 'yes',
      removeMeToo: 'no'
    }
  }
};
 
const filteredObject = deepFilter(originalObject, (value, key) => key.includes('keep'));
console.log(filteredObject);

这段代码定义了一个deepFilter函数，它接受一个对象和一个筛选函数作为参数。如果对象是数组，它会递归地处理数组中的每个元素，并使用筛选函数进行过滤。如果对象是普通对象，它会遍历对象的属性，并对每个属性应用筛选函数。如果筛选函数返回true，则该属性会被保留在新的对象中。这个函数可以用来深度过滤复杂的嵌套对象，保留符合条件的属性。

- 阅读更多 -

nodejs---fs模块，文件读写操作详解，自定义一个文件写入方法

System

2024-08-18

所有,javascript

在Node.js中，我们可以使用内置的fs模块来进行文件的读写操作。以下是一个简单的例子，展示了如何创建一个自定义的文件写入方法：




const fs = require('fs');
 
/**
 * 自定义写入文件的方法
 * @param {string} filePath - 文件路径
 * @param {string|Buffer} data - 要写入的数据
 * @param {function} callback - 回调函数，包含可能出现的错误
 */
function writeFile(filePath, data, callback) {
  fs.writeFile(filePath, data, (err) => {
    if (err) {
      // 如果有错误，执行回调并传递错误对象
      callback(err);
      return;
    }
    // 如果没有错误，执行回调并传递null作为第一个参数
    callback(null);
  });
}
 
// 使用自定义的方法写入文件
writeFile('example.txt', 'Hello, World!', (err) => {
  if (err) {
    console.error('写入文件时发生错误:', err);
    return;
  }
  console.log('文件写入成功！');
});

在这个例子中，我们定义了一个writeFile函数，它接受文件路径、要写入的数据和一个回调函数作为参数。该函数使用fs.writeFile来执行实际的写入操作，并通过回调函数向调用者传递可能发生的错误。这是一个简单的封装，使得文件写入操作更易用。

- 阅读更多 -

JS的设计原理

System

2024-08-18

所有,javascript

JavaScript（JS）的设计原理和核心概念可以概括为以下几点：

基于对象和事件驱动的脚本语言。
解释型语言，无需编译即可运行。
动态类型语言，变量不需要显式类型声明。
单线程，同步执行，但可以使用回调（callback）和Promises等技术实现异步编程。
提供丰富的内置对象和函数，以及灵活的作用域规则。
支持面向对象编程和函数式编程范式。
在浏览器端和服务器端都得到广泛应用，分别在前端和后端发挥作用。

以下是一个简单的JavaScript示例代码，它展示了基本的JS语法：




// 定义一个函数
function greet(name) {
    return 'Hello, ' + name + '!';
}
 
// 使用变量和条件语句
var isHappy = true;
if (isHappy) {
    console.log('I am happy.');
} else {
    console.log('I am sad.');
}
 
// 创建一个对象
var person = {
    name: 'Alice',
    age: 25,
    greet: function() {
        console.log('Hi, my name is ' + this.name + '.');
    }
};
 
// 调用函数和对象方法
console.log(greet('World'));
person.greet();
 
// 事件监听和DOM操作
document.getElementById('myButton').addEventListener('click', function() {
    alert('Button clicked!');
});

这段代码展示了函数定义、变量使用、条件语句、对象创建和使用、异步事件处理等基本特性。

System

2024-08-18

所有,javascript

报错解释：

这个错误表明你的项目正在尝试导入名为 @vitejs/plugin-vue 的模块，但是这个模块在你的项目依赖中没有找到。这通常是因为你的项目缺少这个模块作为依赖，或者模块名称拼写错误。

解决方法：

确认你的项目是否应该使用 @vitejs/plugin-vue。如果应该使用，继续以下步骤。
安装 @vitejs/plugin-vue 模块。你可以通过以下命令来安装：
```
npm install @vitejs/plugin-vue --save-dev
```
或者使用 yarn：
```
yarn add @vitejs/plugin-vue --dev
```
确认 package.json 文件中是否已经正确添加了这个模块作为开发依赖。
如果你已经安装了这个模块，但是仍然出现错误，尝试删除 node_modules 目录和 package-lock.json 文件（如果使用 npm）或 yarn.lock 文件（如果使用 yarn），然后重新安装依赖：
```
npm install
```
或者
```
yarn install
```
确保你的项目中的导入语句正确拼写了模块名称。

如果你不需要使用 @vitejs/plugin-vue，那么你应该检查你的代码，移除对应的导入语句，或者替换成适合你项目的模块。

- 阅读更多 -