PyScript URL文本爬取网页提交后刷新无结果问题求助

我是编程新手，想做一个用PyScript实现的网页，输入URL后爬取对应HTML里的所有文本。本地编辑器手动写链接时功能正常，但改成PyScript网页版后，提交URL页面只会刷新，没有任何结果，控制台也没报错。另外提交按钮目前无法正常工作（后续自行排查），不确定是grab_data函数的查询选择器问题，还是有其他错误。

现有代码 #

HTML代码 #

<body>
    
<div class="body">
    <div>Placeholder</div>
    <div class="lyricsApp">
        <form class="lyricsInputForm">
                
                <input type="text" id="urlInput" placeholder="Paste a link!">
                <button  id="lyricsButton" type="submit" py-click="grab_data()">Get Lyrics</button>
            
        </form>
            
        <p class="lyricsOutput">Placeholder</p>
        
    </div>
    <div>Placeholder 2</div>
    
<script type="py" src="./main.py" config="./pyscript.toml" terminal></script>


</body>
</html>

Python代码 #

from urllib.request import Request, urlopen
from bs4 import BeautifulSoup
from pyscript import document



def grab_data():
    
    url_input = document.querySelector("#urlInput")
    url_event = url_input.value
    disguise_request = Request(url_event, headers={"User-Agent": "Mozilla/5.0"})
    data = urlopen(disguise_request).read()
    return data



html_data = grabData()
soup = BeautifulSoup(html_data, "html.parser")
raw_text = soup.get_text()
stripped_text = rawText.stripped_strings


def send_back(stripped_text)

    for filter in stripped_text:
            
        if len(filter) > 60 and len(filter) < 8:
                pass
           else:
                return filter
        
    output_text = filter
        
    outputElement = document.getElementById("#lyricsOutput")
    outputElement.innertext = output_text
        
    
send_back(stripped_text)

pyscript.toml配置 #

packages = ["Request", "urlopen", "BeautifulSoup" ]

问题分析与修复步骤 #

1. 表单默认提交导致页面刷新 #

表单的submit按钮点击后会触发浏览器默认的表单提交行为，直接刷新页面。解决方法：在<form>标签添加onsubmit="return false;"阻止默认行为。

2. Python代码的语法与逻辑错误 #

• 函数名大小写错误：定义的函数是grab_data，但调用时写成了grabData()，Python对大小写敏感，需统一。
• 函数定义缺少冒号：def send_back(stripped_text)末尾没有加:，这是语法错误。
• 变量名不一致：rawText.stripped_strings应该是raw_text.stripped_strings，前面定义的变量是raw_text。
• 过滤条件逻辑错误：if len(filter) > 60 and len(filter) < 8永远不成立，应该改为8 <= len(filter) <=60这类合法范围判断。
• 循环提前返回：return filter会在找到第一个符合条件的文本后直接终止循环，无法收集所有符合条件的内容。
• 元素获取错误：document.getElementById("#lyricsOutput")不需要加#，且原HTML中<p>只有class没有id，需给<p>添加id="lyricsOutput"，再用getElementById("lyricsOutput")获取。
• 代码执行时机错误：原代码在页面加载时就直接调用了grabData()和send_back()，应该把所有逻辑放到grab_data函数内，点击按钮时才执行。

3. pyscript.toml配置错误 #

Request和urlopen是Python标准库urllib.request的模块，不需要单独安装；BeautifulSoup对应的PyPI包名是beautifulsoup4，所以配置应改为：

packages = ["beautifulsoup4"]

修复后的完整代码 #

修复后的HTML #

<body>
    <div class="body">
        <div>Placeholder</div>
        <div class="lyricsApp">
            <form class="lyricsInputForm" onsubmit="return false;">
                <input type="text" id="urlInput" placeholder="Paste a link!">
                <button id="lyricsButton" type="submit" py-click="grab_data()">Get Lyrics</button>
            </form>
            <p id="lyricsOutput" class="lyricsOutput">Placeholder</p>
        </div>
        <div>Placeholder 2</div>
    </div>
    <script type="py" src="./main.py" config="./pyscript.toml" terminal></script>
</body>
</html>

修复后的Python代码 #

from urllib.request import Request, urlopen
from bs4 import BeautifulSoup
from pyscript import document

def grab_data():
    # 获取输入的URL并去除首尾空格
    url_input = document.querySelector("#urlInput")
    url = url_input.value.strip()
    if not url:
        output_element = document.getElementById("lyricsOutput")
        output_element.innerText = "请输入有效的URL"
        return
    
    try:
        # 发送请求，模拟浏览器UA
        disguise_request = Request(url, headers={"User-Agent": "Mozilla/5.0"})
        data = urlopen(disguise_request).read()
        
        # 解析HTML并提取文本
        soup = BeautifulSoup(data, "html.parser")
        raw_text = soup.get_text()
        stripped_text = raw_text.stripped_strings
        
        # 过滤并收集符合长度要求的文本
        output_content = ""
        for text in stripped_text:
            text_length = len(text)
            if 8 <= text_length <= 60:
                output_content += text + "\n"
        
        # 将结果输出到页面
        output_element = document.getElementById("lyricsOutput")
        output_element.innerText = output_content if output_content else "未找到符合条件的文本"
    except Exception as e:
        # 捕获异常并显示错误信息
        output_element = document.getElementById("lyricsOutput")
        output_element.innerText = f"出错了: {str(e)}"

修复后的pyscript.toml #

packages = ["beautifulsoup4"]

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