Question

很抱歉，如果之前已经问过这个问题，我已经查看了可用的资源，但仍未找到解决问题的方法。

我有一个输入字段，用户可以在其中输入他们的网站，关键字或行业，当他们点击时，他们会被重定向到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

        }});
    });

在按钮上显示外部网页内容单击

1 个答案: