2024-08-19

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,提供了一种更简洁的方式来处理异步请求和响应。

2024-08-19

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请求,因为它不会阻塞用户界面,提供了更好的用户体验。

2024-08-19

假设我们有一个.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回调函数打印错误信息。

2024-08-19

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

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

HTTP 响应包括以下部分:

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

通过 form 表单构造 HTTP 请求的基本方法是使用 HTML 的 <form> 元素,并指定 methodaction 属性。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 请求,其中请求体包含输入的数据。

2024-08-19

以下是使用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。

2024-08-18

在Flask后端,你可以使用request.get_json()方法来获取通过jQuery AJAX传递的JSON数据。如果你的前端通过POST方法传递了一个多维数组,你可以这样做:




from flask import Flask, request
 
app = Flask(__name__)
 
@app.route('/receive_array', methods=['POST'])
def receive_array():
    # 获取通过jQuery AJAX传递的JSON数据
    received_array = request.get_json(force=True)
    # 假设我们有一个二维数组
    print(received_array)  # 打印接收到的数组
    return 'Success', 200
 
if __name__ == '__main__':
    app.run(debug=True)

前端的jQuery AJAX代码可能看起来像这样:




$(document).ready(function() {
    var multiDimensionalArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
 
    $.ajax({
        url: '/receive_array',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(multiDimensionalArray),
        success: function(response) {
            console.log(response);
        },
        error: function(xhr, status, error) {
            console.error(error);
        }
    });
});

确保你的前端HTML文件包含了jQuery库。

2024-08-18

AJAX跨域通常可以通过CORS(Cross-Origin Resource Sharing,跨域资源共享)来解决。在服务器端设置适当的CORS响应头,例如Access-Control-Allow-Origin,即可允许特定的外部域访问资源。

以下是一个简单的服务器端代码示例,使用Node.js和Express框架设置CORS头部:




const express = require('express');
const app = express();
 
// 设置CORS头部,允许所有源
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
 
app.get('/data', function(req, res) {
  res.json({ message: 'This is CORS-enabled data.' });
});
 
app.listen(3000, function() {
  console.log('CORS-enabled web server listening on port 3000');
});

如果你不能在服务器上设置CORS,那么可以使用JSONP(如果API支持)或者服务器代理的方式来绕过同源策略。

JSONP示例(仅当API支持时有效):




$.ajax({
  url: 'http://example.com/api/data',
  dataType: 'jsonp', // 指定为jsonp类型
  success: function(data) {
    console.log(data);
  }
});

服务器代理示例:




// 客户端发送AJAX请求到自己的服务器
$.ajax({
  url: '/proxy',
  type: 'GET',
  data: { url: 'http://example.com/api/data' },
  success: function(data) {
    console.log(data);
  }
});
 
// 自己的服务器代理请求到目标域
app.get('/proxy', function(req, res) {
  let targetUrl = req.query.url;
  // 使用任何合适的HTTP客户端库来发送请求到目标URL
  // 这里使用request模块作为示例
  request(targetUrl, function(error, response, body) {
    if (!error && response.statusCode == 200) {
      res.send(body);
    } else {
      res.status(500).send('Error fetching data');
    }
  });
});

请注意,服务器代理方法会带来额外的网络请求和处理,可能不适合高负载的应用。而且,服务器代理可能会面临安全风险,如果不正确处理,可能会成为跨站脚本攻击的目标。因此,应该在了解所有风险的情况下使用。

2024-08-18

由于篇幅所限,这里我们只展示如何使用ajax、layui和php创建一个简单的发送吐槽内容的功能。

首先,我们需要一个HTML表单来输入屎话:




<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">屎话</label>
    <div class="layui-input-block">
      <input type="text" name="shit" required lay-verify="required" placeholder="请输入屎话" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">发送</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

然后是JavaScript代码,使用ajax发送数据到后端:




layui.use(['form', 'jquery'], function(){
  var form = layui.form
  ,$ = layui.jquery;
  
  form.on('submit(formDemo)', function(data){
    $.ajax({
      url: 'shit.php', //后端处理程序
      type: 'post',
      data: data.field, //获取表单数据
      dataType: 'JSON', //返回数据格式
      success: function(data){
        //根据返回的数据进行操作
        if(data.status == 1){
          layer.msg(data.msg,{icon:1,time:2000},function(){
            //关闭当前窗口
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
          });
        } else {
          layer.msg(data.msg,{icon:2,time:2000});
        }
      },
      error: function(data){
        layer.msg('发送失败',{icon:2,time:2000});
      },
    });
    return false; //阻止表单自动提交
  });
});

最后是PHP代码,用于接收和处理数据:




<?php
// shit.php
header('Content-Type:application/json;charset=utf-8');
$status = 0;
$msg = '发送失败';
 
if(!empty($_POST['shit'])){
  // 这里可以将屎话内容保存到数据库
  // ...
  
  $status = 1;
  $msg = '发送成功';
}
 
echo json_encode(array('status'=>$status,'msg'=>$msg));
?>

这个简单的例子展示了如何使用ajax、layui和php创建一个简单的发送内容的功能。在实际应用中,你需要添加更多的安全处理,例如防止SQL注入、XSS攻击等。

2024-08-18

以下是一个简化的jQuery Ajax实现来删除图书的例子:

HTML部分:




<ul id="books">
  <li data-id="1">书籍1</li>
  <li data-id="2">书籍2</li>
  <!-- ...更多书籍... -->
</ul>

JavaScript部分(jQuery):




$(document).ready(function() {
  $('#books').on('click', 'li', function() {
    var bookId = $(this).data('id');
    var request = $.ajax({
      url: 'delete_book.php',
      type: 'POST',
      data: { id: bookId }
    });
    
    request.done(function(response, textStatus, jqXHR) {
      if(response.status === 'success') {
        $(this).remove(); // 从列表中移除已删除的书籍
      } else {
        alert('删除失败: ' + response.message);
      }
    });
 
    request.fail(function(jqXHR, textStatus, errorThrown) {
      alert('请求失败: ' + textStatus);
    });
  });
});

PHP部分 (delete_book.php):




<?php
$response = array('status' => 'error', 'message' => '删除失败');
 
if(!empty($_POST['id'])) {
  // 假设有一个删除图书的函数deleteBook()
  if(deleteBook($_POST['id'])) {
    $response['status'] = 'success';
    $response['message'] = '删除成功';
  }
}
 
header('Content-Type: application/json');
echo json_encode($response);
?>

这个例子中,我们为每本书籍添加了一个数据属性data-id,当点击书籍时,会发送一个Ajax请求到delete_book.php,请求会携带要删除的书籍ID。服务器端的delete_book.php脚本会处理删除请求,并返回操作结果。客户端JavaScript会根据返回的状态更新页面。

2024-08-18

在Spring Boot和ECharts进行前后端分离的AJAX交互时,可以使用以下步骤:

  1. 后端(Spring Boot):

    • 创建一个REST控制器,提供一个API接口用于返回图表数据。



@RestController
@RequestMapping("/api/chart")
public class ChartController {
 
    @GetMapping("/data")
    public ResponseEntity<Map<String, Object>> getChartData() {
        // 模拟数据
        Map<String, Object> data = new HashMap<>();
        data.put("xAxis", Arrays.asList("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"));
        data.put("series", Arrays.asList(820, 932, 901, 934, 1290, 1330, 1320));
 
        return ResponseEntity.ok(data);
    }
}
  1. 前端(HTML + JavaScript):

    • 使用JavaScript的XMLHttpRequestfetchAPI来发送AJAX请求从后端获取数据。
    • 使用ECharts的setOption方法来更新图表。



<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts Ajax Example</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 图表容器 -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [],
                type: 'line'
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
 
        // 发送AJAX请求获取数据
        fetch('/api/chart/data')
            .then(response => response.json())
            .then(data => {
                // 使用获取的数据更新图表
                myChart.setOption({
                    xAxis: {
                        data: data.xAxis
                    },
                    series: [{
                        data: data.series
                    }]
                });
            })
            .catch(error => console.error('Error fetching data: ', error));
    </script>
</body>
</html>

在这个例子中,前端页面包含了ECharts的库和一个图表容器。JavaScript 使用 fetch 函数向后端的 /api/chart/data 接口发送请求,获取数据后更新ECharts图表。后端Spring Boot控制器提供了该API接口,返回模拟的数据(实际应用中可以根据需要查询数据库等操作)。