You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

请求协助:实现多输入值通过GET请求发送至指定地址的网页

我来帮你修正并完善这段代码,先说说我发现的几个关键问题,再给你完整的解决方案:

  • 你现在的$.get方法参数格式完全错误,数据对象的写法不符合jQuery规范,而且参数顺序也混乱了
  • 目前代码是获取按钮的value值,但用户需要输入内容,应该改成读取输入框的内容才对
  • 页面里没有对应的输入框元素,而且还没引入jQuery库,直接用$会报错
  • 表单的action属性在这里没用,因为我们是用AJAX发送请求,不需要表单提交

下面是完善后的完整代码:

<!DOCTYPE html>
<html>
<head>
    <title>发送GET请求</title>
    <!-- 引入jQuery库,确保$能正常使用 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $(".sendButton").click(function(e) {
                // 阻止按钮默认的表单提交行为(避免不必要的页面跳转)
                e.preventDefault();
                // 获取两个输入框的用户输入值
                var valueA = $("#inputA").val();
                var valueB = $("#inputB").val();
                
                // 正确调用$.get方法:URL、请求数据对象、成功回调、失败回调
                $.get("http://192.168.1.101:8081/", {
                    valueA: valueA,
                    valueB: valueB
                }, function(response) {
                    // 请求成功后的处理逻辑,比如提示用户或打印返回结果
                    console.log("请求成功,服务器返回:", response);
                    alert("请求已成功发送!");
                }).fail(function() {
                    // 请求失败时的提示
                    alert("请求失败,请检查服务器是否正常运行");
                });
            });
        });
    </script>
</head>
<body>
    <div style="padding: 20px;">
        <h3>输入值并发送GET请求</h3>
        <div style="margin: 10px 0;">
            <label for="inputA">值A:</label>
            <input type="text" id="inputA" placeholder="请输入值A">
        </div>
        <div style="margin: 10px 0;">
            <label for="inputB">值B:</label>
            <input type="text" id="inputB" placeholder="请输入值B">
        </div>
        <button class="sendButton" style="padding: 6px 12px;">发送请求</button>
    </div>
</body>
</html>

关键修改说明:

  1. 引入jQuery库:添加了官方CDN的jQuery引用,确保代码里的$能正常工作
  2. 添加输入框:新增两个文本输入框,让用户可以输入需要发送的valueA和valueB
  3. 修正$.get调用:采用{键: 值}的正确数据格式,同时添加成功/失败回调,方便处理请求结果
  4. 阻止默认行为:给按钮点击事件添加e.preventDefault(),避免触发不必要的表单提交
  5. 优化页面体验:添加了简单的布局样式和提示文案,让页面更易用

这样修改后,用户输入值点击按钮,就会向http://192.168.1.101:8081/发送包含valueA和valueB的GET请求了。

内容的提问来源于stack exchange,提问作者iSeeDeadPeople

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.21 07:10:37