Javascript 获取jQuery AJAX调用URL变量的表单输入值_Javascript_Jquery_Html_Ajax

Javascript 获取jQuery AJAX调用URL变量的表单输入值

javascript jquery html ajax

Javascript 获取jQuery AJAX调用URL变量的表单输入值,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,试图将HTML输入表单值作为URL:http://localhost:8080/orderNo?amount=“+金额，。我可以通过调用getAmtValue（）获取要登录到控制台的输入值，但似乎无法从外部获取amt值。请问我做错了什么？范围界定问题 <body> <form class="form-inline" onsubmit = " return getAmtValue()"> Find orders by amount :<br>

试图将HTML输入表单值作为

URL:http://localhost:8080/orderNo?amount=“+金额，

。我可以通过调用getAmtValue（）获取要登录到控制台的输入值，但似乎无法从外部获取amt值。请问我做错了什么？范围界定问题

<body>

 <form class="form-inline" onsubmit = " return getAmtValue()">

      Find orders by amount :<br>

      <div class="form-group">
        <input type="text" class="form-control inputArea" id="getAmt" placeholder="Enter Amount">
      </div>

      <button type="submit" class="btn btn-default submit">Submit</button>
    </form>



</body>


按金额查找订单：

提交


$（文档）.ready（函数（）{
var amt=“”；
$.ajax({
键入：“获取”，
url:“http://localhost:8080/orderNo?amount=“+金额，
xhrFields：{
证书：正确
},
数据类型：“json”，
成功：功能（数据）{
让文本=”；
for（让x输入数据）{
$（'.order_amt'）。追加（“
”+数据[x]。金额+”
”；
$（'.order_number'）。追加（“
”+数据[x]。订单号+”
”；
$（'.order_date'）。追加（“
”+数据[x]。日期+”
”）：
}
}
})；//结束AJAX
});//End$（文档）.ready（函数（））
函数getAmtValue（）{
金额=document.getElementById（“getamt”）.value；
console.log（“输入值：+amt”）；
返回false；
};

更新：

根据McB和NawedKhan，现在工作如下

$(document).ready(function() {

    let amt = "";

});//End $(document).ready(function()) 

function getAmtValue(){
      amt = document.getElementById("getamt").value;

      console.log("Value from input : " + amt);

      $.ajax({
        type: "GET",
        url: "http://localhost:8080/orderNo?amount="  + amt ,

        xhrFields: {
            withCredentials: true
         },
         dataType : "json",
         success : function(data) {
            let text = "";
            for (let x in data) {

                 $('.order_amt').append("<br>" + data[x].amt + "<br>");
                 $('.order_number').append("<br>" + data[x].order_no + "<br>");
                 $('.order_date').append("<br>" + data[x].date + "<br>"):
                 }


            }


    });//End AJAX

      return false;
    };

$（文档）.ready（函数（）{
设amt=“”；
});//End$（文档）.ready（函数（））
函数getAmtValue（）{
金额=document.getElementById（“getamt”）.value；
console.log（“输入值：+amt”）；
$.ajax({
键入：“获取”，
url:“http://localhost:8080/orderNo?amount=“+金额，
xhrFields：{
证书：正确
},
数据类型：“json”，
成功：功能（数据）{
让文本=”；
for（让x输入数据）{
$（'.order_amt'）。追加（“
”+数据[x]。金额+”
”；
$（'.order_number'）。追加（“
”+数据[x]。订单号+”
”；
$（'.order_date'）。追加（“
”+数据[x]。日期+”
”）：
}
}
})；//结束AJAX
返回false；
};

将ajax调用移动到表单提交时调用的函数中。因此，整个javascript将如下所示：

<script>
function getAmtValue(){
   var amt = document.getElementById("getAmt").value;
   console.log("Value from input : " + amt);

   $.ajax({
     type: "GET",
     url: "http://localhost:8080/orderNo?amount="  + amt ,

     xhrFields: {
        withCredentials: true
     },
     dataType : "json",
     success : function(data) {
        let text = "";
        for (let x in data) {           
          $('.order_amt').append("<br>" + data[x].amt + "<br>");
          $('.order_number').append("<br>" + data[x].order_no + "<br>");
          $('.order_date').append("<br>" + data[x].date + "<br>"):
        }
     }
   });//End AJAX

   return false;
};
</script>


函数getAmtValue（）{
var amt=document.getElementById（“getAmt”）.value；
console.log（“输入值：+amt”）；
$.ajax({
键入：“获取”，
url:“http://localhost:8080/orderNo?amount=“+金额，
xhrFields：{
证书：正确
},
数据类型：“json”，
成功：功能（数据）{
让文本=”；
对于（设x为数据）{
$（'.order_amt'）。追加（“
”+数据[x]。金额+”
”；
$（'.order_number'）。追加（“
”+数据[x]。订单号+”
”；
$（'.order_date'）。追加（“
”+数据[x]。日期+”
”）：
}
}
})；//结束AJAX
返回false；
};

整个订单都搞砸了。在页面加载时，文档准备好后，您将设置amt=“”，并将其发送到ajax。然后，只有当有人点击提交按钮时，您才将该值读入amt，但不发送该值。在返回false之前，将整个ajax移动到getAmtValue（）中；可以包含getAmtValue（）函数吗？现在，您的Ajax将使用“”作为amt值，因为这是您在代码之前设置的值。可以更改为document.getElementById（'getAmt'）。值，请直接在ajax请求中使用。@McB Hi-如果您的意思是包含代码，

getAmtValue（）

函数位于

的底部-感谢您将其向下滚动。然后，是的，正如Nawed Khan所说，将从$.ajax到//End ajax的所有内容都移动到getAmtValue中，就在您设置amt变量的正下方（另外，

让amt=…

，或者

常量amt=…

可能更好），我无法进行太多测试，因为它是一个本地服务器，但看看您的代码，它是区分大小写的，所以getElementById（'getAmt'））不是“getamt”。然后将所有Ajax代码直接移到该行下方（字面上是下一行）。

<script>
function getAmtValue(){
   var amt = document.getElementById("getAmt").value;
   console.log("Value from input : " + amt);

   $.ajax({
     type: "GET",
     url: "http://localhost:8080/orderNo?amount="  + amt ,

     xhrFields: {
        withCredentials: true
     },
     dataType : "json",
     success : function(data) {
        let text = "";
        for (let x in data) {           
          $('.order_amt').append("<br>" + data[x].amt + "<br>");
          $('.order_number').append("<br>" + data[x].order_no + "<br>");
          $('.order_date').append("<br>" + data[x].date + "<br>"):
        }
     }
   });//End AJAX

   return false;
};
</script>