System 发布的文章

2024-08-08

Ajax全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的技术。它使得网页可以异步地与服务器通信，而不会打断用户的操作。

以下是一个使用原生JavaScript创建Ajax异步请求的例子：




// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'your-api-endpoint', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求成功的响应数据
      console.log(xhr.responseText);
    } else {
      // 处理请求失败
      console.error('AJAX Request was unsuccessful');
    }
  }
};
 
// 发送请求
xhr.send();

在这个例子中，我们创建了一个新的XMLHttpRequest对象，并配置了它去异步发送一个GET请求到指定的URL。我们还定义了一个回调函数，当请求的状态发生变化时会被调用，它会检查请求是否成功完成，并处理相应的数据。

注意：现代的开发中，我们通常会使用更现代的API，例如fetch，它提供了更好的语法，更多的选项，并且是基于Promises的，更适合于异步编程。

- 阅读更多 -

入门PHP就来我这（高级）33~ PHP与Ajax

System

2024-08-08

所有,ajax

在PHP中使用Ajax可以通过创建一个PHP脚本来处理Ajax请求并返回数据。以下是一个简单的例子：

PHP脚本 (server.php)：




<?php
// 检查是否有Ajax请求
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
    // 处理Ajax请求
    echo "Hello, Ajax!";
}
?>

HTML页面 (index.html)：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#ajax-btn").click(function(){
                $.ajax({
                    url: "server.php",
                    type: "GET",
                    success: function(response){
                        // 处理返回的数据
                        $("#response-container").text(response);
                    },
                    error: function(){
                        alert("Error");
                    }
                });
            });
        });
    </script>
</head>
<body>
 
<button id="ajax-btn">Send Ajax Request</button>
<div id="response-container"></div>
 
</body>
</html>

在这个例子中，当用户点击按钮时，一个Ajax请求会发送到 server.php。PHP脚本检查是否有Ajax请求，如果有，它会处理请求并返回数据。然后，Ajax请求将返回的数据插入到HTML页面的指定容器中。

- 阅读更多 -

摸鱼大数据——Spark基础——Spark On Yarn环境配置和部署

System

2024-08-08

所有,ajax




import org.apache.spark.{SparkConf, SparkContext}
 
object SparkOnYarnApp {
  def main(args: Array[String]): Unit = {
    // 配置Spark
    val conf = new SparkConf()
      .setAppName("SparkOnYarnApp")
      .setMaster("yarn") // 设置Spark运行模式为YARN
      .set("spark.executor.instances", "5") // 设置Executor的数量
      .set("spark.executor.cores", "2") // 设置每个Executor的核心数
      .set("spark.executor.memory", "4g") // 设置每个Executor的内存
      .set("spark.yarn.queue", "default") // 设置YARN队列
 
    // 创建SparkContext
    val sc = new SparkContext(conf)
 
    // 执行Spark作业
    val data = sc.parallelize(1 to 100)
    val count = data.filter(_ % 2 == 0).count() // 计算1到100中偶数的个数
    println(s"Even numbers count: $count")
 
    // 停止SparkContext
    sc.stop()
  }
}

这段代码演示了如何配置Spark以在YARN上运行，并创建一个简单的Spark应用程序，计算1到100中偶数的个数。在实际部署时，你需要确保YARN集群正常运行，并且Spark的jar包已经上传到HDFS上以供YARN使用。

System

2024-08-08

所有,ajax

HTTP进阶:

Cookie: 是服务器发送到用户浏览器并保存在本地的一小块数据。
响应的回报结果: 通常是服务器处理请求的结果，比如HTML文件、JSON数据、图片等。

Ajax:

全称为"Asynchronous JavaScript and XML"（异步JavaScript和XML），是在不刷新页面的情况下更新网页数据的方法。
使用JavaScript的XMLHttpRequest对象发送异步请求。

Form表单:

用于发送数据到服务器的HTML元素。
可以通过GET或POST方法发送数据，GET通常用于获取数据，POST用于修改服务器上的数据。

不同状态码的结果:

1xx: 信息性状态码，一般是临时响应。
2xx: 成功状态码，表示请求已成功。
3xx: 重定向状态码，要完成请求必须进行更进一步的操作。
4xx: 客户端错误状态码，请求包含错误。
5xx: 服务器错误状态码，服务器在处理请求时发生错误。

解决方案和示例代码:




// 使用Ajax发送POST请求
var xhr = new XMLHttpRequest();
xhr.open("POST", "your_url", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    // 请求成功，处理响应数据
    var response = xhr.responseText;
    console.log(response);
  } else {
    // 请求失败，处理错误
    console.error(xhr.statusText);
  }
};
xhr.send("key1=value1&key2=value2");
 
// Form表单提交
<form action="your_url" method="post">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" value="Submit" />
</form>
 
// 处理不同状态码的结果
if (xhr.status >= 200 && xhr.status < 300) {
  // 请求成功
} else {
  // 请求失败
}

以上代码提供了使用Ajax发送POST请求、处理Form表单提交以及处理HTTP请求状态码的基本示例。在实际应用中，需要根据具体需求进行调整和扩展。

- 阅读更多 -

redis + ajax实现异步下拉列表加载

System

2024-08-08

所有,ajax

在前端页面中，我们可以使用Ajax技术与Redis服务器进行数据交互，以实现异步加载下拉列表的功能。以下是一个简单的示例，展示了如何使用jQuery和Ajax与Redis进行交互。

首先，我们需要一个HTML元素来展示下拉列表和触发加载数据的事件：




<select id="mySelect">
  <option value="">选择一项...</option>
</select>

然后，我们可以使用jQuery和Ajax来异步加载数据：




$(document).ready(function() {
  $('#mySelect').on('change', function() {
    var selectedValue = $(this).val();
    if (selectedValue !== '') {
      $.ajax({
        url: '/get-data', // 你的Redis处理URL
        type: 'GET',
        data: {
          key: selectedValue // 发送到Redis的key
        },
        success: function(data) {
          // 假设返回的是JSON数据
          var options = '';
          $.each(data, function(index, item) {
            options += '<option value="' + item.value + '">' + item.text + '</option>';
          });
          $('#mySelect').append(options); // 将返回的选项追加到下拉列表
        },
        error: function(error) {
          console.log('Error loading data: ', error);
        }
      });
    }
  });
});

在上述代码中，我们监听了下拉列表的change事件，当用户选择一个非初始选项时，我们通过Ajax向服务器发送GET请求，请求的URL是/get-data，并附带了一个key参数。服务器端代码需要处理这个请求，并从Redis中获取相应的数据，然后返回JSON格式的数据。客户端JavaScript代码接收到数据后，将其作为选项追加到下拉列表中。

请注意，服务器端的处理逻辑、Redis的数据格式和具体的API路径等都需要根据实际情况进行调整。

- 阅读更多 -

使用 HTML、CSS 和 JS 的简单倒数计时器

System

2024-08-08

所有,javascript

以下是一个使用HTML、CSS和JavaScript创建简单倒数计时器的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒数计时器</title>
<style>
  body { font-family: Arial, sans-serif; }
  .timer { padding: 10px; background: #f0f0f0; margin-top: 20px; }
  .timer strong { font-size: 200%; }
</style>
</head>
<body>
 
<div class="timer">倒计时结束时间：<strong id="countdown"></strong></div>
 
<script>
// 设置倒计时结束时间（单位：毫秒）
const endTime = new Date('Jan 01, 2023 00:00:00').getTime();
 
// 更新倒计时显示
function updateCountdown() {
  const now = new Date().getTime();
  const distance = endTime - now;
 
  if (distance < 0) {
    clearInterval(intervalId);
    document.getElementById('countdown').innerHTML = '倒计时已经结束';
    return;
  }
 
  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);
 
  document.getElementById('countdown').innerHTML = days + '天 ' + hours + '小时 '
    + minutes + '分 ' + seconds + '秒';
}
 
// 每秒更新倒计时
const intervalId = setInterval(updateCountdown, 1000);
</script>
 
</body>
</html>

这段代码会创建一个简单的倒计时计时器，显示直到2023年1月1日的剩余时间。当倒计时结束时，计时器会清除并显示消息"倒计时已经结束"。这个示例提供了一个基本的倒数计时器实现，并且可以通过调整endTime变量的值来设置不同的结束时间。

- 阅读更多 -

【JS】JS小数乘以100精度丢失

System

2024-08-08

所有,javascript

在JavaScript中，进行小数运算时可能会遇到精度丢失的问题。这是因为JavaScript中的Number类型使用IEEE 754标准，这个标准定义的浮点数算法并不适用于金融计算。

为了解决精度问题，可以使用以下方法：

使用Math.round(), Math.floor(), 或者Math.ceil()方法来四舍五入到指定的小数位数。
使用BigInt来处理大整数，然后手动进行小数点后位数的运算。
使用第三方库，如decimal.js或bignumber.js，这些库提供了更加精确的处理小数运算的方法。

下面是使用BigInt来处理的一个例子：




function multiplyWithPrecision(num1, num2, precision) {
  // 将数字转换为BigInt
  let bigInt1 = BigInt(num1 * 10 ** precision);
  let bigInt2 = BigInt(num2 * 10 ** precision);
  // 乘法
  let result = bigInt1 * bigInt2;
  // 将结果转换回Number类型并返回
  return Number(result) / 10 ** precision;
}
 
let result = multiplyWithPrecision(0.12345, 100, 5); // 6 位精度
console.log(result); // 输出：12.345

在这个例子中，我们定义了一个multiplyWithPrecision函数，它接受三个参数：num1，num2是要进行乘法的数字，precision是要保留的小数位数。我们通过将数字乘以10的精度次幂来转换为BigInt进行运算，然后再将结果除以同样的10的次幂来恢复原来的精度。

System

2024-08-08

所有,javascript

在JavaScript中，函数是一段可以被多次调用执行的代码。函数可以通过多种方式进行声明和使用。以下是一些常见的函数使用方法：

声明函数：




function sum(a, b) {
  return a + b;
}

调用函数：




let result = sum(1, 2); // 结果为3

函数表达式：




let sum = function(a, b) {
  return a + b;
};

匿名函数：




let sum = function(a, b) {
  return a + b;
};

立即执行函数：




(function(a, b) {
  console.log(a + b);
})(1, 2); // 输出3

构造函数：




function Person(name, age) {
  this.name = name;
  this.age = age;
}
 
let person = new Person('Alice', 25);

这些是函数在JavaScript中的基本使用方式。每种方法都有其特定的用途，可以根据场景选择合适的方法来声明和使用函数。

- 阅读更多 -

JS中事件处理机制（秒懂事件委托、事件捕获和事件冒泡）

System

2024-08-08

所有,javascript

在JavaScript中，事件处理机制包含三个阶段：事件捕获、事件目标和事件冒泡。

事件捕获（Capturing）：事件从最外层开始，逐层向内传播，直至目标元素。
事件目标（Target）：事件在目标元素上触发。
事件冒泡（Bubbling）：事件从目标元素开始，向外逐层传播。

事件委托是一种利用事件冒泡，处理多个元素事件的高效方法。事件委托可以将一个事件处理器绑定到一个父元素，而不是为每个子元素单独设置事件处理器。当子元素触发事件时，由于事件冒泡，父元素的事件处理器会被触发，并且可以通过事件的 target 属性来确定是哪个子元素触发了事件。

例子代码：




// 假设有一个父元素ul，它包含多个子列表项li
const ul = document.querySelector('ul');
 
// 事件委托例子
ul.addEventListener('click', function(event) {
  if (event.target && event.target.nodeName === 'LI') {
    // 如果事件目标是li，执行操作
    console.log('List item clicked:', event.target.textContent);
  }
});

在这个例子中，我们为父元素 ul 设置了一个点击事件监听器。当任何子元素 li 被点击时，事件冒泡到 ul，触发这个监听器。监听器函数通过检查 event.target 来判断是否是 li 元素被点击，如果是，则执行相应的操作。这就避免了为每个 li 元素单独设置事件监听器，提高了效率。

System

2024-08-08

所有,javascript

报错解释：

这个错误通常发生在使用Webpack打包JavaScript代码时，并且是由UglifyJs插件引起的。UglifyJs会尝试压缩和 mangle 你的代码，但是它遇到了一个它无法理解的语法 token，也就是这里的 name «currentVer。这通常意味着代码中可能存在一些不兼容的语法，或者变量名/属性名使用了特殊字符导致UglifyJs无法正确解析。

解决方法：

确认你的代码是否使用了ES6或者更高版本的特性，比如模板字符串、解构赋值等，而UglifyJs默认不支持这些特性。你可以通过安装和配置babel-loader来转译这些新特性，以确保兼容性。
检查currentVer是否是一个合法的变量名。确保它不包含非法字符，例如Unicode字符或者特殊符号。
如果你确认代码是正确的，并且确实需要使用UglifyJs不支持的特性，你可以通过配置UglifyJs插件的选项来忽略这个错误，例如设置compress: false或mangle: false，但这会降低代码压缩的效果。
升级UglifyJs插件到最新版本，可能新版本对某些ES6+特性有更好的支持。
如果可能，更换为使用terser-webpack-plugin，因为Terser支持更多的ES6+特性，并且是UglifyJs的替代品。
检查是否有其他的Webpack插件或loader干扰了UglifyJs的工作，如果有，可以尝试排除或更换它们。

在实施任何解决方案之前，请确保备份你的代码和Webpack配置，以防需要回退。

- 阅读更多 -