代码之家 › 专栏 › 技术社区 › john

从用户输入号码到更新可用数量的jquery ajax调用

input ajax jquery

0

john · 技术社区 · 4 年前

使用jquery,我希望获得用户输入值和产品值,并将其传递到后端。一旦用户更改了输入值,就进行ajax调用,以访问java后端。我们需要传递产品编号和数量值,这将有助于根据数量和产品编号生成可用数量。谁能帮我做这件事吗?

<table id="myTable">
        <tr>
        <th>Product Line</th>
        <th >Quantity</th>
        <th>Available Quantity</th>
        </tr>
        <tr>
        <td id="product-number">test product <br> 56789</td>
        <td><input type="number" id="product-quantity" name="quantity" min="1" max="999"></td>
        <td id="available-quantity"></td>
        </tr>
        
    </table>

1 回复 | 直到 4 年前

1

jpneey 4 年前

您应该监听输入值的变化,然后运行ajax调用。然后在成功后,呈现后端的响应

<table id="myTable">
        <tr>
        <th>Product Line</th>
        <th >Quantity</th>
        <th>Available Quantity</th>
        </tr>
        <tr>
            <td id="product-number">test product <br> 56789</td>
            <td><input type="number" id="product-quantity" name="quantity" min="1" max="999"></td>
            <td id="available-quantity"></td>
        </tr>  
</table>

$(function(){
    $('#product-quantity').on('keyup', function() {
       // if input value is changed, run the ajax call here
       $.ajax({
          .... <- fill in all required details here such as url, method, etc.
          success: function (data) {
            // then on ajax success, display the results from your backend
            $('#available-quantity').html(data)
          }
       })
    })
})

关于如何通过jquery调用ajax的参考: https://api.jquery.com/jquery.ajax/