javascript - 結算頁面，修改地址保存時如何防止頁面刷新？

第一步選擇付款方式，第二步如果用戶想修改地址時，修改後點擊保存，又要重新選擇付款方式和配送地址，用戶體驗很不好，很多時候用戶會覺得重複原來的動作，很麻煩，哪位知道如何防止頁面刷新呢，希望提供一些解決方案或思路，謝謝！

測試網址：http://www.daligxx.com/Checkout
測試帳號：18351816110
測試密碼：1111

截圖：

回覆內容：

第一步選擇付款方式，第二步如果用戶想修改地址時，修改後點擊保存，又要重新選擇付款方式和配送地址，用戶體驗很不好，很多時候用戶會覺得重複原來的動作，很麻煩，哪位知道如何防止頁面刷新呢，希望提供一些解決方案或思路，謝謝！

測試網址：http://www.daligxx.com/Checkout
測試帳號：18351816110
測試密碼：1111

截圖：

那個ajax做嘛，js模板之類的都可以
你覺得麻煩的話，其實還可以用個框架嵌套在裡面。

可以用ajax做，順帶把資料記錄到後台

那個位址的彈出層是個表單？ preventDefault()，然後用ajax提交就好了吧。

這不是一個典型的頁面局部刷新麼。 。 。

ajax 提交你的新地址，保存成功後，修改主頁的地址內容，就完啦。 。 。

不需要刷新頁面啊。 。 。 。

大體思路是使用ajax發起異步請求，發送資料給伺服器，讓伺服器端把資料保存到資料庫，然後再處理後續的邏輯。

看了下這個頁面是個表單，把表單使用preventDefault或jQuery事件中的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技術可以實現