标签 ajax 下的文章

2024-08-23

AJAX（Asynchronous JavaScript and XML）是一种创建交互式网页的技术，可以使网页的更新不需要重新加载整个页面。它使用JavaScript、XML和服务器的异步请求来实现这一点。

AJAX请求通常使用XMLHttpRequest对象或现代的fetchAPI来完成。

以下是使用XMLHttpRequest发送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();

使用fetchAPI的示例代码：




// 发送 GET 请求
fetch('your-api-endpoint')
  .then(response => {
    if (response.ok) {
      // 处理请求成功的响应数据
      return response.text();
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

这两种方式都可以发送AJAX请求，fetchAPI 是现代的方法，它提供了更好的异步处理和更简洁的语法。

System

2024-08-23

所有,ajax

AJAX是一种在无需重新加载整个网页的情况下，更新网页部分内容的技术。以下是使用原生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 failed');
    }
  }
};
 
// 发送请求
xhr.send();

在这段代码中，我们首先创建了一个新的XMLHttpRequest对象，然后使用open方法设置了请求的类型、URL 以及是否异步处理（设置为true以进行异步请求）。接着，我们定义了onreadystatechange事件处理函数，该函数会在XMLHttpRequest对象的readyState变化时被调用。当请求完成并且响应状态码为 200 时，我们处理响应数据。最后，我们调用send方法发送请求。

System

2024-08-23

所有,ajax

以下是使用Node.js, Express, jQuery, Ajax, MySQL, 以及 Bootstrap Select 创建省-市-县三级联动下拉菜单的基本示例代码。

首先，确保你已经安装了Node.js和MySQL。

安装Express和MySQL连接器：




npm install express mysql

创建一个简单的Express服务器，并设置路由以处理Ajax请求：




const express = require('express');
const mysql = require('mysql');
const app = express();
 
// 连接MySQL数据库
const connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'your_username',
  password : 'your_password',
  database : 'your_database'
});
 
connection.connect();
 
// 省市县的Ajax接口
app.get('/api/provinces', (req, res) => {
  connection.query('SELECT * FROM provinces', (error, results) => {
    if (error) throw error;
    res.json(results);
  });
});
 
app.get('/api/cities/:provinceId', (req, res) => {
  const provinceId = req.params.provinceId;
  connection.query('SELECT * FROM cities WHERE provinceId = ?', [provinceId], (error, results) => {
    if (error) throw error;
    res.json(results);
  });
});
 
app.get('/api/districts/:cityId', (req, res) => {
  const cityId = req.params.cityId;
  connection.query('SELECT * FROM districts WHERE cityId = ?', [cityId], (error, results) => {
    if (error) throw error;
    res.json(results);
  });
});
 
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

创建数据库表：




CREATE TABLE provinces (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255) NOT NULL
);
 
CREATE TABLE cities (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  provinceId INT,
  FOREIGN KEY (provinceId) REFERENCES provinces(id)
);
 
CREATE TABLE districts (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  cityId INT,
  FOREIGN KEY (cityId) REFERENCES cities(id)
);

创建HTML页面，并使用jQuery和Ajax加载省市县数据，并使用Bootstrap Select插件显示下拉菜单：




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>三级联动下拉菜单</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstra

- 阅读更多 -

【Ajax】笔记-服务端响应JSON数据

System

2024-08-23

所有,ajax




// 假设我们已经有了一个Express应用程序和必要的Express和body-parser中间件设置
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
 
// 使用body-parser中间件解析JSON数据
app.use(bodyParser.json());
 
// 定义一个简单的路由处理函数，返回JSON数据
app.post('/submit-data', function(req, res) {
    // 假设我们需要处理的数据在请求体中
    var data = req.body;
    
    // 对数据进行处理，例如存储到数据库中
    // ...
 
    // 返回JSON响应
    res.json({ status: 'success', message: '数据已接收' });
});
 
// 启动服务器
app.listen(3000, function() {
    console.log('服务器运行在 http://localhost:3000/');
});

这段代码演示了如何在Express应用程序中接收通过Ajax提交的JSON数据，处理这些数据，并返回一个JSON响应。这是一个典型的在服务器端处理Ajax请求的流程。

- 阅读更多 -

nodejs利用ajax实现网页无刷新上传图片

System

2024-08-23

所有,ajax

在Node.js中，您可以使用Express框架搭建一个简单的服务器，并结合multer中间件来处理文件上传。以下是实现文件上传的后端代码示例：




const express = require('express');
const multer = require('multer');
const app = express();
 
// 设置静态文件目录
app.use(express.static('public'));
 
// 配置上传文件的存储位置和字段名
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/') // 确保这个文件夹已经存在
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
})
const upload = multer({ storage: storage })
 
// 处理文件上传的路由
app.post('/upload', upload.single('image'), (req, res) => {
  const file = req.file;
  if (!file) {
    return res.status(400).send('No file uploaded.');
  }
  res.send('File uploaded successfully: ' + file.originalname);
});
 
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

前端的AJAX代码可以使用jQuery的$.ajax方法：




$('#upload-form').submit(function (e) {
  e.preventDefault();
  var formData = new FormData($(this)[0]);
  $.ajax({
    url: '/upload',
    type: 'POST',
    data: formData,
    contentType: false,
    processData: false,
    success: function (data) {
      alert(data);
    },
    error: function () {
      alert('Error uploading file.');
    }
  });
});

确保在HTML中有一个表单来上传文件，例如：




<form id="upload-form" action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="image" />
  <button type="submit">Upload</button>
</form>

请确保您已经安装了express和multer包，并且您的服务器端口没有被占用。




npm install express multer

启动服务器后，当您提交表单时，图片将通过AJAX上传到服务器，无需刷新页面。

- 阅读更多 -

Javaweb 学习---ajax应用（获取单选框，复选框的值）

System

2024-08-23

所有,ajax

在JavaWeb项目中使用AJAX获取单选框和复选框的值，可以通过JavaScript或者JQuery来实现。以下是使用JQuery实现的示例代码：

HTML部分：




<form id="myForm">
    <input type="radio" name="gender" value="male"> 男
    <input type="radio" name="gender" value="female"> 女
    <br>
    <input type="checkbox" name="interest" value="sports"> 运动
    <input type="checkbox" name="interest" value="music"> 音乐
    <input type="checkbox" name="interest" value="books"> 书籍
    <br>
    <button type="button" id="submitBtn">提交</button>
</form>
 
<div id="result"></div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

JavaScript/JQuery部分：




$(document).ready(function() {
    $('#submitBtn').click(function() {
        var gender = $('input[name="gender"]:checked').val();
        var interests = [];
        $('input[name="interest"]:checked').each(function() {
            interests.push($(this).val());
        });
 
        var data = {
            gender: gender,
            interests: interests
        };
 
        $.ajax({
            url: 'submitForm', // 假设有一个名为submitForm的服务器端处理URL
            type: 'POST',
            data: data,
            success: function(response) {
                $('#result').html(response);
            },
            error: function() {
                alert('Error occurred');
            }
        });
    });
});

在上述代码中，我们定义了一个简单的表单，包含单选框和复选框。当用户点击提交按钮时，我们使用JQuery获取选中的单选框和复选框的值，并通过AJAX的POST请求发送到服务器端处理（这里假设为'submitForm'）。服务器端接收数据后进行相应的处理，并可以返回响应。响应会被回调函数中的success属性处理，并更新到页面的#result元素中。

请确保服务器端有相应的处理URL（例如'submitForm'），并正确处理AJAX请求。

- 阅读更多 -

【ES6】掌握Promise和利用Promise封装ajax

System

2024-08-23

所有,ajax




// 封装一个基于Promise的ajax请求函数
function fetchData(url, options = {}) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(options.method || 'GET', url);
 
    // 设置请求头
    if (options.headers) {
      Object.keys(options.headers).forEach(key => {
        xhr.setRequestHeader(key, options.headers[key]);
      });
    }
 
    // 发送请求
    xhr.send(options.body);
 
    // 监听状态变化
    xhr.onreadystatechange = () => {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
          // 请求成功
          resolve(JSON.parse(xhr.responseText));
        } else {
          // 请求失败
          reject(new Error(`Error: ${xhr.status}`));
        }
      }
    };
  });
}
 
// 使用封装好的函数发送GET请求
fetchData('https://api.example.com/data')
  .then(data => console.log(data))
  .catch(error => console.error(error));
 
// 使用封装好的函数发送POST请求
fetchData('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(data => console.log(data))
  .catch(error => console.error(error));

这段代码定义了一个名为fetchData的函数，它接受一个URL和一个选项对象作为参数。这个函数返回一个Promise，它在请求完成时通过resolve调用，在请求失败时通过reject调用。这个封装可以用来发送GET和POST请求，并且可以很容易地处理HTTP响应。

- 阅读更多 -

VUE+AJAX+AARDIO架构的后端设计

System

2024-08-23

所有,ajax




// 假设我们有一个Vue组件需要通过AJAX请求获取数据并使用aardio播放音频
<template>
  <div>
    <button @click="playSound">播放声音</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      soundUrl: ''
    };
  },
  methods: {
    playSound() {
      // 发起AJAX请求获取音频文件的URL
      axios.get('/api/sound-url').then(response => {
        this.soundUrl = response.data.url;
        // 使用aardio播放获取到的音频文件
        aardio.send('playSound', this.soundUrl);
      }).catch(error => {
        console.error('获取音频URL失败:', error);
      });
    }
  }
};
</script>

在这个例子中，我们假设有一个名为aardio的全局变量，它提供了一个send方法来发送命令到aardio进程。当用户点击按钮时，Vue组件会发起一个AJAX请求以获取音频文件的URL，然后使用aardio播放这个文件。注意，这个例子假定aardio库和相关的后端API已经正确配置并且可用。

- 阅读更多 -

前后端交互服务器概念与初识Ajax

System

2024-08-23

所有,ajax

在前后端交互的过程中，Ajax（Asynchronous JavaScript and XML）是一种非常重要的技术。Ajax 能够使得页面在不进行全部刷新的情况下与服务器进行数据交换，从而提升用户体验。

以下是使用Ajax进行前后端交互的一些方法：

原生 JavaScript 的 XMLHttpRequest 对象：




var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/api", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

使用 jQuery 的 $.ajax 方法：




$.ajax({
  url: "http://example.com/api",
  type: "GET",
  success: function (response) {
    console.log(response);
  },
  error: function (xhr, status, error) {
    console.log("An error occurred: " + status + "\nError: " + error);
  }
});

使用 jQuery 的 $.get 方法：




$.get("http://example.com/api", function (data) {
  console.log(data);
}).fail(function (xhr, status, error) {
  console.log("An error occurred: " + status + "\nError: " + error);
});

使用 fetch API：




fetch("http://example.com/api")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log("An error occurred: " + error.message));

以上都是使用Ajax与服务器进行交互的方法，你可以根据项目需求和个人喜好选择合适的方法。在实际开发中，Ajax 经常被用来处理前端与服务器的数据交换，提升用户体验。

- 阅读更多 -

AJAX学习笔记9 搜索联想自动补全

System

2024-08-23

所有,ajax




// 假设我们有一个输入框和一个用于显示建议的列表
<input type="text" id="search-input" onkeyup="autocomplete()" placeholder="输入关键字" />
<ul id="autocomplete-list"></ul>
 
// 这是处理输入字段的keyup事件的函数
function autocomplete() {
  var input = document.getElementById('search-input');
  var list = document.getElementById('autocomplete-list');
  if (input.value.length > 0) {
    // 发送AJAX请求获取建议列表
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功，处理返回的建议列表
        var suggestions = JSON.parse(xhr.responseText);
        // 清空现有列表项
        while (list.firstChild) {
          list.removeChild(list.firstChild);
        }
        // 创建并添加新的列表项
        for (var i = 0; i < suggestions.length; i++) {
          var suggestion = suggestions[i];
          var li = document.createElement('li');
          li.textContent = suggestion;
          li.onclick = function() {
            input.value = this.textContent;
          };
          list.appendChild(li);
        }
      }
    };
    xhr.open('GET', '/autocomplete?term=' + encodeURIComponent(input.value), true);
    xhr.send();
  } else {
    // 清空列表
    while (list.firstChild) {
      list.removeChild(list.firstChild);
    }
  }
}

这个简化的代码示例展示了如何实现一个基本的搜索联想自动补全功能。它使用了AJAX请求来获取建议列表，并在用户输入字段中更新列表项。这个例子假设服务器端有一个可以响应GET请求的接口，并且返回JSON格式的建议列表。

- 阅读更多 -