通過iframe進行外部POST表單

Question

我正在嘗試獲取一個包含POST表單的頁面，以將其加載到iframe中，以便用戶能夠確認諸如刪除列表之類的操作。 我已經成功地將JS和表單頁面加載到iframe中，但是當我單擊表單中的操作時，它並沒有更新列表。 相反，它只是刷新頁面。

該表單可以正常工作，因為如果我嘗試在瀏覽器中手動訪問content-url並更新表單，則可以正常工作。

如何才能刷新iframe內容而不是父頁面並在iframe本身內部加載響應？ 我到底在做什么錯？

任何幫助表示贊賞！

這是我的代碼：

HTML：

<button class="myclass" content-url="<?php bloginfo('siteurl') ?>/?a_action=delete_auction&pid=<?php the_ID(); ?>">Delete Me</button>
               <div class="popup"><iframe id="mynewiframeid" name="myframename" src=""></iframe></div>

JS：

  $(document).ready(function() {      
  $(document).click(function(e) {
      if ($(".popup").is(":visible")) {
        $(".popup").fadeOut("fast")
      }
  });

 $(".myclass").click(function() {
      if (!$(".popup").is(":visible")) {
        $('#mynewiframeid').attr('src',$(this).attr('content-url'));
        $(".popup").fadeIn("slow");
      }
      return false;
  });

  $(".popup").click(function(e) {
      e.stopPropagation()
  })
 });

形成：

  <div class="popup_content"> 
            <h3> You are about to delete <b><?php echo $title; ?></b>!</h3>
            <?php
            if(isset($_POST['yes_confirm']))
            {
                $s = "update ".$wpdb->prefix."posts set post_status='trash' where id='$pid'";
                $wpdb->query($s);
                echo '<div class="deleted_item_ok">';
                printf(__('Your item has been deleted successfully!'));
                echo '</div>';
            }
            else
            {
    ?>
            <form method="post">
            <div class="are_you_sure_delete">
            <?php
            _e('Are you sure you want to delete this item?');
            ?>
            </div>
 <button class="button-small button-w-green" type="submit" id="submits" name="yes_confirm">Yes, Delete</button>
 <button class="button-small button-w-red" type="submit" id="submits" name="no_confirm">No!</button>
            </form>
            <?php } ?>
            </div>

Answer 1

您正在嘗試使用以下js代碼替換“ popup”類中的html。

HTML => <div class="popup"><iframe id="iframeid" src=""></iframe></div>
JS => $('.popup').html(response);

這會用響應替換上面HTML中的iframe元素。 因此，在收到響應后，頁面內沒有iframe。

如果您確實想使用iframe，我認為您不必處理AJAX。 相反，只需更改iframe的src。 您可以使用以下js代碼。

$(document).ready(function() {      
      $(document).click(function(e) {
          if ($(".popup").is(":visible")) {
            $(".popup").fadeOut("fast")
          }
      });

     $(".myclass").click(function() {
          if (!$(".popup").is(":visible")) {
            $('#iframeid').attr('src',$(this).attr('content-url'));
            $(".popup").fadeIn("slow");
          }
          return false;
      });

      $(".popup").click(function(e) {
          e.stopPropagation()
      })
  });

小提琴（帶有偽造的src網址）

Answer 2

首先，更正以下錯誤，然后查看是否有效：

1. 您的右括號后您缺少分號
2. 您關閉php標簽，然后在繼續輸入url之后，然后添加另一個關閉php標簽

3. 您正在尋找的是您的content-url中的以下內容：

   <?php bloginfo('siteurl') . '/?a_action=delete_auction&pid=' . $the_ID; ?>

   4. 什么是_ID（）？ 我沒有看到該功能。 如果存在，則必須返回將存儲在變量$ the_ID中的值。 您還必須在按鈕標記之前調用該函數以獲取該變量。
   5. 在您的JS中，您需要將所有內容包裝在$(document).ready(function() {}
   6. 似乎您正在嘗試執行GET請求而不是POST請求，因為您不是在正文中而是在url中發送任何數據
   7. 第一個.click函數末尾缺少分號
   8. 我什至沒有看所有其他的.click函數，因為這會導致某些重復，並且出現了更多奇怪的東西