标签 ajax 下的文章

2024-08-16

Ajax请求的基本原理是使用JavaScript向服务器发送异步请求，然后服务器响应并返回数据，这一过程不会导致整个页面的刷新。数据抓取通常指的是在不违反服务器端同源策略（Same-origin policy）的前提下，使用JavaScript代码获取并处理从Ajax请求获得的数据。

以下是一个使用原生JavaScript进行Ajax请求并抓取数据的示例：




// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'https://api.example.com/data', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 获取服务器返回的数据
      var data = xhr.responseText;
 
      try {
        // 尝试将获取到的数据转换为JSON对象
        var jsonData = JSON.parse(data);
 
        // 处理JSON数据
        console.log(jsonData);
      } catch (e) {
        // 处理错误情况
        console.error('Parsing data error:', e);
      }
    } else {
      // 处理HTTP错误情况
      console.error('HTTP error', xhr.status);
    }
  }
};
 
// 发送请求
xhr.send();

在这个示例中，我们创建了一个新的XMLHttpRequest对象，并设置了请求的类型、URL 以及是否异步处理。然后，我们定义了一个回调函数onreadystatechange来监听请求的不同状态变化，并在请求完成时处理数据。如果服务器返回的是JSON格式的数据，我们还可以尝试将其解析为JavaScript对象，以便进一步操作。

注意：在实际应用中，由于同源策略的限制，跨域Ajax请求需要服务器支持CORS（Cross-Origin Resource Sharing）或者使用JSONP等方式进行。

- 阅读更多 -

AJAX前后端数据交互 SpringBoot框架

System

2024-08-16

所有,ajax

在Spring Boot中，我们可以使用@RestController和@GetMapping注解来创建一个简单的AJAX前后端数据交互的接口。以下是一个简单的例子：

后端代码（Spring Boot Controller）:




import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.Map;
 
@RestController
public class AjaxController {
 
    @GetMapping("/getData")
    public Map<String, Object> getData() {
        Map<String, Object> data = new HashMap<>();
        data.put("key1", "value1");
        data.put("key2", "value2");
        return data;
    }
}

前端代码（HTML + JavaScript）:




<!DOCTYPE html>
<html>
<head>
    <title>AJAX Example</title>
    <script>
        function fetchData() {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "/getData", true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var json = JSON.parse(xhr.responseText);
                    console.log(json);
                    // 处理json数据
                }
            };
            xhr.send();
        }
    </script>
</head>
<body>
    <button onclick="fetchData()">Fetch Data</button>
</body>
</html>

在这个例子中，当用户点击按钮时，会触发fetchData函数，该函数使用AJAX的XMLHttpRequest对象向/getData端点发送GET请求，然后后端的@GetMapping("/getData")注解的方法处理这个请求并返回JSON格式的数据，前端JavaScript通过xhr.onreadystatechange回调函数接收这些数据。

- 阅读更多 -

【Ajax】Express 服务端框架

System

2024-08-16

所有,ajax

在Node.js中，Express是一个非常流行的后端框架，可以用于创建Web服务器。以下是一个简单的Express服务器示例，它使用Ajax进行数据请求和响应。

首先，确保你已经安装了Node.js和npm。然后，创建一个新的项目并初始化一个新的npm项目：




mkdir express-ajax-example
cd express-ajax-example
npm init -y

接下来，安装Express：




npm install express

创建一个名为server.js的文件，并添加以下代码：




const express = require('express');
const app = express();
const port = 3000;
 
// 解析JSON请求体
app.use(express.json());
 
// 创建一个GET路由用于返回初始页面
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
 
// 创建一个POST路由用于Ajax请求
app.post('/ajax-response', (req, res) => {
  const data = { message: 'Hello from Express!' };
  res.json(data); // 返回JSON响应
});
 
app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

在同一目录下创建一个index.html文件，并添加以下代码：




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ajax Example</title>
  <script>
    function handleAjaxResponse() {
      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/ajax-response', true);
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          // 请求成功
          alert(xhr.responseText);
        }
      };
      xhr.send(JSON.stringify({ key: 'value' })); // 发送JSON请求体
    }
  </script>
</head>
<body>
  <h1>Ajax Example</h1>
  <button onclick="handleAjaxResponse()">Send Ajax Request</button>
</body>
</html>

运行服务器：




node server.js

在浏览器中打开http://localhost:3000，点击按钮，你将看到一个带有"Hello from Express!"的警告框。这个示例演示了如何使用Express创建一个简单的Web服务器，并使用Ajax与该服务器进行通信。

- 阅读更多 -

[JavaWeb] 登录权限验证,AJAX异步验证用账号是否存在

System

2024-08-16

所有,ajax

以下是一个使用AJAX进行异步验证用户名是否存在的JavaWeb示例代码。

首先，我们需要一个Servlet来处理AJAX请求：




@WebServlet("/checkUsername")
public class UsernameCheckServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        boolean exists = UserService.checkUsernameExists(username); // 假设有一个UserService类和checkUsernameExists方法
 
        response.setContentType("application/json");
        PrintWriter out = response.getWriter();
        out.print(exists ? "true" : "false");
        out.flush();
    }
}

然后，我们需要一个UserService类来处理业务逻辑：




public class UserService {
    public static boolean checkUsernameExists(String username) {
        // 这里应该是查询数据库的逻辑，检查用户名是否存在
        // 假设数据库查询返回true表示存在
        return true; // 假设用户名存在
    }
}

最后，是前端的JavaScript代码，用于发送AJAX请求并处理响应：




function checkUsername(username) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/checkUsername?username=' + encodeURIComponent(username), true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var exists = (xhr.responseText == 'true');
            if (exists) {
                alert('用户名已存在，请选择其他用户名。');
            }
        }
    };
    xhr.send();
}
 
// 在用户名输入框的事件中调用checkUsername函数
document.getElementById('usernameInput').addEventListener('blur', function() {
    var username = this.value;
    checkUsername(username);
});

在这个例子中，当用户在用户名输入框中失去焦点时，会触发AJAX请求到服务器进行验证。服务器响应一个JSON字符串，表示用户名是否存在，然后前端根据这个响应显示相应的警告信息。

- 阅读更多 -

Ajax异步请求，获取本地json数据

System

2024-08-16

所有,ajax

要使用Ajax异步请求获取本地JSON数据，你可以使用JavaScript的XMLHttpRequest对象或者现代的fetchAPI。以下是使用这两种方法的示例代码。

使用XMLHttpRequest的示例：




var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var json = JSON.parse(xhr.responseText);
    console.log(json); // 处理获取到的JSON数据
  }
};
xhr.send();

使用fetch API的示例：




fetch('data.json')
  .then(response => response.json())
  .then(json => {
    console.log(json); // 处理获取到的JSON数据
  })
  .catch(error => console.error('Error fetching data:', error));

在这两种方法中，你需要确保data.json文件位于可以访问的服务器上的正确路径上，或者在浏览器的同源策略允许的范围内。如果是本地测试，你可能需要运行一个本地服务器，因为浏览器的同源策略会阻止从本地文件系统直接请求资源。

System

2024-08-16

所有,ajax

在HTML页面中，要通过表单（form）向后端（如服务器）发送数据，通常使用的是GET或POST方法。后端接收数据后，可以进一步处理这些数据，例如将数据写入数据库。

以下是一个简单的HTML表单和对应的后端示例代码（以Python Flask框架为例）：

HTML表单:




<form action="/submit_data" method="post">
  <input type="text" name="username" placeholder="Enter username">
  <input type="email" name="email" placeholder="Enter email">
  <input type="submit" value="Submit">
</form>

Python Flask后端代码:




from flask import Flask, request, redirect, url_for
from flask_sqlalchemy import SQLAlchemy
 
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///mydatabase.db'
db = SQLAlchemy(app)
 
class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    email = db.Column(db.String(120), unique=True, nullable=False)
 
    def __repr__(self):
        return '<User %r>' % self.username
 
@app.route('/submit_data', methods=['POST'])
def submit_data():
    username = request.form['username']
    email = request.form['email']
    
    user = User(username=username, email=email)
    db.session.add(user)
    db.session.commit()
    
    return redirect(url_for('index'))
 
if __name__ == '__main__':
    app.run(debug=True)

在这个例子中，当用户填写表单并提交后，Flask后端会接收到数据，然后创建一个User模型的实例，并将数据添加到数据库中。这里使用了Flask-SQLAlchemy来操作SQLite数据库。

注意：实际部署时，你可能需要处理表单验证、安全性问题（如XSS攻击）、错误处理等方面的逻辑。

- 阅读更多 -

python flask框架实现AJAX数据传输

System

2024-08-16

所有,ajax




from flask import Flask, render_template, request, jsonify
 
app = Flask(__name__)
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/get_data', methods=['POST'])
def get_data():
    # 假设这里从request.form或者request.args中获取参数
    param = request.form['param']
    # 处理数据，这里只是打印出参数作为示例
    print(param)
    # 假设处理后得到的数据是response_data
    response_data = {'result': 'processed data'}
    return jsonify(response_data)
 
if __name__ == '__main__':
    app.run(debug=True)

HTML 文件 (index.html):




<!DOCTYPE html>
<html>
<head>
    <title>Flask AJAX Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div>
        <input type="text" id="param_input" />
        <button id="send_btn">Send</button>
    </div>
    <div id="response_div"></div>
 
    <script>
        $(document).ready(function(){
            $('#send_btn').click(function(){
                var param = $('#param_input').val();
                $.ajax({
                    type: 'POST',
                    url: '/get_data',
                    data: {
                        'param': param
                    },
                    success: function(response) {
                        $('#response_div').text(response.result);
                    },
                    error: function(xhr, status, error) {
                        console.error("An error occurred: " + status + "\nError: " + error);
                    }
                });
            });
        });
    </script>
</body>
</html>

在这个例子中，我们使用了Flask框架和jQuery实现了一个简单的AJAX请求。当用户点击按钮时，输入框中的值会通过AJAX POST请求发送到服务器，服务器处理完数据后，将结果以JSON格式返回给客户端，客户端接收到响应后将数据显示在页面上。

System

2024-08-16

所有,ajax

以下是一个简单的PHP代码示例，用于使用Ajax验证用户登录信息，并利用layer.msg进行登录结果提示：




<?php
// 假设用户提交的登录信息
$username = $_POST['username'];
$password = $_POST['password'];
 
// 假设正确的用户名和密码
$correct_username = 'user1';
$correct_password = 'password123';
 
// 验证用户名和密码
if ($username === $correct_username && $password === $correct_password) {
    // 登录成功
    echo json_encode(array('status' => 'success', 'message' => '登录成功！'));
} else {
    // 登录失败
    echo json_encode(array('status' => 'error', 'message' => '用户名或密码错误！'));
}
?>

前端HTML和JavaScript代码示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax 登录示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/3.1.1/layer.min.js"></script>
</head>
<body>
 
<form id="loginForm">
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <button type="submit">登录</button>
</form>
 
<script>
$(document).ready(function() {
    $('#loginForm').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'login_process.php',
            data: $(this).serialize(),
            dataType: 'json',
            success: function(response) {
                if (response.status === 'success') {
                    layer.msg(response.message, {icon: 6});
                    // 登录成功后的操作，例如跳转页面
                } else {
                    layer.msg(response.message, {icon: 5});
                    // 登录失败后的操作
                }
            },
            error: function() {
                layer.msg('服务器错误！', {icon: 5});
            }
        });
    });
});
</script>
 
</body>
</html>

在这个例子中，我们使用了jQuery库来简化Ajax请求，并使用layer.js库来显示提示信息。当用户提交登录表单时，我们阻止表单的默认提交行为，并使用Ajax向服务器发送请求。服务器端login_process.php脚本验证登录信息，并返回JSON格式的响应。根据返回的状态，我们使用layer.msg来显示相应的成功或错误信息。

System

2024-08-16

所有,ajax

在学习Ajax之前，我们需要先了解一些基本的知识，包括HTTP协议、Ajax的原理以及如何发送Ajax请求。

HTTP协议

HTTP（超文本传输协议）是一个简单的请求-响应协议，它通常运行在TCP之上。

原生AJAX

Ajax全称为Asynchronous JavaScript and XML（异步的JavaScript和XML），是指一种创建交互式网页应用的开发技术。

发送Ajax请求

在JavaScript中，我们可以使用XMLHttpRequest对象来发送Ajax请求。

以下是一个发送GET请求的例子：




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

以下是一个发送POST请求的例子：




var xhr = new XMLHttpRequest();
xhr.open("POST", "your_url", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
};
xhr.send("param1=value1&param2=value2");

注意：在实际开发中，我们通常会使用jQuery等库来简化Ajax的使用，例如：




$.ajax({
    url: "your_url",
    type: "GET",
    dataType: "json",
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.log(error);
    }
});

以上就是Ajax的基本学习内容，在实际开发中，我们还需要注意跨域请求、错误处理等问题。

- 阅读更多 -

〖Python网络爬虫实战㉕〗- Ajax数据爬取之Ajax 案例实战

System

2024-08-16

所有,ajax




import requests
import json
import pandas as pd
 
# 设置请求头信息
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',
    'Accept': 'application/json, text/javascript, */*; q=0.01',
    'Accept-Encoding': 'gzip, deflate',
    'Host': 'www.aqistudy.cn',
    'Referer': 'http://www.aqistudy.cn/historydata/'
}
 
# 设置请求的URL
url = 'http://www.aqistudy.cn/apinew/aqistudyapi.php'
 
# 设置请求参数
params = {
    'city': '北京',
    'month': '2019-12',
    'type': '1',
    '_': '1585935878778'
}
 
# 发送请求
response = requests.get(url, params=params, headers=headers)
 
# 检查请求是否成功
if response.status_code == 200:
    # 解析JSON数据
    data = json.loads(response.text)
    # 提取数据并转换为DataFrame
    df = pd.DataFrame(data['data'])
    # 打印前几行数据
    print(df.head())
    # 保存数据到CSV文件
    df.to_csv('beijing_air_quality_2019-12.csv', index=False)
else:
    print("请求失败")

这段代码首先设置了请求头和请求的URL，然后定义了请求参数，并发送了一个GET请求。如果请求成功，它会解析返回的JSON数据，将其转换为Pandas DataFrame，打印出前几行数据，并将数据保存到CSV文件中。如果请求失败，它会打印出错误信息。这个实战案例展示了如何处理Ajax请求和解析JSON数据，是学习Python网络爬虫的一个很好的实践。

- 阅读更多 -