javascript - 주소 수정 후 결제페이지에 저장시 페이지가 새로고침되는 것을 방지하려면 어떻게 해야 하나요?

첫 번째 단계는 결제 수단을 선택하는 것입니다. 두 번째 단계에서는 사용자가 주소를 수정하려는 경우 수정 후 저장을 클릭한 다음 결제 수단과 배송 주소를 다시 선택해야 합니다. 매우 안타깝고 사용자가 원래 작업을 반복하고 싶은 생각이 들 때가 많습니다. 페이지가 새로 고쳐지는 것을 방지하는 방법을 아는 사람이 있나요? 감사합니다.

테스트 주소: http://www.daligxx.com/Checkout
테스트 계정: 18351816110
테스트 비밀번호: 1111

스크린샷:

답글 내용:

첫 번째 단계는 결제 수단을 선택하는 것입니다. 두 번째 단계에서는 사용자가 주소를 수정하려는 경우 수정 후 저장을 클릭한 다음 결제 수단과 배송 주소를 다시 선택해야 합니다. 매우 안타깝고 사용자가 원래 작업을 반복하고 싶은 생각이 들 때가 많습니다. 페이지가 새로 고쳐지는 것을 방지하는 방법을 아는 사람이 있나요? 감사합니다.

테스트 주소: http://www.daligxx.com/Checkout
테스트 계정: 18351816110
테스트 비밀번호: 1111

스크린샷:

Ajax의 경우 js 템플릿 등을 사용하여 수행할 수 있습니다.
어려우면 실제로 프레임워크를 사용하여 내부에 중첩할 수 있습니다.

Ajax를 사용하여 백그라운드에 데이터를 기록할 수 있습니다

저 주소 팝업레이어가 폼인가요? PreventDefault()를 적용한 다음 ajax를 사용하여 제출합니다.

이것은 일반적인 페이지 부분 새로고침이 아닌가요? . .

Ajax에서 새 주소를 제출한 후 메인 페이지에서 주소 내용을 수정하면 완료됩니다. . .

페이지를 새로 고칠 필요가 없습니다. . . .

일반적인 아이디어는 ajax를 사용하여 비동기 요청을 시작하고, 서버에 데이터를 보내고, 서버가 데이터를 데이터베이스에 저장하도록 한 후 후속 로직을 처리하는 것입니다.

이 페이지가 양식임을 확인한 후 jQuery 이벤트에서 preventDefault 또는 return false을 사용하여 양식을 차단하세요.

<code class="javascript">//在引入jQuery的情况下
$('form').on('submit', function (e) {
    var userNickName = $('uNickName').val(),//获取收件人姓名
        userPhone = $('uPhone').val(),//获取联系人手机号
        userAddress = $('uAddress').val();//获取详细地址

    //验证是否合法，如果不合法直接return false并弹出相应的错误提示

    //进行ajax保存用户填写的信息
    $.ajax({
        dataType: 'json',//表示服务器端返回的数据格式
        contentType: 'application/json',
        data: { un: userNickName, up: userPhone, ua: userAddress },//异步发送给后端
        success: function () {
            //请求成功后的处理
        },
        error: function () {
            //请求失败的处理
        }
    });

    //阻止表单提交（jQuery已经把兼容性封装好了）
    return false;
});</code>

jQuery.ajax"jQuery.ajax" 문서를 참고하세요

$.ajax, juqery의 ajax 기술이 이를 가능하게 합니다