如何實時比較來自 ajax 調用數據庫的數據值與 html 輸入值

Question

我嘗試比較兩個數據值。 通過 ajax jquery 調用從數據庫中獲取一個值

function marketbuyshow(){

  $.ajax({
          type: "GET",
          url: "/showmarketbuydata",
          dataType: "json",
          success: function (response) {

   $("#balance").html("");
            $.each(response.balancedata,function(key,item){
              $('#balance').append('<span>'+item.mybalance+'</span>');
                      
            });

另一個從輸入值中獲取。 我有這個表格用於數據輸入，價格/金額/總輸入

                  <form>
                          <div class="title"> </div>
                          <div >Avaliable Balance : <span id="balance"></span></div>
                        <div class="mb-3">
                          <label for="">Price</label>
                          <input type="text" id="price" required class="price form-control" />
                        </div>
                        <div class="mb-3">
                          <label for="">Amount</label>
                          <input type="text" id="amount" required class="amount form-control" />
                        </div>
                        <div class="mb-3">
                          <label for="">Total</label>
                          <input type="text" id="total" required class="total form-control" readonly />
                         
                        </div>
                        <button type="submit" id="btnn" class="btn btn-primary marketbuy">Buy</button>
                      </form>  

如果總值大於可用余額，我想通過 jquery 禁用購買按鈕，如下所示，但此余額值不起作用。 雖然在前端顯示數據，但它以空字符串傳遞，無法實時比較。

 let balan = $('#balance').val();
       console.log(balan);
       let total = $('#total').val();
       console.log(total);
if(total >balan){
         console.log($('#total').val());
         $("#btnn").attr("disabled", true);
       }else{
       // console.log("total is less than ");
        $("#btnn").attr("disabled", false);
       }

如何實時獲取余額值，並在輸入表單中輸入總值時進行比較。 我怎樣才能做到這一點。 請有人幫助我。

Answer 1

跨度不會有 val()。 如果要使用 val()，請將其設為只讀輸入。 您還可以使用 .text() 來獲取跨度中的內容。

Answer 2

解決方案的總體思路：

對於實時，您可以考慮使用 Socket.io（HTML 版本）。 這樣，您將創建與服務器的直接雙向連接。 這樣，您可以在后端更改時將新值推送到客戶端。 任何時候你在輸入中寫入，你都可以在 onChange 中將用戶輸入與 Socke.io 推送的當前值進行比較，該值將不斷實時更新。

為什么我推薦Socket.io？

原諒我，我拆開了你的整個代碼，我知道這一點，但是，我想讓你知道對問題的處理略有不同。 Socket.io 是一個干凈的解決方案，因為服務器僅在該值實際更改時才與您聯系，因此客戶端您不需要長輪詢或類似的東西。

Answer 3

這是獲取跨度內容的示例：

https://jsfiddle.net/642s8nau/2/

<form>
  <div class="title"> </div>
  <div >Avaliable Balance : <span id="balance">1000</span></div>
  <div >Another Value : <span id="anotherValue">500</span></div>
  <button type="button" id="getValues" class="btn btn-primary">Compare Values</button>
</form>  
    
$(document).on("click", "#getValues", function (event) {
    alert(Number($("#balance").text()) > Number($("#anotherValue").text()));
});