分类前端技术下的文章

2024-08-20

在开始AJAX的学习之前，我们需要先了解一些基本概念。AJAX，全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页的技术。它通过在后台与服务器交换数据，可以实现网页的部分更新，而不需要重新加载整个页面。

以下是一个简单的AJAX示例，演示如何使用JavaScript发送GET请求：




// 创建一个新的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 failed');
    }
  }
};
 
// 发送请求
xhr.send();

在这个例子中，我们首先创建了一个新的XMLHttpRequest对象，然后使用open方法设置了请求的类型、URL 以及是否异步处理（这里设置为true表示异步处理）。接着，我们定义了onreadystatechange事件处理函数来监听请求的不同状态变化。最后，我们调用send方法发送了请求。

这只是AJAX的一个基本示例，实际应用中可能需要处理更复杂的逻辑，比如POST请求、处理JSON响应、错误处理等。

- 阅读更多 -

Vue解决ajax跨域的问题

System

2024-08-20

所有,ajax

在Vue中解决Ajax跨域问题通常有以下几种方法：

CORS（跨源资源共享）：后端设置响应头Access-Control-Allow-Origin允许特定的域访问。
JSONP：只支持GET请求，不支持其他方法。
代理服务器：在开发环境中，可以使用Vue CLI的代理配置，将请求发送到本地服务器，然后由服务器转发到目标URL。
使用后端作为代理，后端发送请求到目标URL，然后将数据返回给前端。

以下是使用Vue CLI代理服务器的示例配置：




// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://target-domain.com', // 目标服务器地址
        changeOrigin: true, // 改变源地址
        pathRewrite: {
          '^/api': '' // 重写路径
        }
      }
    }
  }
}

在前端发送Ajax请求时，URL应该是/api/your-endpoint。




// Vue组件中的Ajax请求
this.axios.get('/api/your-endpoint')
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误
  });

确保你已经安装了axios，如果没有，可以通过npm安装：




npm install axios

在你的Vue组件中引入并使用axios：




import axios from 'axios';
 
export default {
  // ...
  methods: {
    fetchData() {
      axios.get('/api/your-endpoint')
        .then(response => {
          // 处理响应数据
        })
        .catch(error => {
          // 处理错误
        });
    }
  }
}

以上方法均可以解决Vue中的Ajax跨域问题，选择合适的方法根据具体场景使用。

- 阅读更多 -

ajax上传文件

System

2024-08-20

所有,ajax

使用AJAX上传文件，你可以创建一个FormData对象，然后使用XMLHttpRequest或fetch API将文件发送到服务器。以下是使用fetch的示例代码：




// 假设你有一个<input type="file" id="fileInput">元素
const fileInput = document.getElementById('fileInput');
 
// 当文件被选中时
fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0]; // 获取文件引用
  const formData = new FormData(); // 创建FormData对象
  formData.append('file', file); // 将文件添加到FormData对象中
 
  // 使用fetch上传文件
  fetch('/upload-endpoint', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json()) // 如果服务器返回JSON
  .then(data => console.log(data)) // 处理服务器响应
  .catch(error => console.error(error)); // 处理错误
});

确保服务器端的上传端点支持文件上传，并且CORS（跨源资源共享）已正确配置以允许AJAX请求。

- 阅读更多 -

前端学习--Ajax form表单

System

2024-08-20

所有,ajax

在前端学习中，Ajax技术被广泛应用于发送异步请求和处理数据。下面是使用Ajax技术发送表单数据的一个示例：




<!DOCTYPE html>
<html>
<head>
    <title>Ajax Form Submission</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#myForm").submit(function(event){
                event.preventDefault(); // 阻止表单默认提交行为
                var formData = $(this).serialize(); // 序列化表单数据
                $.ajax({
                    type: 'POST',
                    url: 'your_server_endpoint.php', // 替换为你的服务器端点
                    data: formData,
                    success: function(response){
                        console.log(response); // 处理服务器响应
                    },
                    error: function(xhr, status, error){
                        console.error("An error occurred: " + status + "\nError: " + error);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="myForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

在这个示例中，我们使用jQuery库来简化Ajax请求的编写。当表单被提交时，我们使用event.preventDefault()来阻止表单的默认提交行为，然后我们使用$(this).serialize()来序列化表单数据，并通过Ajax异步发送到服务器端点。服务器端需要有相应的处理逻辑来接收和处理这些数据。

请注意，你需要替换your_server_endpoint.php为你的实际服务器端点，并确保服务器端代码能够处理POST请求并响应。

- 阅读更多 -

（前后端交互式）Ajax上传图片 + 更换背景图片

System

2024-08-20

所有,ajax

前端代码：




<!DOCTYPE html>
<html>
<head>
    <title>Change Background Image</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <form id="upload_form" enctype="multipart/form-data">
        <input type="file" name="file" id="file" />
        <input type="button" value="Upload" id="upload"/>
    </form>
    <script>
        $(document).ready(function(){
            $('#upload').click(function(){
                var form_data = new FormData($('#upload_form')[0]);
                $.ajax({
                    type:'POST',
                    url:'upload.php',
                    data:form_data,
                    contentType: false,
                    cache: false,
                    processData: false,
                    success:function(data){
                        alert(data);
                        $('body').css("background-image", "url('"+data+"')");
                    }
                });
            });
        });
    </script>
</body>
</html>

后端代码（PHP）：




<?php
if(isset($_FILES['file'])){
    $file = $_FILES['file'];
    $fileName = $_FILES['file']['name'];
    $fileTmpName = $_FILES['file']['tmp_name'];
    move_uploaded_file($fileTmpName, "uploads/".$fileName);
    echo "uploads/".$fileName;
}
?>

确保服务器配置正确，允许通过PHP上传文件，并且有写入权限。上面的代码实现了通过Ajax上传图片到服务器，并且在成功上传后更换了页面背景图片。

- 阅读更多 -

Spark-Scala语言实战

System

2024-08-20

所有,ajax




import org.apache.spark.{SparkConf, SparkContext}
 
object WordCount {
  def main(args: Array[String]): Unit = {
    // 初始化Spark配置
    val conf = new SparkConf().setAppName("WordCount").setMaster("local")
    // 创建Spark上下文
    val sc = new SparkContext(conf)
 
    // 读取输入文件
    val input = args(0)
    // 读取文件内容并分割成单词
    val words = sc.textFile(input).flatMap(_.split("\\s+"))
    // 将单词映射为(word, 1)对并进行统计
    val wordCounts = words.map((_, 1)).reduceByKey(_ + _)
    // 将结果保存到输出文件
    val output = args(1)
    wordCounts.saveAsTextFile(output)
 
    // 停止Spark上下文
    sc.stop()
  }
}

这段代码使用Spark的Scala API实现了一个简单的词频统计程序。它读取一个文本文件，并统计每个单词出现的次数，然后将结果保存到另一个文件中。这个例子展示了如何在Spark中使用Scala进行基本的数据处理操作。

System

2024-08-20

所有,ajax




// 引入axios库
import axios from 'axios';
 
// 创建axios实例，并配置基础URL
const instance = axios.create({
  baseURL: 'https://api.example.com'
});
 
// 发送请求并处理响应
instance.get('/endpoint', {
  params: { // 请求参数
    key1: 'value1',
    key2: 'value2'
  }
})
.then(response => {
  // 请求成功处理
  console.log('Response:', response.data);
})
.catch(error => {
  // 请求失败处理
  console.error('Error:', error);
});

这段代码展示了如何使用axios库创建一个实例并设置基础URL，然后发送一个GET请求到指定的接口，并附带查询参数。成功获取响应后，它会在控制台输出响应数据，如果请求失败，它会输出错误信息。这是学习如何使用axios进行基本的HTTP请求的一个很好的起点。

- 阅读更多 -

爬取头条热榜通过分析Ajax

System

2024-08-20

所有,ajax

要爬取头条热榜数据，通常需要分析网页请求，找到数据加载的Ajax接口，并模拟请求获取数据。以下是一个使用Python和requests库的示例代码：




import requests
import json
 
# 热榜接口URL
url = 'https://www.toutiao.com/api/article/topics/?offset=0&format=json&keyword=%E9%A2%98%E8%A7%86%E9%A2%98&autoload=true&count=15&cur_tab=1&from=timeline_hot'
 
# 设置请求头，模拟浏览器访问
headers = {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3',
    'Referer': 'https://www.toutiao.com/hotwords/'
}
 
# 发送请求
response = requests.get(url, headers=headers)
 
# 确保请求成功
if response.status_code == 200:
    # 解析JSON数据
    data = json.loads(response.text)
    print(data)
    # 进一步处理数据，例如存储或分析
 
else:
    print('请求失败')

注意：

请求头中的User-Agent和Referer应根据实际情况设置，以模拟真实的浏览器请求。
热榜数据的URL可能会随时间变化，需要根据实际情况进行调整。
该代码只是一个简单的示例，实际应用中可能需要处理更多的反爬策略，例如需要处理Cookies、Session、代理、登录等。

- 阅读更多 -

使用jQuery的Ajax方法来发送请求并获取响应头信息

System

2024-08-20

所有,ajax




// 使用jQuery发送Ajax请求并获取响应头信息
$.ajax({
    url: 'https://example.com', // 替换为你想请求的URL
    type: 'HEAD', // 发送HEAD请求以获取响应头信息
    success: function(data, textStatus, request) {
        // 请求成功后的回调函数
        var contentType = request.getResponseHeader('Content-Type');
        console.log('Content-Type:', contentType);
        // 你可以在这里获取到其他想要的响应头信息
    },
    error: function(xhr, textStatus, errorThrown) {
        // 请求失败后的回调函数
        console.error('Error:', textStatus);
    }
});

这段代码使用jQuery的$.ajax()方法发送一个HEAD请求到指定的URL。成功获取响应后，它会通过getResponseHeader()函数获取Content-Type响应头，并在控制台中打印出来。如果请求失败，它会在控制台中打印错误信息。

System

2024-08-20

所有,ajax

在Flask后端设置跨域访问的响应头，可以通过CORS来实现。首先，需要安装Flask-CORS扩展。




pip install flask-cors

然后，在Flask应用中配置CORS。




from flask import Flask
from flask_cors import CORS
 
app = Flask(__name__)
CORS(app, resources=r'/*')
 
@app.route('/')
def index():
    return "Hello, cross-origin-world!"
 
if __name__ == '__main__':
    app.run(debug=True)

在这个例子中，我们使用了CORS(app, resources=r'/*')来允许所有的跨域请求。在实际部署时，可以更加具体地指定允许跨域的资源路径或来源。

在Ajax页面中，你可以使用jQuery发送Ajax请求，并在成功获取响应后执行相应的操作。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cross-Origin Example</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <script>
        $(document).ready(function() {
            $.ajax({
                url: 'http://localhost:5000/',
                type: 'GET',
                success: function(response) {
                    $('#content').append('<p>' + response + '</p>');
                }
            });
        });
    </script>
</body>
</html>

在这个例子中，我们使用jQuery的$.ajax方法向http://localhost:5000/发送GET请求，并在成功获取响应后将其追加到页面的<div id="content"></div>元素中。

请注意，Ajax页面和Flask应用需要运行在不同的端口上，以便跨域请求生效。

- 阅读更多 -