單擊按鈕顯示外部網頁內容

Question

抱歉，如果您之前曾提出過此問題，我已經瀏覽了所有可用資源，但仍未找到解決問題的方法。

我有一個輸入字段，用戶可以在其中輸入他們的網站，關鍵字或行業，然后單擊“ go”將他們重定向到semrush.com以查看數據。

<form onsubmit="handlerSubmitForm(this);" class="widget-form" target="_parent" method="get" action="http://www.semrush.com/search.php">
        <input type="text" name="q" class="widget-form__input" placeholder="Domain, keyword or url">
        <input type="hidden" name="db" value="us">
                        <input type="hidden" name="ref" value="798325166">
                    <div class="widget-form__db">us</div>
        <button type="submit" class="widget-form__submit">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14.7 13.3l-3.7-3.7c.6-.9 1-2 1-3.1 0-3-2.5-5.5-5.5-5.5s-5.5 2.5-5.5 5.5 2.5 5.5 5.5 5.5c1.2 0 2.2-.4 3.1-1l3.7 3.7c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4zm-12.2-6.8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z"/></svg>
        </button>
    </form>

單擊按鈕后，是否可以通過任何方式在按鈕下方顯示此數據？ 而不是將其重定向到semrush.com頁面？

我了解可以使用iframe完成此操作，

<iframe id="myIframe" src="http://www.semrush.com/search.php" onLoad="iframeDidLoad();"></iframe>

但我不知道如何將輸入的數據添加到iframe src中。您可以在JSFiddle上查看當前代碼
任何幫助將不勝感激。

Answer 1

使用Ajax。 序列化表單數據並對該URL進行Ajax調用，然后使用返回的頁面填充iframe。

 $("button").click(function(){
        $.ajax(
        {
        url: "http://www.semrush.com/search.php", 
        type:'get',
        data: $( "form" ).serialize(), //find a way to serialize form data. 
        success: function(result){

          //result is the full html page returned from this url. Then you can put this in a iframe

        }});
    });