Hướng dẫn reload a div using javascript - tải lại một div bằng javascript

Question

<div id='here'></div>

Tôi đang cố gắng làm mới một div nhất định trong một loạt các div. Nội dung DIV về cơ bản được tạo bởi PHP cùng với dữ liệu từ cơ sở dữ liệu MySQL ngoài nhiều biến được gửi với sự trợ giúp của XMLHTTPREQUEST.

Nội dung chính Show

Sử dụng <script type='text/javascript'> function updateDiv() { document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ; } </script> 1 trong <script type='text/javascript'> function updateDiv() { document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ; } </script> 2 để tải lại <script type='text/javascript'> function updateDiv() { document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ; } </script> 3 trong JavaScript
Sử dụng <script type='text/javascript'> function updateDiv() { document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ; } </script> 4 với <script type='text/javascript'> function updateDiv() { document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ; } </script> 2 để tải lại <script type='text/javascript'> function updateDiv() { document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ; } </script> 3 trong JavaScript
Ở đây, quầy của chúng tôi được thay đổi sau mỗi 3 giây. Do chụp màn hình, tỷ lệ thời gian có thể ít nhất là 3 giây, nhưng nó suy ra rằng quá trình này đang hoạt động.
Ví dụ này có thể là một ví dụ tốt trong đó chúng tôi có một mảng nội dung để hiển thị trên trang web sau một số lần nhất định. Giả sử, chúng tôi có nhiều <script type='text/javascript'> function updateDiv() { document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ; } </script> 3 để trình bày và sau mỗi lần đếm ngược thời gian đầy đủ, chúng tôi sẽ thay đổi chỉ số mảng.
Làm cách nào để làm mới một phần tử div?
Làm thế nào để bạn tải lại một đối tượng trong JavaScript?
Làm cách nào để tải lại một div mà không tải lại toàn bộ trang?
Làm cách nào để tải một div?

Ý tưởng là tải lại/làm mới chính DIV và không tải tệp PHP hoặc ghi đè lên nó bằng .text hoặc .html. Trong trường hợp này, tôi không thể sử dụng

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

0

Những gì tôi đã thử:

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

và (cứ sau 3 giây):

$(document).ready(function () {
    setInterval(function () {
        $('#here').load('#here'));
    }, 3000);
});

Lý tưởng nhất là tôi sẽ yêu cầu một cái gì đó như:

function reloadDIV () {document.getElementById("here").innerHTML.reload}

function reloadDIV () {$('#here').load(self)}

để tôi có thể sử dụng nó trong một onclick:

<a onclick='reloadDIV ();'>reload div</a>

Làm cách nào để tải lại một div mà không tải lại toàn bộ trang?
Dùng cái này. $ (' #mydiv'). Load (document.url + '#Mydiv');
Làm cách nào để tải một div?

Để tải HTML bên ngoài vào A, hãy quấn mã của bạn bên trong hàm Tải (). Để tải một trang trong div trong jQuery, hãy sử dụng phương thức load ().

Sử dụng

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

1 trong

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

2 để tải lại

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

3 trong JavaScript

Sử dụng

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

4 với

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

2 để tải lại

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

3 trong JavaScript

Ở đây, quầy của chúng tôi được thay đổi sau mỗi 3 giây. Do chụp màn hình, tỷ lệ thời gian có thể ít nhất là 3 giây, nhưng nó suy ra rằng quá trình này đang hoạt động.

Sử dụng

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

4 với

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

2 để tải lại

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

3 trong JavaScript

Trong phần này, chúng tôi sẽ một lần nữa sử dụng hàm

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

2 và lần này là tham số chúng tôi sẽ vượt qua

<a onclick='reloadDIV ();'>reload div</a>

6. Cân nhắc thêm một không gian trước khi biểu thị

<a onclick='reloadDIV ();'>reload div</a>

7.

Phần tổng thể này sẽ thực hiện như các ví dụ khác được giải thích.

Một cách khác mà chúng tôi sẽ làm theo là theo dõi thời gian giới hạn sau khi chúng tôi muốn làm mới

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

3. Trong trường hợp này, chúng tôi sẽ yêu cầu một thuộc tính động đơn giản trong HTML để hợp tác với giới hạn thời gian do người dùng xác định.

Điều này có vẻ không dành riêng như JQuery từ ____ 12, nhưng có thể tương đối dễ dàng để đối phó với thông qua JavaScript. Hãy để nhảy vào các khối mã.

Sử dụng <script type='text/javascript'> function updateDiv() { document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ; } </script> 1 trong <script type='text/javascript'> function updateDiv() { document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ; } </script> 2 để tải lại <script type='text/javascript'> function updateDiv() { document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ; } </script> 3 trong JavaScript

Phân đoạn quan trọng nhất trong ví dụ này là thuộc tính

$(document).ready(function () {
    setInterval(function () {
        $('#here').load('#here'));
    }, 3000);
});

3 sẽ lấy phiên bản

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

3 được nhắm mục tiêu. Chúng tôi sẽ tải một phần của trang web với

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

3 chứ không phải toàn bộ phần.

Ban đầu, chúng tôi sẽ có

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

3 với thẻ

function reloadDIV () {document.getElementById("here").innerHTML.reload}

function reloadDIV () {$('#here').load(self)}

4 để tính khung thời gian (để kiểm tra xem nó có hoạt động tốt không). Sau đó, chúng tôi sẽ lấy một ví dụ của

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

3 (

function reloadDIV () {document.getElementById("here").innerHTML.reload}

function reloadDIV () {$('#here').load(self)}

6) để sử dụng hàm

function reloadDIV () {document.getElementById("here").innerHTML.reload}

function reloadDIV () {$('#here').load(self)}

7.

Trong hàm

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

2, tham số của chúng tôi sẽ là

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

1, đề cập đến đường dẫn của trang web hiện tại. Và liên kết với

function reloadDIV () {document.getElementById("here").innerHTML.reload}

function reloadDIV () {$('#here').load(self)}

6

$(document).ready(function () {
    setInterval(function () {
        $('#here').load('#here'));
    }, 3000);
});

3 sẽ phân bổ đích và làm mới nó.

Mã mã:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div>
   <div id="here">dynamic content <span id='off'>9</span></div>
   <div>ABC</div>
</div>
<script>
   $(document).ready(function(){
       var counter = 9;
   window.setInterval(function(){
    counter = counter - 3;
     if(counter>=0){
       document.getElementById('off').innerHTML=counter;
     }
     if (counter===0){
       counter=9;
     }
     $("#here").load(window.location.href + " #here" );
   }, 3000);
   });
</script>

Output:

Ở đây, quầy của chúng tôi được thay đổi sau mỗi 3 giây. Do chụp màn hình, tỷ lệ thời gian có thể ít nhất là 3 giây, nhưng nó suy ra rằng quá trình này đang hoạt động.

Sử dụng <script type='text/javascript'> function updateDiv() { document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ; } </script> 4 với <script type='text/javascript'> function updateDiv() { document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ; } </script> 2 để tải lại <script type='text/javascript'> function updateDiv() { document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ; } </script> 3 trong JavaScript

Trong phần này, chúng tôi sẽ một lần nữa sử dụng hàm

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

2 và lần này là tham số chúng tôi sẽ vượt qua

<a onclick='reloadDIV ();'>reload div</a>

6. Cân nhắc thêm một không gian trước khi biểu thị

<a onclick='reloadDIV ();'>reload div</a>

7.

Phần tổng thể này sẽ thực hiện như các ví dụ khác được giải thích.

Mã mã:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div>
   <div id="here"> again dynamic content <span id='off'>3</span></div>
   <div>ABC</div>
</div>
<script>
   $(document).ready(function(){
       var counter = 3;
   window.setInterval(function(){
    counter--;
     if(counter>=0){
       document.getElementById('off').innerHTML=counter;
     }
     if (counter===0){
       counter=3;
     }
   $("#here").load(" #here > *");
   }, 1000);
   });
</script>

Output:

Ở đây, quầy của chúng tôi được thay đổi sau mỗi 3 giây. Do chụp màn hình, tỷ lệ thời gian có thể ít nhất là 3 giây, nhưng nó suy ra rằng quá trình này đang hoạt động.

Sử dụng

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

4 với

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

2 để tải lại

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

3 trong JavaScript

Trong phần này, chúng tôi sẽ một lần nữa sử dụng hàm

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

2 và lần này là tham số chúng tôi sẽ vượt qua

<a onclick='reloadDIV ();'>reload div</a>

6. Cân nhắc thêm một không gian trước khi biểu thị

<a onclick='reloadDIV ();'>reload div</a>

7.

Phần tổng thể này sẽ thực hiện như các ví dụ khác được giải thích.

Sử dụng

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

7 để làm mới

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

3 trong JavaScript

Ở đây, chúng tôi sẽ lấy một

<script type='text/javascript'>
    function updateDiv()
    { 
        document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
    } 
</script>

3 và đặt thuộc tính

$(document).ready(function () {
    setInterval(function () {
        $('#here').load('#here'));
    }, 3000);
});

3 của nó. Trong phần tập lệnh, chúng tôi sẽ làm cho đồng hồ đếm của chúng tôi hoạt động.

Output:

Ví dụ này có thể là một ví dụ tốt trong đó chúng tôi có một mảng nội dung để hiển thị trên trang web sau một số lần nhất định. Giả sử, chúng tôi có nhiều <script type='text/javascript'> function updateDiv() { document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ; } </script> 3 để trình bày và sau mỗi lần đếm ngược thời gian đầy đủ, chúng tôi sẽ thay đổi chỉ số mảng.

Do đó, chúng tôi sẽ có một cách năng động để đối phó với nhiều nội dung.

Trong ví dụ dưới đây, chúng tôi đã tìm được bất kỳ dữ liệu mảng nào như vậy. Thay vào đó chúng tôi chỉ bắt đầu chu kỳ đồng hồ. Hãy để kiểm tra hàng rào mã để xem trước tốt hơn.

<div>
    The DIV below will refresh after <span id="cnt" style="color:red;">7</span> Seconds
</div>
</body>
<script>
var counter = 7;
    window.setInterval(function () {
        counter--;
        if (counter >= 0) {
            var span;
            span = document.getElementById("cnt");
            span.innerHTML = counter;
        }
        if (counter === 0) {
            counter = 7;
        }

    }, 1000);
  </script>

Làm cách nào để làm mới một phần tử div?

Cách chung để tải lại hoặc làm mới là điều chỉnh hàm onload hoặc kích hoạt toàn bộ trang web ...

Sử dụng window.location.href in .load () để tải lại div trong javascript ..

Sử dụng "#Id> *" với .load () để tải lại div trong javascript ..

Sử dụng window.setInterval () để làm mới một div trong javascript ..

Làm thế nào để bạn tải lại một đối tượng trong JavaScript?

Nó có thể được thực hiện như được đưa ra dưới đây: Tải lại

Làm cách nào để tải lại một div mà không tải lại toàn bộ trang?

Dùng cái này.$ (' #mydiv'). Load (document.url + '#Mydiv');$('#mydiv'). load(document. URL + ' #mydiv');

Làm cách nào để tải một div?

Để tải HTML bên ngoài vào A, hãy quấn mã của bạn bên trong hàm Tải ().Để tải một trang trong div trong jQuery, hãy sử dụng phương thức load ().wrap your code inside the load() function. To load a page in div in jQuery, use the load() method.

programming javascript Window reload Auto refresh element Angular reload element