ajax jQuery 在瀏覽器頁面刷新時自動重新加載數據

Question

我如何使用 ajax jquery 將數據從選定的字段相關數據自動重新加載到輸入字段？ 它僅在我使用$("#id_books").change(function()時才有效！但我想在瀏覽器頁面刷新或頁面加載時加載數據....

創建-form.html

<select name="books" class="form-control" id="id_books">
  <option value="1" selected="">haxer</option>
  <option value="2">django</option>
  <option value="3">HCV</option>
  <option value="4">python</option>
  <option value="5">CBC</option>
</select>

<div class="form-group col-sm-2 text-center">
    <input class="form-control" type="text" name="price" id="priceData" readonly>
</div>

<script>
    $("#id_books").load(function () {
        var id = $(this).val();
        $.ajax({
            url: `http://localhost:8000/report/${id}`,
            data: { 'id': id },
            dataType: 'json',
            success: function (response) {
                if (response != null) {
                    $('#priceData').val(response.price);
                }
            }
        });
    });
</script>

Answer 1

嘗試使用$(document).ready() ，它會在頁面加載時觸發。 例如：

$(document).ready(function() {
      alert("Page has loaded!");
});

您很可能需要將代碼重構為$(this).val(); 不起作用（因為“this”不再是“#id_books”）

我還沒有測試以下內容（但它應該給你一個想法），請嘗試以下操作：

<script>
     $(document).ready(function() {
        loadData()
    });

    $("#id_books").change(function () {
        loadData()
    });

    function loadData()
    {
        var id = $("#id_books").val();
        $.ajax({
            url: `http://localhost:8000/report/${id}`,
            data: { 'id': id },
            dataType: 'json',
            success: function (response) {
                if (response != null) {
                    $('#priceData').val(response.price);
                }
            }
        });
    }
</script>