如何实现按钮提交表单后执行AJAX调用及Airbnb爬虫开发问题

我来帮你逐个解决这两个问题：

默认情况下，点击submit按钮会直接提交表单并刷新页面，这会打断AJAX请求的执行。所以核心思路是先阻止表单的默认提交行为，完成AJAX请求后再手动触发表单提交（或者根据AJAX结果决定是否提交）。

给你两种实用的实现方式：

方式一：先执行AJAX，成功后再提交表单 #

这种方式适合需要依赖AJAX返回结果再决定是否提交表单的场景：

document.getElementById('create_table').addEventListener('click', function(e) {
    // 阻止表单默认刷新提交
    e.preventDefault();
    
    // 获取当前按钮所属的表单
    const form = this.closest('form');
    
    // 执行AJAX调用
    fetch('/your-ajax-endpoint/', {
        method: 'POST',
        headers: {
            // Django项目要带上CSRF令牌，其他框架按需调整
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: new URLSearchParams(new FormData(form))
    })
    .then(response => response.json())
    .then(data => {
        // AJAX执行成功后的自定义逻辑，比如验证数据
        console.log('AJAX请求完成:', data);
        
        // 手动提交表单
        form.submit();
    })
    .catch(error => {
        console.error('AJAX请求失败:', error);
        // 失败时可以提示用户，或选择不提交表单
    });
});

方式二：无依赖并行执行（谨慎使用） #

如果你不需要等待AJAX结果就能提交表单，可以同时触发AJAX和表单提交，但这种方式可能因为页面刷新导致AJAX请求中断，仅适合对AJAX结果无要求的场景：

document.getElementById('create_table').addEventListener('click', function(e) {
    e.preventDefault();
    const form = this.closest('form');
    
    // 发送AJAX请求（不等待完成）
    fetch('/your-ajax-endpoint/', {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: new URLSearchParams(new FormData(form))
    });
    
    // 立即提交表单
    form.submit();
});

结合你给出的Django表单代码，我们需要用AJAX替代默认表单提交，实现无刷新渲染表格。具体步骤如下：

1. 前端JS逻辑改造 #

在index.html的</body>前添加以下代码，拦截表单提交并发送AJAX请求：

document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    const tableContainer = document.getElementById('table');
    
    form.addEventListener('submit', function(e) {
        // 阻止默认刷新
        e.preventDefault();
        
        // 收集表单数据
        const formData = new FormData(this);
        
        // 发送请求到results视图
        fetch('/results/', {  // 替换成你实际的results视图URL
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            },
            body: formData
        })
        .then(response => response.text())  // 接收返回的HTML表格片段
        .then(html => {
            // 将表格插入到容器中
            tableContainer.innerHTML = html;
        })
        .catch(error => {
            console.error('加载结果失败:', error);
            tableContainer.innerHTML = '<p>抱歉，加载房源信息失败，请重试</p>';
        });
    });
});

2. 调整Django的results视图 #

让results视图只返回表格的HTML片段，而非完整页面：

from django.shortcuts import render
from django.http import HttpResponse

def results(request):
    if request.method == 'POST':
        city = request.POST.get('city')  # 假设表单字段名为city
        # 这里写入你的爬虫逻辑，获取房源价格和链接
        # 示例模拟数据：
        scraped_data = [
            {'price': '$120/晚', 'link': 'https://airbnb.com/listing-1'},
            {'price': '$180/晚', 'link': 'https://airbnb.com/listing-2'}
        ]
        
        # 渲染单独的表格模板
        return render(request, 'table_fragment.html', {'data': scraped_data})
    else:
        return HttpResponse('仅接受POST请求', status=400)

3. 创建表格片段模板（table_fragment.html） #

这个模板只负责渲染表格，不需要完整的HTML结构：

<table style="border-collapse: collapse; width: 100%;">
    <thead>
        <tr>
            <th style="border: 1px solid #ddd; padding: 8px;">价格</th>
            <th style="border: 1px solid #ddd; padding: 8px;">房源链接</th>
        </tr>
    </thead>
    <tbody>
        {% for item in data %}
        <tr>
            <td style="border: 1px solid #ddd; padding: 8px;">{{ item.price }}</td>
            <td style="border: 1px solid #ddd; padding: 8px;"><a href="{{ item.link }}" target="_blank">查看房源</a></td>
        </tr>
        {% empty %}
        <tr>
            <td colspan="2" style="border: 1px solid #ddd; padding: 8px; text-align: center;">未找到该城市的房源信息</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

4. 路由配置 #

确保results视图的URL已在urls.py中配置：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('results/', views.results, name='results'),
]

内容的提问来源于stack exchange，提问作者barciewicz