分类 ajax 下的文章

2024-08-07

以下是一个简易的JSP和Servlet相结合的计算器示例。假设我们有两个文本框用于输入数字，一个下拉列表用于选择运算符，并有一个按钮来提交表单并显示结果。

JSP页面（calculator.jsp）




<!DOCTYPE html>
<html>
<head>
    <title>简易计算器</title>
</head>
<body>
    <form action="CalculatorServlet" method="POST">
        数字1: <input type="text" name="number1" /><br/>
        数字2: <input type="text" name="number2" /><br/>
        运算符:
        <select name="operator">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select><br/>
        <input type="submit" value="计算" />
    </form>
    <br/>
    <% if (request.getAttribute("result") != null) { %>
        结果: <%= request.getAttribute("result") %>
    <% } %>
</body>
</html>

Servlet类（CalculatorServlet.java）




import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
public class CalculatorServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String number1Str = request.getParameter("number1");
        String number2Str = request.getParameter("number2");
        String operator = request.getParameter("operator");
 
        double number1 = Double.parseDouble(number1Str);
        double number2 = Double.parseDouble(number2Str);
        double result = 0;
 
        switch (operator) {
            case "+":
                result = number1 + number2;
                break;
            case "-":
                result = number1 - number2;
                break;
            case "*":
                result = number1 * number2;
                break;
            case "/":
                if (number2 != 0) {
                    result = number1 / number2;
                } else {
                    response.getWriter().write("除数不能为0");

- 阅读更多 -

Web框架开发-基于Ajax实现的登录

System

2024-08-07

所有,ajax

以下是一个简单的例子，展示了如何使用JavaScript和Ajax实现登录功能：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
</head>
<body>
    <form id="loginForm">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username"><br><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password"><br><br>
        <button type="button" id="loginBtn">Login</button>
    </form>
 
    <script src="login.js"></script>
</body>
</html>

JavaScript部分 (login.js):




document.getElementById('loginBtn').addEventListener('click', function() {
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
 
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/login', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 登录成功的处理逻辑
            console.log('Login successful');
            // 可以在这里跳转到另一个页面
        } else if (xhr.readyState === 4 && xhr.status === 401) {
            // 登录失败的处理逻辑
            console.log('Login failed');
        }
    };
 
    var data = JSON.stringify({
        username: username,
        password: password
    });
 
    xhr.send(data);
});

在这个例子中，我们为登录按钮添加了一个点击事件监听器。当按钮被点击时，它会读取用户名和密码，并通过Ajax向服务器的/login路径发送一个POST请求。服务器端需要有相应的路由来处理登录请求，并返回合适的状态码（如200表示成功，401表示未授权）。

请注意，这个例子没有处理CSRF tokens，HTTPS，或者输入验证。在实际应用中，你需要添加这些安全措施。

- 阅读更多 -

【Ajax】ajax 基本使用 / 跨域问题 / get和post

System

2024-08-07

所有,ajax

Ajax基础使用：




// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'http://example.com/api/data', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求响应的数据
      console.log(xhr.responseText);
    } else {
      // 处理错误情况
      console.error('请求失败，状态码：' + xhr.status);
    }
  }
};
 
// 发送请求
xhr.send();

Ajax处理跨域问题：

JSONP：只支持GET请求，通过动态创建<script>标签发送请求。
CORS：服务器需要设置适当的CORS头部，如Access-Control-Allow-Origin。
代理服务器：在服务器端创建一个代理，所有Ajax请求首先发送到这个代理，由代理转发请求到目标服务器。
使用服务端代理：在服务器端设置一个接口，前端发送Ajax请求到这个服务器端接口，由服务器代理发送真正的请求到目标URL。

Ajax GET和POST请求：




// GET请求
xhr.open('GET', 'http://example.com/api/data?param=value', true);
xhr.send();
 
// POST请求
xhr.open('POST', 'http://example.com/api/data', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 设置请求头
xhr.send('param=value');

以上代码展示了如何使用Ajax发送GET和POST请求，以及处理跨域问题的基本方法。

- 阅读更多 -

PHP 实例 - AJAX 实时搜索

System

2024-08-07

所有,ajax




<?php
// 连接数据库
$db = new mysqli('localhost', 'username', 'password', 'database');
 
// 检查连接
if ($db->connect_error) {
    die("连接失败: " . $db->connect_error);
}
 
// 获取搜索关键字
$search_term = $db->real_escape_string($_GET['term']);
 
// 构造SQL查询
$query = "SELECT name FROM countries WHERE name LIKE '%{$search_term}%'";
 
// 执行查询
$result = $db->query($query);
 
// 创建一个数组用于存储搜索结果
$matches = array();
 
// 遍历结果并存储
while ($row = $result->fetch_assoc()) {
    $matches[] = array(
        'id'   => $row['id'],
        'value' => htmlspecialchars_decode($row['name']),
    );
}
 
// 将结果转换为JSON格式
echo json_encode($matches);
 
// 关闭数据库连接
$db->close();
?>

这段代码首先连接数据库，然后检索URL中的搜索关键字，接着构造一个SQL查询来匹配国家名称，执行查询并遍历结果，最后将结果转换为JSON格式，以便AJAX可以使用它。

System

2024-08-07

所有,ajax

该问题是关于“福建科立讯讯”通讯指挥管理平台中的ajax_users.php文件存在SQL注入漏洞。SQL注入是一种安全漏洞，攻击者可以通过它执行意外的SQL查询，可能会导致数据泄露、数据修改或数据的完全控制。

解决这个问题的关键是对输入进行适当的验证和清理，并使用预处理语句或绑定参数来避免SQL注入。

以下是一个简单的修复示例，使用预处理语句来防止SQL注入：




// 假设你已经有了一个PDO连接对象$dbh
try {
    $stmt = $dbh->prepare("SELECT * FROM users WHERE username = :username");
    $stmt->bindParam(':username', $_POST['username']);
    $stmt->execute();
    $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
    // ... 其余的处理逻辑
} catch (PDOException $e) {
    // 错误处理
    echo "Error: " . $e->getMessage();
}

在这个例子中，:username是一个参数绑定，PDO会自动处理这个参数，防止SQL注入。

对于批量验证的POC，通常是一段自动化测试的代码，用于尝试不同的用户名来查看是否能够成功执行SQL查询。由于这不是一个安全问题，而是一个安全测试问题，因此不提供具体的POC代码。通常，POC会使用自动化工具或编写脚本来尝试不同的输入，并观察结果。

- 阅读更多 -

AJAX的知识汇总

System

2024-08-07

所有,ajax

AJAX（Asynchronous JavaScript and XML）技术通过在浏览器与服务器之间使用异步通信（HTTP 请求）更新网页数据，而不是整个页面刷新。以下是AJAX的一些关键概念和示例代码：

创建 XMLHttpRequest 对象：




var xhr = new XMLHttpRequest();

打开请求：




xhr.open('GET', 'your-endpoint-url', true);

发送请求：




xhr.send();

处理服务器响应：




xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功
        var response = xhr.responseText;
        // 更新页面或使用返回的数据
    }
};

示例：异步请求一个JSON数据并更新页面：




var xhr = new XMLHttpRequest();
xhr.open('GET', 'your-json-endpoint', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var jsonResponse = JSON.parse(xhr.responseText);
        document.getElementById('your-element-id').innerHTML = jsonResponse.data;
    }
};
xhr.send();

AJAX 技术在现代网页开发中非常重要，它使得网页能够提供更加流畅和响应迅速的用户体验。

- 阅读更多 -

FastApi和Jquery传输图片

System

2024-08-07

所有,ajax

在FastAPI和Jquery中传输图片，你可以使用FastAPI接收图片数据，并通过Jquery发送请求。以下是一个简单的例子：

首先，使用FastAPI框架创建一个API接口来接收图片数据：




from fastapi import FastAPI, File, UploadFile
from fastapi.responses import JSONResponse
 
app = FastAPI()
 
@app.post("/uploadfile/")
async def create_upload_file(file: UploadFile = File(...)):
    contents = await file.read()
    # 这里可以添加保存文件的代码
    return JSONResponse(content={"filename": file.filename}, status_code=200)

然后，使用Jquery发送请求并附上图片文件：




<!DOCTYPE html>
<html>
<head>
    <title>FastAPI and Jquery Image Upload</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<input type="file" id="imageInput">
<button id="uploadButton">Upload</button>
 
<script>
    $(document).ready(function () {
        $('#uploadButton').click(function () {
            var formData = new FormData();
            var imageFile = $('#imageInput')[0].files[0];
            formData.append('file', imageFile);
 
            $.ajax({
                url: 'http://localhost:8000/uploadfile/',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    console.log(response.filename);
                },
                error: function () {
                    console.log('Error');
                }
            });
        });
    });
</script>
 
</body>
</html>

在这个例子中，当用户点击上传按钮时，Jquery会捕获图片文件，并通过Ajax请求发送到FastAPI服务器。服务器端的API接口会接收文件，并可以对其进行处理（例如保存到磁盘）。

确保FastAPI服务器已经运行在http://localhost:8000，并且在浏览器中打开这个HTML页面进行测试。

- 阅读更多 -

vue学习---基于vue2中的axios

System

2024-08-07

所有,ajax

在Vue 2项目中使用axios进行HTTP请求，你需要首先安装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 fetching the users: ', error);
        });
    }
  }
};
</script>

在这个例子中，我们在组件被创建时（created 钩子）从一个免费的REST API获取用户数据，并将其存储在本地状态中以供模板渲染使用。如果请求成功，它会更新users数据；如果请求失败，它会在控制台记录错误。

- 阅读更多 -

Home首页模块搭建

System

2024-08-07

所有,ajax




<template>
  <div class="home">
    <!-- 广告区 -->
    <div class="ad-banner">
      <a href="http://www.baidu.com" target="_blank">
        <img :src="require('@/assets/images/ad-banner.jpg')" alt="广告图片">
      </a>
    </div>
 
    <!-- 搜索区 -->
    <div class="search-wrapper">
      <XtxSearch />
    </div>
 
    <!-- 广告导航 -->
    <div class="ad-nav-list">
      <a href="http://www.baidu.com" target="_blank" v-for="item in adNavList" :key="item.id">
        <img :src="item.picture" alt="导航广告">
      </a>
    </div>
 
    <!-- 商品分类 -->
    <div class="category">
      <XtxBrand />
      <XtxCarousel :autoplay="true" />
      <XtxProduct :products="productList" />
    </div>
  </div>
</template>
 
<script>
import { ref } from 'vue'
import { getAdNavListAPI, getHomeProductListAPI } from '../../api/home'
import XtxBrand from '../../components/home/xtx-brand.vue'
import XtxCarousel from '../../components/common/xtx-carousel.vue'
import XtxProduct from '../../components/common/xtx-product.vue'
import XtxSearch from '../../components/common/xtx-search.vue'
 
export default {
  name: 'Home',
  components: { XtxBrand, XtxCarousel, XtxProduct, XtxSearch },
  setup () {
    // 广告导航数据
    const adNavList = ref([])
    // 获取广告导航数据
    const getAdNavList = async () => {
      const { data: res } = await getAdNavListAPI()
      if (res.code === 200) adNavList.value = res.result
    }
    getAdNavList()
 
    // 商品列表数据
    const productList = ref([])
    // 获取商品列表数据
    const getHomeProductList = async () => {
      const { data: res } = await getHomeProductListAPI()
      if (res.code === 200) productList.value = res.result
    }
    getHomeProductList()
 
    return { adNavList, productList }
  }
}
</script>
 
<style scoped>
.home {
  width: 1240px;
  margin: 0 auto;
  background: #fff;
}
.ad-banner {
  margin-top: 20px;
  text-align: center;
}
.ad-banner img {
  width: 1240px;
  height: 140px;
  display: block;
}
.search-wrapper {
  margin-top: 10px;
}
.ad-nav-list {
  margin-top: 20px;
  text-align: center;
}
.ad-nav-list a {

- 阅读更多 -

“艾在救援” 登录、查药功能实现（Ajax，Jason，javascript）

System

2024-08-07

所有,ajax

以下是一个简化的示例，展示了如何使用JavaScript、Ajax和JSON实现登录和查药的功能：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Medical Rescue</title>
    <script>
        function login() {
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/login', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    alert('Login result: ' + response.message);
                }
            };
            xhr.send(JSON.stringify({ username: username, password: password }));
        }
 
        function searchMedicine() {
            var medicineName = document.getElementById('medicineName').value;
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '/search?medicineName=' + encodeURIComponent(medicineName), true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    alert('Search result: ' + response.medicineInfo);
                }
            };
            xhr.send();
        }
    </script>
</head>
<body>
    <h1>Medical Rescue</h1>
    <h2>Login</h2>
    <input type="text" id="username" placeholder="Username" />
    <input type="password" id="password" placeholder="Password" />
    <button onclick="login()">Login</button>
 
    <h2>Search Medicine</h2>
    <input type="text" id="medicineName" placeholder="Medicine Name" />
    <button onclick="searchMedicine()">Search</button>
</body>
</html>

在这个例子中，我们定义了两个函数login()和searchMedicine()，它们通过Ajax请求与服务器交互。login()函数使用POST方法发送JSON格式的登录信息，而searchMedicine()函数使用GET方法发送搜索请求。服务器应响应这些请求并返回JSON格式的响应。

请注意，这个代码示例假定服务器端已经实现了相应的路由和逻辑来处理这些请求。此外，实际应用中应该使用HTTPS来保护用户数据，并对输入进行验证和清理以避免XSS攻击和其他安全问题。

- 阅读更多 -