搜索表单刷新页面，而不是搜索值

当搜索表单提交时，页面刷新而不是显示搜索结果，这通常是由于表单的默认行为导致的。以下是基础概念、相关优势、类型、应用场景以及解决方案：

基础概念

表单提交：HTML表单通过<form>元素定义，当用户提交表单时，默认行为是通过HTTP请求将数据发送到服务器。
页面刷新：默认情况下，表单提交会导致浏览器重新加载当前页面。

类型

GET请求：用于从服务器检索数据，通常用于搜索功能。
POST请求：用于向服务器发送数据，通常用于提交表单数据。

应用场景

搜索框：用户在搜索框中输入关键词并提交，期望看到搜索结果而不刷新整个页面。
登录表单：用户输入用户名和密码后提交，期望进行身份验证而不刷新页面。

解决方案

为了避免页面刷新，可以使用以下几种方法：

1. 使用JavaScript阻止默认行为

通过JavaScript捕获表单提交事件并阻止其默认行为，然后使用AJAX发送请求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Search Form</title>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('searchForm');
            form.addEventListener('submit', function(event) {
                event.preventDefault(); // 阻止默认提交行为
                const searchValue = document.getElementById('searchInput').value;
                fetch('/search', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ query: searchValue })
                })
                .then(response => response.json())
                .then(data => {
                    // 处理返回的搜索结果
                    console.log(data);
                })
                .catch(error => console.error('Error:', error));
            });
        });
    </script>
</head>
<body>
    <form id="searchForm">
        <input type="text" id="searchInput" name="query" placeholder="Search...">
        <button type="submit">Search</button>
    </form>
</body>
</html>

2. 使用AJAX库（如jQuery）

如果你更喜欢使用库来简化代码，可以使用jQuery。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Search Form</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#searchForm').on('submit', function(event) {
                event.preventDefault(); // 阻止默认提交行为
                const searchValue = $('#searchInput').val();
                $.ajax({
                    url: '/search',
                    method: 'GET',
                    data: { query: searchValue },
                    success: function(data) {
                        // 处理返回的搜索结果
                        console.log(data);
                    },
                    error: function(error) {
                        console.error('Error:', error);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="searchForm">
        <input type="text" id="searchInput" name="query" placeholder="Search...">
        <button type="submit">Search</button>
    </form>
</body>
</html>