如何将参数传递到下一页：实现跳转必应并填充搜索框

方法1：纯HTML修改表单（最简单实现） #

直接调整表单的属性，利用必应的搜索参数规则完成需求：

<form id="form1" method="get" action="https://www.bing.com/search">
    <input type="text" id="email" name="q" value="myemail@gmail.com" />
    <input type="submit" id="button" value="Submit" />
</form>

说明： #

• 必应搜索的核心参数是q，给输入框添加name="q"后，表单提交时会自动把输入值拼接到URL的?q=xxx位置
• 将表单method改为get（搜索类请求通用方式），action设为必应的搜索接口地址
• 提交后页面会直接跳转到必应搜索结果页，同时id="sb_form_q"的搜索框会自动填充输入内容

方法2：JavaScript控制（适配复杂场景） #

如果需要保留原表单结构或添加额外逻辑，用JS监听提交事件手动处理：

<form id="form1" method="post" action="">
    <input type="text" id="email" value="myemail@gmail.com" />
    <input type="submit" id="button" value="Submit" />
</form>

<script>
document.getElementById('form1').addEventListener('submit', function(e) {
    // 阻止表单默认提交行为
    e.preventDefault();
    // 获取输入框内容并处理特殊字符
    const searchContent = encodeURIComponent(document.getElementById('email').value.trim());
    // 跳转到带搜索参数的必应页面
    window.location.href = `https://www.bing.com/search?q=${searchContent}`;
});
</script>

说明： #

• 通过submit事件监听阻止默认提交，避免页面无意义跳转
• 用encodeURIComponent处理输入内容中的特殊字符，防止URL编码错误
• 手动拼接带参数的必应地址，跳转后必应会自动将参数值填充到目标搜索框中

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