标签 ajax 下的文章

2024-08-19

在jQuery中，使用Ajax发送请求主要有以下四种方式：

$.ajax(): 这是jQuery中Ajax最基本的方法，它提供了大量的选项来对Ajax请求进行精细的控制。




$.ajax({
    url: 'your-url',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log(data);
    },
    error: function(error) {
        console.log('Error: ' + error);
    }
});

$.get(): 这是一个简写的$.ajax()方法，专门用于发送GET请求。




$.get('your-url', function(data) {
    console.log(data);
}).fail(function(error) {
    console.log('Error: ' + error);
});

$.post(): 这是一个简写的$.ajax()方法，专门用于发送POST请求。




$.post('your-url', {key1: 'value1', key2: 'value2'}, function(data) {
    console.log(data);
}).fail(function(error) {
    console.log('Error: ' + error);
});

$.getJSON(): 这是一个简写的$.ajax()方法，专门用于发送GET请求，并期望返回JSON数据。




$.getJSON('your-url', function(data) {
    console.log(data);
}).fail(function(error) {
    console.log('Error: ' + error);
});

以上代码中，your-url是你要请求的服务器地址，data是服务器返回的数据，error是可能出现的错误信息。每个方法都返回一个jqXHR对象，它可以用来处理异步请求的状态。

- 阅读更多 -

AJAX——案例_天气预报

System

2024-08-19

所有,ajax

以下是一个简单的使用AJAX获取天气预报信息的示例代码。这个例子假设你已经有了一个API密钥，并且你知道城市的ID。




<!DOCTYPE html>
<html>
<head>
    <title>天气预报</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<div id="weather-info">等待获取天气信息...</div>
 
<script>
$(document).ready(function() {
    var apiKey = 'YOUR_API_KEY'; // 替换为你的API密钥
    var cityId = 'YOUR_CITY_ID'; // 替换为你想要的城市ID
 
    $.ajax({
        url: `https://api.openweathermap.org/data/2.5/weather?id=${cityId}&appid=${apiKey}&units=metric`,
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            var weatherInfo = `
                城市: ${data.name}<br>
                温度: ${data.main.temp}°C<br>
                气压: ${data.main.pressure}hPa<br>
                湿度: ${data.main.humidity}%<br>
                天气: ${data.weather[0].description}<br>
                风速: ${data.wind.speed}m/s
            `;
            $('#weather-info').html(weatherInfo);
        },
        error: function(xhr, status, error) {
            var errorMsg = `出错了 - ${status}: ${error}`;
            $('#weather-info').html(errorMsg);
        }
    });
});
</script>
 
</body>
</html>

在这个例子中，我们使用jQuery库来简化AJAX请求的编写。我们首先设置了API密钥和城市ID，然后通过AJAX向OpenWeatherMap的API发送GET请求，获取相应城市的天气信息。成功获取信息后，我们将其格式化并展示在页面上。如果请求失败，我们将错误信息展示出来。

请注意，你需要替换YOUR_API_KEY和YOUR_CITY_ID为你自己的API密钥和城市ID。此外，你还需要确保你的网页可以访问到https://api.openweathermap.org。

- 阅读更多 -

Vue-Ajax核心知识整理

System

2024-08-19

所有,ajax

在Vue中，Ajax通常是通过第三方库如Axios来实现的。以下是一个简单的例子，展示如何在Vue组件中使用Axios发送GET请求并处理响应：

首先，安装Axios：




npm install axios

在Vue组件中引入Axios并使用：




<template>
  <div>
    <h1>User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      users: []
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      axios.get('https://jsonplaceholder.typicode.com/users')
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    }
  }
};
</script>

在这个例子中，我们在组件被创建时（created() 生命周期钩子）通过fetchUsers()方法发送一个GET请求到模拟的JSON API。请求成功后，我们将返回的用户数据存储在组件的users数据属性中，然后可以在模板中遍历并展示这些数据。如果请求失败，我们会在控制台记录错误。

- 阅读更多 -

JavaWeb进阶案例-实现AJAX+Sevlet前后端分离开发

System

2024-08-19

所有,ajax

以下是一个简化的示例，展示了如何使用AJAX和Servlet实现前后端分离的登录功能：

前端HTML和JavaScript代码（假设使用jQuery库）:




<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#loginForm").submit(function(event){
                event.preventDefault(); // 阻止表单默认提交行为
                var username = $("#username").val();
                var password = $("#password").val();
 
                $.ajax({
                    url: "login", // 对应的Servlet URL
                    type: "POST",
                    data: { username: username, password: password },
                    success: function(response){
                        if(response === "success"){
                            alert("登录成功！");
                            // 登录成功后的操作，例如跳转页面
                        } else {
                            alert("登录失败，请检查用户名和密码！");
                        }
                    },
                    error: function(){
                        alert("登录失败，请检查网络连接！");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="loginForm">
        用户名: <input type="text" id="username" name="username"><br>
        密码: <input type="password" id="password" name="password"><br>
        <input type="submit" value="登录">
    </form>
</body>
</html>

后端Servlet代码 (LoginServlet.java):




import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
 
public class LoginServlet extends HttpServlet {
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
 
        // 这里只是示例，实际开发中应该查询数据库验证用户名和密码
        if("admin".equals(username) && "password".equals(password)){
            response.getWriter().write("success");
        } else {
            response.getWriter().write("fail");
        }
    }
}

在这个例子中，前端使用AJAX技术向后端的LoginServlet发送登录请求，Servlet处理完后返回操作结果。前端JavaScript根据返回结果显示相应的提示信息。这样的实现方式提高了用户体验，同时也使得前后端的开发可以同时进行，实现了真正的前后端分离。

- 阅读更多 -

上班签到小项目(nodejs,express,ajax)

System

2024-08-19

所有,ajax

以下是一个使用Node.js, Express, 和 AJAX 创建简单的上班签到系统的核心代码示例。

服务器端代码 (Node.js + Express):




const express = require('express');
const app = express();
const port = 3000;
 
// 模拟数据库
const signInRecords = {};
 
app.use(express.static('public')); // 设置静态文件目录
 
// 签到接口
app.get('/signin', (req, res) => {
  const id = req.query.id;
  const timestamp = new Date().toLocaleString();
  signInRecords[id] = timestamp;
  res.send(`${id} 已签到，时间：${timestamp}`);
});
 
// 查询签到记录接口
app.get('/signin-records', (req, res) => {
  res.send(signInRecords);
});
 
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

客户端代码 (HTML + AJAX):




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>上班签到系统</title>
  <script>
    function signIn() {
      const id = document.getElementById('idInput').value;
      fetch('/signin?id=' + id)
        .then(response => response.text())
        .then(data => {
          alert(data);
        });
    }
 
    function viewSignInRecords() {
      fetch('/signin-records')
        .then(response => response.json())
        .then(data => {
          let records = '';
          for (let id in data) {
            records += `<p>${id}: ${data[id]}</p>`;
          }
          document.getElementById('records').innerHTML = records;
        });
    }
  </script>
</head>
<body>
  <h1>上班签到</h1>
  <input type="text" id="idInput" placeholder="请输入员工ID">
  <button onclick="signIn()">签到</button>
  <button onclick="viewSignInRecords()">查看签到记录</button>
  <div id="records"></div>
</body>
</html>

在这个例子中，我们创建了一个简单的上班签到系统。员工通过输入ID并点击签到按钮来签到。签到信息将通过AJAX请求发送到服务器，服务器端记录签到时间并响应客户端。查看签到记录按钮会通过AJAX请求从服务器获取并显示所有签到记录。

注意：这个示例仅用于教学目的，不包含完整的错误处理和生产环境要求的安全措施。在实际环境中，你需要考虑更多的安全性问题，例如参数验证、数据库操作、HTTPS 支持等。

- 阅读更多 -

AJAX 入门

System

2024-08-19

所有,ajax

AJAX 是 Asynchronous JavaScript and XML 的缩写，它是一种创建交互式网页的技术。AJAX 可以让你在不重新加载整个网页的情况下更新网页的部分内容。

以下是一个简单的 AJAX 请求示例，使用 JavaScript 的 XMLHttpRequest 对象：




// 创建一个新的 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();

这段代码创建了一个 AJAX 请求，通过 GET 方法从 'your-api-endpoint' 获取数据。当请求完成时，它会检查响应状态，如果成功，它会在控制台中输出响应文本。

现代浏览器中，你也可以使用 fetch API 来执行 AJAX 请求，这是一个更现代、更简洁的 API：




fetch('your-api-endpoint')
  .then(response => {
    if (response.ok) {
      return response.text();
    }
    throw new Error('Network response was not ok.');
  })
  .then(text => {
    console.log(text);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

fetch API 使用了 Promise，提供了一种更简洁的方式来处理异步请求和响应。

- 阅读更多 -

用代码详细解析AJAX同步和异步

System

2024-08-19

所有,ajax

AJAX请求可以是同步的或者异步的。在JavaScript中，AJAX通常使用XMLHttpRequest对象来实现。

异步AJAX请求




var xhr = new XMLHttpRequest();
xhr.open('GET', 'your-api-endpoint', true); // 第三个参数为true表示异步
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功
    var response = xhr.responseText;
    // 处理响应数据
  }
};
xhr.send();

同步AJAX请求




var xhr = new XMLHttpRequest();
xhr.open('GET', 'your-api-endpoint', false); // 第三个参数为false表示同步
xhr.send();
if (xhr.status === 200) {
  // 请求成功
  var response = xhr.responseText;
  // 处理响应数据
}

在异步AJAX请求中，open方法的第三个参数为true，表示请求是非阻塞的。控制权在发送请求后立即返回给浏览器，用户可以继续与页面交互而不需要等待响应。当响应就绪时，onreadystatechange事件处理函数会被调用。

在同步AJAX请求中，open方法的第三个参数为false，表示请求是阻塞的。在发送请求到收到响应这段时间内，浏览器会挂起并不会执行其他任何的行为。这意味着在同步模式下，AJAX请求期间，用户不能进行任何操作，页面会出现冻结状态。

在现代的开发实践中，通常推荐使用异步AJAX请求，因为它不会阻塞用户界面，提供了更好的用户体验。

System

2024-08-19

所有,ajax

假设我们有一个.Net Core Web API的控制器，它处理来自Ajax请求的HTTP GET请求，以下是一个简单的例子：

首先，在.Net Core Web API中创建一个控制器：




using Microsoft.AspNetCore.Mvc;
 
namespace ExampleWebApi.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ValuesController : ControllerBase
    {
        // GET api/values/
        [HttpGet]
        public ActionResult Get(int id)
        {
            // 逻辑处理...
            return Ok(new { Message = $"Value received: {id}" });
        }
    }
}

然后，在客户端使用Ajax发送请求：




<!DOCTYPE html>
<html>
<head>
    <title>Ajax Request Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btnSendRequest").click(function(){
                $.ajax({
                    type: "GET",
                    url: "/api/values/",
                    data: { id: 5 },
                    success: function(data){
                        alert(data.Message);
                    },
                    error: function(jqXHR, textStatus, errorThrown){
                        console.log('Error: ' + textStatus);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button id="btnSendRequest">Send Request</button>
</body>
</html>

在这个例子中，当用户点击按钮时，Ajax会向"/api/values/"发送一个GET请求，并带有一个名为"id"的参数，其值为5。服务器响应请求，并通过Ajax的success回调函数在浏览器中显示消息。如果请求失败，将通过error回调函数打印错误信息。

System

2024-08-19

所有,ajax

HTTP (Hypertext Transfer Protocol) 是一个用于分布式、协作式和超媒体信息系统的应用层协议。HTTP 请求和响应消息通过一个单个 TCP 连接发送，包括以下部分：

请求行 - 包含请求方法、请求 URL 和 HTTP 版本。
请求头 - 包含一系列键值对，说明服务器要使用的额外信息。
空行 - 请求头部结束的标志。
请求体 - 包含要发送给服务器的数据。

HTTP 响应包括以下部分：

状态行 - 包含 HTTP 版本、状态码和状态信息。
响应头 - 包含服务器返回的额外信息的键值对。
空行 - 响应头部结束的标志。
响应体 - 包含服务器返回的数据。

通过 form 表单构造 HTTP 请求的基本方法是使用 HTML 的 <form> 元素，并指定 method 和 action 属性。method 属性指定 HTTP 方法（如 GET 或 POST），而 action 属性指定接收请求的服务器的 URL。

以下是一个简单的 HTML 表单示例，它使用 GET 方法向服务器发送请求：




<!DOCTYPE html>
<html>
<head>
    <title>Simple Form</title>
</head>
<body>
    <form action="https://example.com/submit" method="get">
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname"><br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

在这个例子中，当用户填写表单并点击 "Submit" 按钮时，浏览器会构造一个 HTTP GET 请求，其 URL 可能类似于 https://example.com/submit?fname=John&lname=Doe。

如果表单使用 POST 方法，则输入的数据会放在 HTTP 请求体中，而不是 URL 中，这是一种更适合发送大量数据的方式。

以下是一个使用 POST 方法的表单示例：




<form action="https://example.com/submit" method="post">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname"><br><br>
    <input type="submit" value="Submit">
</form>

当用户提交表单时，浏览器会构造一个 HTTP POST 请求，其中请求体包含输入的数据。

- 阅读更多 -

node.js作为后端发布接口，前端使用ajax访问，简单应用示例

System

2024-08-19

所有,ajax

以下是使用Node.js作为后端发布API接口，并且前端使用AJAX访问的简单示例。

Node.js后端代码（server.js）:




const express = require('express');
const app = express();
const port = 3000;
 
app.get('/api/data', (req, res) => {
  const response = {
    message: 'Success!',
    data: {
      id: 1,
      name: 'Sample Data'
    }
  };
  res.json(response); // 返回JSON响应
});
 
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

确保你已经安装了Express：




npm install express

前端HTML和JavaScript代码:




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX Example</title>
  <script>
    function fetchData() {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', 'http://localhost:3000/api/data', true);
      xhr.onload = function() {
        if (this.status == 200) {
          const response = JSON.parse(xhr.responseText);
          document.getElementById('data').textContent = JSON.stringify(response, null, 2);
        }
      };
      xhr.send();
    }
  </script>
</head>
<body>
  <button onclick="fetchData()">Fetch Data</button>
  <pre id="data"></pre>
</body>
</html>

确保你的Node.js服务器正在运行，然后打开这个HTML文件，点击按钮 "Fetch Data" 来通过AJAX请求后端API。

- 阅读更多 -