javascript - Wie kann verhindert werden, dass die Seite aktualisiert wird, wenn die Adresse geändert und auf der Abrechnungsseite gespeichert wird?

Der erste Schritt besteht darin, die Zahlungsmethode auszuwählen. Wenn der Benutzer im zweiten Schritt die Adresse ändern möchte, klickt er nach der Änderung auf „Speichern“ und muss dann die Zahlungsmethode und Lieferadresse erneut auswählen Sehr schlecht, und oft möchte der Benutzer die ursprüngliche Aktion wiederholen. Weiß jemand, wie er die Aktualisierung der Seite verhindern kann?

Testadresse: http://www.daligxx.com/Checkout
Testkonto: 18351816110
Testpasswort: 1111

Screenshot:

Antwortinhalt:

Der erste Schritt besteht darin, die Zahlungsmethode auszuwählen. Wenn der Benutzer im zweiten Schritt die Adresse ändern möchte, klickt er nach der Änderung auf „Speichern“ und muss dann die Zahlungsmethode und Lieferadresse erneut auswählen Sehr schlecht, und oft möchte der Benutzer die ursprüngliche Aktion wiederholen. Weiß jemand, wie er die Aktualisierung der Seite verhindern kann?

Testadresse: http://www.daligxx.com/Checkout
Testkonto: 18351816110
Testpasswort: 1111

Screenshot:

Für Ajax können JS-Vorlagen und dergleichen verwendet werden.
Wenn Sie es als problematisch empfinden, können Sie tatsächlich einen Frame verwenden, um es darin zu verschachteln.

Sie können dazu Ajax verwenden und die Daten im Hintergrund aufzeichnen

Die Popup-Ebene dieser Adresse ist ein Formular? präventDefault() und senden Sie es dann mit Ajax.

Ist das nicht eine typische teilweise Aktualisierung der Seite? . .

Ajax übermittelt Ihre neue Adresse. Nach erfolgreichem Speichern ändern Sie den Adressinhalt auf der Hauptseite und schon sind Sie fertig. . .

Die Seite muss nicht aktualisiert werden. . . .

Die allgemeine Idee besteht darin, Ajax zu verwenden, um eine asynchrone Anfrage zu initiieren, Daten an den Server zu senden, den Server die Daten in der Datenbank speichern zu lassen und dann die nachfolgende Logik zu verarbeiten.

Nachdem Sie festgestellt haben, dass es sich bei dieser Seite um ein Formular handelt, verwenden Sie preventDefault oder return false im jQuery-Ereignis, um das Formular zu blockieren:

<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.ajaxBitte beachten Sie das Dokument „jQuery.ajax“

$.ajax, die Ajax-Technologie von juqery kann dies erreichen