Question

我有一个经销商定位器，它由我们的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>

Answer 1

第一个如果你想动态更改html，你需要使用JavaScript和AJAX。也就是说，你异步加载东西。评论陈述XHR，这是

XmlHttpRequest

更好地直接寻找更方便的JQuery Ajax函数。 Jquery非常容易使用。使用id零售商

设置容器的html的示例

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

你只需要通过jquery ajax（{...}）获取html，其中大部分内容默认工作。只需设置您的web服务的URL和请求正文有效负载）然后去。在回调中你做了上面的事情，并且很好。

尝试一下 https://learn.jquery.com/ajax/

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

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

}); </script>

编写JQuery / JS代码。

Answer 2

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

    </div>

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

2 个答案: