javascript - How to prevent the page from refreshing when modifying the address and saving it on the settlement page?

The first step is to select the payment method. In the second step, if the user wants to modify the address, click Save after modification, and then have to re-select the payment method and delivery address. The user experience is very bad. Many times, users will feel that repeating the original action is very uncomfortable. Sorry, does anyone know how to prevent the page from refreshing? I hope to provide some solutions or ideas, thank you!

Test address: http://www.daligxx.com/Checkout
Test account: 18351816110
Test password: 1111

Screenshot:

Reply content:

The first step is to select the payment method. In the second step, if the user wants to modify the address, click Save after modification, and then have to re-select the payment method and delivery address. The user experience is very bad. Many times, users will feel that repeating the original action is very uncomfortable. Sorry, does anyone know how to prevent the page from refreshing? I hope to provide some solutions or ideas, thank you!

Test address: http://www.daligxx.com/Checkout
Test account: 18351816110
Test password: 1111

Screenshot:

As for ajax, it can be done with js templates or the like.
If you find it troublesome, you can actually use a framework to nest it inside.

You can use ajax to do it, and record the data to the background

The pop-up layer of that address is a form? preventDefault(), and then submit it using ajax.

Isn’t this a typical page partial refresh? . .

ajax Submit your new address. After saving successfully, modify the address content on the main page and you're done. . .

No need to refresh the page. . . .

The general idea isuse ajax to initiate an asynchronous request, send data to the server, let the server save the data to the database, and then process the subsequent logic.

I saw that this page is a form. Use preventDefault or return false in the jQuery event to prevent the form:

<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.ajaxPlease refer to the document "jQuery.ajax"

$.ajax, juqery’s ajax technology can achieve it