亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

有沒有辦法在同一窗口中通過 ajax 提交從單獨頁面加載的表單?

有沒有辦法在同一窗口中通過 ajax 提交從單獨頁面加載的表單?

富國滬深 2023-03-18 16:58:21
我有這個表格:<form method="post" action="/cart" id="ajax">  {...}  <div>  {{ product.option | hidden_option_input }}  </div>  <button name="submit" type="submit" title="add to cart">Add to Cart</button></form>表單通過 ajax 加載到頁面,其操作頁面也通過 ajax 在導航欄中的不同鏈接中預加載。我想提交表單,但阻止它在提交時打開新頁面。我該怎么做?我試過了:<a href="/cart" class="new_popup mfp-ajax" onclick="this.parentNode.submit();return false;">Add to Cart</a>替換按鈕,但即使我試圖用“return false”來否定默認行為;它仍然會在點擊時重新加載新頁面。我可以在新頁面加載之前看到鏈接的彈出窗口,但在新頁面出現之前它不會提交。我相信這是因為當用戶單擊指向它的鏈接時,表單是通過 ajax 加載的,因此我不能專門將腳本附加到它,因為直到它出現在屏幕上,它在技術上并不存在。
查看完整描述

1 回答

?
aluckdog

TA貢獻1847條經驗 獲得超7個贊

如果我理解您的問題,您只想更新當前頁面的一部分。如果是這樣,您將不得不為此使用 AJAX:


保留“提交”按鈕,但將其設為標準按鈕并為其指定一個 ID,例如“提交”:


<button id="submit" name="submit" title="add to cart">Add to Cart</button>

然后您的 JavaScript 將按如下方式處理按鈕上的點擊事件:


$(function() {

    let submit = $('#submit');

    submit.click( function() { //

        submit.prop('disabled', true); // prevent a re-submission

        var form = $('#ajax');

        var request = $.ajax({

            url: form.attr('action'), // get the action from the form

            type: form.attr('method'), // get the method from the from

            dataType: 'html', // the assumption is that we are dealing HTML here

            data: form.serialize()

        });


        request.done(function(ajaxResult) {

            // update the DOM with the results

            $('#some_div').html(ajaxResult); // replace contents of <div id="some_div"></div> with new html

            submit.prop('disabled', false); // re-enable the submit

        });


    });

});

您必須安排發回的結果只是需要更新的 HTML。


更新


自回復以來,您添加了一條帶有鏈接的評論,表明我可能誤解了您的意圖。您使用的短語“提交表單但在提交時阻止它打開新頁面”絕對可以使人理解我的原始解釋。


查看完整回答
反對 回復 2023-03-18
  • 1 回答
  • 0 關注
  • 125 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號