jquery에서 값을 수정한 후 페이지를 새로 고치는 기능을 구현하는 방법

웹 개발에서 jQuery는 프런트 엔드 페이지와 상호 작용하는 데 자주 사용됩니다. 일부 특별한 경우에는 JavaScript를 통해 페이지의 일부 데이터를 수정한 다음 페이지를 다시 로드하여 수정된 콘텐츠를 표시해야 합니다. 이 기능을 구현하는 데 사용할 수 있는 몇 가지 간단한 방법은 다음과 같습니다.

1. window.location.reload() 메서드 사용

이것은 가장 간단한 방법 중 하나입니다. 페이지를 다시 로드해야 할 경우 window.location.reload() 메서드를 호출하면 됩니다. 그러나 이 방법을 사용하면 모든 외부 스크립트와 리소스를 포함하여 전체 페이지가 다시 로드되므로 성능이 많이 소모됩니다.

2. jQuery.ajax() 메서드 사용

jQuery.ajax() 메서드를 사용하여 페이지에서 특정 콘텐츠를 가져온 다음 콘텐츠를 다시 로드할 수 있습니다. 예:

$(document).ready(function() {
$('#submit-form').on('click', function(event) {

// 防止表单默认提交
event.preventDefault();

// 获取表单中的数据
var formData = $('#form').serialize();

// 发送 jQuery Ajax 请求
$.ajax({
  url: '/update',
  type: 'POST',
  data: formData,
  success: function(data) {
    // 重新加载内容
    $('#result').html(data);
  }
});

});
});

사용자가 "submit-form" 요소를 클릭하면 기본적으로 양식이 제출되는 것을 방지하고 jQuery Ajax 메서드를 사용하여 양식 데이터를 가져와 서버 "/update" 주소로 보냅니다.

데이터가 성공적으로 업데이트되면 jQuery 성공 함수의 코드가 페이지의 데이터 요소를 다시 로드합니다.

3. JavaScript localStorage 사용

또 다른 방법은 JavaScript localStorage를 사용하는 것입니다. 다시 로드하려는 데이터를 localStorage에 저장할 수 있으며 페이지가 로드될 때 localStorage에 데이터가 포함되어 있는지 확인할 수 있습니다. 그렇다면 데이터를 다시 로드하십시오.

다음은 구현 단계입니다.

// localStorage에 데이터 저장
localStorage.setItem('myData', JSON.stringify(someData));

// 데이터가 있는지 확인하고 다시 로드
window.onload = function () {
var myData = localStorage.getItem('myData');
if (myData) {

// 重新加载数据
$('#data-container').html(JSON.parse(myData));

}
}

페이지가 로드되면 localStorage에 저장된 데이터가 있는지 확인합니다. 그렇다면 데이터를 다시 로드하십시오.

요약

위 방법 중 하나를 사용하면 수정된 데이터를 페이지에 쉽게 다시 로드하고 표시할 수 있습니다. 귀하의 애플리케이션 요구 사항에 맞는 방법을 선택할 수 있습니다. 전체 페이지를 다시 로드해야 한다면 window.location.reload를 사용하세요. 페이지의 일부를 로드해야 하는 경우 jQuery.ajax() 또는 localStorage를 사용하세요.

위 내용은 jquery에서 값을 수정한 후 페이지를 새로 고치는 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!