1. 首页
  2. 标签
  3. Javascript
JS Ajax 封装
System
2024-08-17
所有,ajax

以下是一个简单的JavaScript函数，用于封装AJAX请求，并提供了基本的错误处理和数据类型转换功能。




function ajax(url, method, data, callback) {
    // 创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
 
    // 处理请求完成后的函数
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                // 请求成功
                var response = xhr.responseText;
 
                try {
                    response = JSON.parse(response);
                } catch (e) {
                    // 假设响应是文本
                }
 
                callback(null, response);
            } else {
                // 请求失败
                callback(new Error("AJAX request failed"), null);
            }
        }
    };
 
    // 设置请求的URL、方法和数据
    xhr.open(method, url, true);
 
    if (method === "POST") {
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    }
 
    // 发送请求
    xhr.send(data);
}
 
// 使用示例
ajax('https://api.example.com/data', 'GET', null, function(err, response) {
    if (err) {
        console.error(err);
    } else {
        console.log(response);
    }
});

这个封装的ajax函数接受四个参数：url（请求的URL）、method（请求的HTTP方法，如GET或POST）、data（作为请求主体发送的数据）和callback（请求完成时调用的函数）。它会自动处理JSON响应或者将响应文本传递给回调函数。如果请求失败，它将返回一个Error对象。

- 阅读更多 -
【Java】数据交换 Json 和 异步请求 Ajax
System
2024-08-17
所有,ajax

在Java后端处理数据交换，可以使用Jackson库来处理JSON数据，并使用Spring框架的@RestController和@RequestMapping注解来创建RESTful API。对于异步请求，可以使用JavaScript的XMLHttpRequest或现代的fetch API来发送Ajax请求。

以下是一个简单的例子：

Java后端（Spring Boot）:




import org.springframework.web.bind.annotation.*;
 
@RestController
public class DataController {
 
    @GetMapping("/data")
    public MyData getData() {
        // 模拟数据
        MyData data = new MyData();
        data.setId(1);
        data.setName("Sample");
        return data;
    }
 
    @PostMapping("/data")
    public void updateData(@RequestBody MyData newData) {
        // 更新数据逻辑
    }
 
    static class MyData {
        private int id;
        private String name;
 
        // getters and setters
    }
}

JavaScript前端（使用fetch API）:




// 获取数据
fetch('/data')
  .then(response => response.json())
  .then(data => {
    console.log('Received data:', data);
  });
 
// 发送数据
var data = { id: 1, name: 'Sample' };
fetch('/data', {
  method: 'POST', // or 'PUT'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then(response => response.text())
.then(response => console.log(response));

在这个例子中，Java后端定义了两个简单的RESTful API，用于获取（GET）和更新（POST）数据。JavaScript前端使用fetch API来异步发送请求，并处理响应。

- 阅读更多 -
Flask实现ajax交互json数据
System
2024-08-17
所有,ajax

在Flask中实现AJAX交互JSON数据，你可以使用jQuery来简化客户端的代码。以下是一个简单的例子：

首先，设置一个Flask路由来处理AJAX请求并返回JSON数据：




from flask import Flask, request, jsonify
 
app = Flask(__name__)
 
@app.route('/get_data', methods=['POST'])
def get_data():
    # 假设我们需要从前端接收一个名为 'param' 的参数
    param = request.json.get('param')
    # 根据接收到的参数处理数据，并构造返回的数据字典
    response_data = {'message': 'Received param: ' + str(param)}
    return jsonify(response_data)
 
if __name__ == '__main__':
    app.run(debug=True)

然后，使用jQuery发送AJAX请求并处理返回的JSON数据：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX Example</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#ajax_button").click(function(){
                var data = {
                    param: 'example'
                };
                $.ajax({
                    type: 'POST',
                    url: '/get_data',
                    contentType: 'application/json',
                    data: JSON.stringify(data),
                    success: function(response) {
                        console.log(response);
                        // 处理返回的JSON数据
                        $('#result').text(response.message);
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button id="ajax_button">Send AJAX Request</button>
    <div id="result"></div>
</body>
</html>

在这个例子中，当按钮被点击时，它会发送一个AJAX POST请求到/get_data路由，并附带一个名为param的JSON参数。Flask路由会处理这个请求，并返回一个JSON响应。然后，jQuery的success回调函数会处理这个响应，并更新页面上的元素。

- 阅读更多 -
AJAX异步请求&JSON数据格式
System
2024-08-17
所有,ajax

以下是一个使用AJAX发送异步请求并处理JSON响应的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX & JSON Example</title>
    <script>
        function fetchData() {
            var xhr = new XMLHttpRequest(); // 创建一个新的XMLHttpRequest对象
 
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 请求成功完成
                    var jsonResponse = JSON.parse(xhr.responseText);
                    console.log(jsonResponse); // 输出JSON响应到控制台
                    // 这里可以继续处理jsonResponse
                }
            };
 
            xhr.open("GET", "https://api.example.com/data", true); // 设置请求参数
            xhr.send(); // 发送请求
        }
    </script>
</head>
<body>
    <button onclick="fetchData()">Fetch Data</button> <!-- 触发AJAX请求的按钮 -->
</body>
</html>

这段代码中，我们定义了一个名为fetchData的函数，该函数通过创建一个新的XMLHttpRequest对象来发送一个GET请求到指定的URL。请求完成后，如果请求成功（readyState为4且status为200），它会解析响应文本为JSON，并将其输出到控制台。这个例子展示了如何使用AJAX异步获取数据并处理JSON格式的响应。

- 阅读更多 -
04-Json/Ajax/Vue的知识
System
2024-08-17
所有,ajax

在这个问题中，你想要了解如何使用JSON、AJAX和Vue.js来构建一个前端应用。这里有一个简单的例子，展示了如何使用Vue.js来处理从一个API获取的JSON数据。




<!DOCTYPE html>
<html>
<head>
    <title>Vue AJAX JSON Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h2>Vue AJAX JSON Example</h2>
        <ul>
            <li v-for="user in users">{{ user.name }}</li>
        </ul>
    </div>
 
    <script>
        new Vue({
            el: '#app',
            data: {
                users: []
            },
            created() {
                this.fetchData();
            },
            methods: {
                fetchData() {
                    let vm = this;
                    let xhr = new XMLHttpRequest();
                    xhr.open('GET', 'https://jsonplaceholder.typicode.com/users');
                    xhr.onload = function() {
                        if (this.status == 200) {
                            vm.users = JSON.parse(this.responseText);
                        }
                    };
                    xhr.send();
                }
            }
        });
    </script>
</body>
</html>

这段代码使用Vue.js创建了一个简单的应用，在created钩子中，它通过AJAX请求获取了一个用户的JSON数据，并将其解析后赋值给了users数组。然后，在模板中，它使用v-for指令来循环显示每个用户的名字。这是一个非常基础的例子，展示了如何将这些技术结合在一起使用。

- 阅读更多 -
第二十三章 javascript请求方式Ajax
System
2024-08-17
所有,ajax

第二十三章的内容主要是关于Ajax的，Ajax是Asynchronous JavaScript and XML的缩写，意味着可以使用JavaScript异步地从服务器请求数据，而不是整个页面。

以下是一个使用原生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请求到指定的API端点。当请求完成时，它会检查响应状态码，并处理响应数据或错误。

注意：现代的开发中，我们通常会使用更现代的方法，比如Fetch API，它提供了更简洁和更易用的方式来处理Ajax请求。以下是使用Fetch API的一个例子：




fetch('your-api-endpoint')
  .then(function (response) {
    if (response.status >= 200 && response.status < 300) {
      return response.text();
    } else {
      throw new Error('AJAX Request was unsuccessful');
    }
  })
  .then(function (data) {
    console.log(data);
  })
  .catch(function (error) {
    console.error('Request failed:', error);
  });

Fetch API 使用了Promises，使得异步代码更加简洁和容易理解。

- 阅读更多 -
前端JavaScript基础训练系列一百七十五：Promise.wrap(ajax)
System
2024-08-17
所有,ajax

在JavaScript中，我们可以使用Promise来处理异步操作。这种处理方式比传统的回调函数和事件更加清晰和强大。

在这个问题中，我们需要使用Promise.wrap(ajax)来进行异步操作的封装。这里的ajax是一个假设的异步函数，它可能是一个发送HTTP请求的函数。

以下是一个简单的示例，演示如何使用Promise封装一个异步操作（例如发送AJAX请求）：




// 假设的ajax函数，它可能是一个发送HTTP请求的函数
function ajax(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = handler;
    xhr.responseType = "json";
    xhr.setRequestHeader("Accept", "application/json");
 
    xhr.send();
 
    function handler() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    }
  });
}
 
// 使用Promise.wrap封装ajax函数
var wrappedAjax = Promise.wrap(ajax);
 
// 使用wrappedAjax进行请求
wrappedAjax('https://api.example.com/data').then(function(data) {
  console.log(data);
}).catch(function(error) {
  console.error('Error fetching data: ', error);
});

在这个示例中，我们定义了一个ajax函数，它返回一个Promise对象。然后我们使用Promise.wrap来创建一个封装了ajax函数的新函数wrappedAjax。最后，我们调用wrappedAjax并传入URL来发送请求，并在Promise对象中处理结果。

需要注意的是，Promise.wrap是Bluebird库提供的一个方法，它不是所有JavaScript环境的标准部分。如果你正在使用的环境中没有Bluebird库，你可能需要先引入这个库才能使用Promise.wrap。

- 阅读更多 -
JavaScript学习笔记Event事件_js onclick event
System
2024-08-17
所有,javascript

在JavaScript中，我们可以使用事件来处理用户与浏览器的交互。例如，当用户点击页面上的元素时，我们可以触发一个事件来执行一些代码。

在JavaScript中，我们可以使用onclick事件来处理用户的点击动作。

以下是一些使用onclick事件的方法：

方法一：直接在HTML标签中添加事件




<button onclick="alert('Hello, World!')">Click Me!</button>

当用户点击按钮时，会弹出一个带有"Hello, World!"的警告框。

方法二：在JavaScript中添加事件




<button id="myButton">Click Me!</button>
 
<script>
    document.getElementById("myButton").onclick = function() {
        alert("Hello, World!");
    };
</script>

当用户点击按钮时，也会弹出一个带有"Hello, World!"的警告框。

方法三：使用addEventListener()方法添加事件




<button id="myButton">Click Me!</button>
 
<script>
    document.getElementById("myButton").addEventListener("click", function() {
        alert("Hello, World!");
    });
</script>

addEventListener()方法可以为元素添加多个事件处理程序。这意味着，你可以为一个元素添加多个onclick事件，并且它们都将被触发。

以上就是在JavaScript中使用onclick事件的一些方法。

- 阅读更多 -
使用 JS 实现在浏览器控制台打印图片 console.image()
System
2024-08-17
所有,javascript

console.image() 是一个非标准的 Chrome 扩展方法，用于在浏览器的控制台中打印图片。然而，这个方法并不是所有浏览器都支持，因此它不是一个可移植的解决方案。

如果你只是想在开发过程中临时查看图片，你可以使用 console.log() 方法，并在输出中点击图片链接查看。




// 使用 console.log 打印图片链接
console.log('图片链接:', 'https://example.com/image.jpg');

如果你正在使用 Node.js 环境，并且想要在控制台打印图片，你可以使用像 node-canvas 这样的库。




const { createCanvas } = require('canvas');
const canvas = createCanvas(200, 200);
const ctx = canvas.getContext('2d');
 
const image = await loadImage('path/to/image.png'); // 使用 node-canvas 的 loadImage 方法
ctx.drawImage(image, 0, 0, 200, 200);
 
console.log(canvas.toBuffer()); // 打印图片的二进制数据

请注意，在 Node.js 环境中，你需要使用专门的库来处理图片，因为 Node.js 的标准库中并没有提供处理图片的功能。上面的代码示例使用了 node-canvas，这是一个基于 C++ 的 Node.js 模块，可以在 Node.js 环境中绘制图形和处理图片。

- 阅读更多 -
从JS角度直观理解递归的本质
System
2024-08-17
所有,javascript

在JavaScript中，递归是一种非常常见的编程技巧，它允许函数直接或间接地调用自身。要理解递归的本质，我们可以从以下几个方面来看：

  1. 边界条件：递归调用必须有一个明确的退出条件，称为基本情况（base case），否则会进入无限循环。
  2. 递归调用：函数在每次递归调用时都会减小问题规模，向基本情况逼近。
  3. 返回值：递归函数应该在某一点上返回结果，以便函数可以返回那个结果。

以下是一个计算阶乘的递归函数示例：




function factorial(n) {
  // 基本情况
  if (n === 1) {
    return 1;
  }
  // 递归调用
  return n * factorial(n - 1);
}
 
console.log(factorial(5)); // 输出：120

在这个例子中，factorial 函数通过递归调用自己来计算一个数的阶乘。当n减少到1时，递归调用停止，并逐层返回到原始调用的位置，最终返回计算结果。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号