Javascript 在同一页的div中加载表单操作

我有一个经销商定位器，它是通过我们的IT部门管理的软件来实现的，我正试图稍微修改一下他们的代码，使其更加用户友好

我想做的是允许最终用户输入他们的邮政编码，让他们所在地区的经销商列表显示在同一页面上，而不是打开新的选项卡/窗口或重新加载页面

<div class="locator">
    <form method="get" id="dsearchform" action="http://www5.pacelink.com/paceweb/locatorframe.jsp?brand=SWEQ&zip=&&distance=50&numlocations=6&submit=Find+a+Dealer" target="_blank" alt="Pace Search - Sno-Way" onsubmit="return dsearch(this)" class="dealersearch">
        <input type="hidden" name="locatorBrand" value="SWEQ" />
        <input type="hidden" name="distance" value="100" /><input type="hidden" name="numlocations" value="6" />
        <h2>Sno-Way Dealer Locator:</h2>
        <h3 class="secondary">Enter your zip code below to find an authorized Sno-Way dealer near you!</h3>
        <div class="zip-entry">
        <input type="text" name="zip" placeholder="ZipCode" value="ZipCode" class="field" onfocus="if(this.value == 'ZipCode'){this.value='';}" onblur="if(this.value == ''){this.value='ZipCode';}"/>
        <input type="submit" name="submit" value="Search" id="button" class="but"/>
        </div>
    </form>     
</div>  

我是从这里发布的另一个解决方案中拼凑出来的，但我认为它根本不在正确的轨道上：

<div id="search">
    <form id="try" method="post" target="receiver" action="http://www5.pacelink.com/paceweb/locatorframe.jsp?brand=SWEQ&zip=&&distance=50&numlocations=6&submit=Find+a+Dealer">
       Zip: <input id="zip" name="zip" type="text" onfocus="if(this.value == 'ZipCode'){this.value='';}" onblur="if(this.value == ''){this.value='ZipCode';}"/>
       <input type="submit"/>
    </form>
    <div id="receiver">
        <?php if (isset($_POST['zip'])){
                  //display search results here.
              }
        ?>
    </div>
 </div>

第一 如果要动态更改html，需要使用JavaScript和AJAX。这就是，异步加载东西。注释声明XHR，这是

XmlHttpRequest

最好直接寻找更方便的jQueryAjax函数。 Jquery非常易于使用。 设置id为retailer的容器的html的示例

$('#retailer').html(response); // response is the html your php creates

您只需要通过jQueryAjax{…}获取html，默认情况下大部分内容都在jQueryAjax中工作。只需设置Web服务的url和请求正文有效负载，就可以了。在回调中执行上述操作，一切正常

试试看

在标题中包含jquery的脚本资源后，在html中

<script>$(document).ready(function(){
 // your code goes here

}); </script>

---

编写JQuery/JS。

到目前为止你做了什么？@DCruz22我开始摆弄这个解决方案：但我不认为这是为了完成我想要完成的事情。我将把我到目前为止拼凑的东西添加到我的原始帖子中，评论框太长了。首先想到的是。发布您的尝试和问题中出现的错误。或者，如果它适用于您的用例，请尝试使用iframe。您可以将表单设置为在页面上的任何iframe中显示结果操作。

<div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header" id="content-wrapper">
            <h1>
                Dashboard <small>${userType} </small>
            </h1>
        </section>

    </div>