javascript - 单击按钮时显示外部网页内容

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

        }});
    });