如何在Django模板中展示外部网站数据？基于现有代码实现URL搜索展示功能

1. 安装必要依赖 #

首先安装网络请求库requests：
pip install requests

2. 修改urls.py，新增代理请求路由 #

你需要新增一个后端接口用来代理请求外部网站，避免前端跨域问题：

from django.urls import path
from . import views

urlpatterns = [
    path('',views.index,name='index'),
    # 新增外部内容获取接口
    path('fetch-site/', views.fetch_site, name='fetch_site'),
]

3. 修改views.py，新增请求逻辑 #

新增视图函数处理外部网站的请求，返回对应内容：

import requests
from django.shortcuts import render
from django.http import JsonResponse

def index(request):
    return render(request,"index.html")

def fetch_site(request):
    if request.method == "POST":
        target_url = request.POST.get("url", "")
        if not target_url.startswith(("http://", "https://")):
            target_url = "https://" + target_url
        try:
            # 发送请求获取外部网站内容，超时设置10秒
            resp = requests.get(target_url, timeout=10)
            resp.raise_for_status()
            # 如果你需要提取正文而不是返回完整HTML，可以在此处用BeautifulSoup解析处理
            return JsonResponse({"code": 0, "content": resp.text})
        except Exception as e:
            return JsonResponse({"code": 1, "msg": f"请求失败：{str(e)}"})
    return JsonResponse({"code": 1, "msg": "请求方式错误"})

4. 修改模板文件，完善交互逻辑 #

给原有元素加上ID方便绑定事件，新增JS逻辑处理点击请求、渲染结果：

<!-- 原有元素新增ID -->
<input type="text" value="" id="site-url" placeholder="请输入要抓取的网站URL" class="form-control mb-2">
<button type="button" id="search-btn" class="btn btn-primary mb-3">Search</button>
<!-- 新增csrf token，Django POST请求必填 -->
{% csrf_token %}
<div class="row">
  <div class="col-sm-12">
    <div class="card">
      <div class="card-body" id="result-content">
        <h5 class="card-title">Search results will appear here</h5>
      </div>
      </div>
     </div>
</div>

<!-- 新增JS交互逻辑 -->
<script>
document.getElementById('search-btn').addEventListener('click', function() {
    const url = document.getElementById('site-url').value.trim()
    const resultBox = document.getElementById('result-content')
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value

    if (!url) {
        resultBox.innerHTML = '<p class="text-danger">请输入要查询的URL</p>'
        return
    }

    resultBox.innerHTML = '<p>加载中...</p>'

    // 发送请求到后端接口
    fetch('{% url "fetch_site" %}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRFToken': csrfToken
        },
        body: `url=${encodeURIComponent(url)}`
    })
    .then(res => res.json())
    .then(data => {
        if (data.code === 0) {
            // 直接展示HTML内容，如果想避免样式污染可以用iframe包裹：
            // resultBox.innerHTML = `<iframe srcdoc="${encodeURI(data.content)}" width="100%" height="600px" frameborder="0"></iframe>`
            resultBox.innerHTML = data.content
        } else {
            resultBox.innerHTML = `<p class="text-danger">${data.msg}</p>`
        }
    })
    .catch(err => {
        resultBox.innerHTML = `<p class="text-danger">请求出错：${err.toString()}</p>`
    })
})
</script>

注意事项 #

• 部分网站配置了反爬策略，直接请求会返回403/404等错误，属于正常情况
• 直接渲染外部网站的HTML可能会和你当前页面的样式冲突，推荐用iframe包裹展示内容，代码中已经给出了对应注释的实现方式
• 如果有安全要求，可以在后端视图中增加URL校验逻辑，限制可请求的域名范围，避免被滥用为代理接口

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