表单 GET 请求被触发两次

Question

我有两个搜索框，一个用于桌面版，另一个用于移动版。在表单提交中，GET 请求触发了两次！我认为这是同一页面上两个相同表单的问题，但我删除了移动版本，但仍在表单提交上，它触发了两个 GET 请求。

桌面版：

<div class="col-12 col-md-7 header-search-box d-none d-sm-block">
    <form action="{{CxHelper.Route('eb-front-elastic-search')}}" method="GET" class="form-inline md-form mr-auto mb-4">
        <input class="form-control mr-sm-2 es"type="text" placeholder="Search" autocomplete="off" name="query" aria-label="Search">
        <button class="btn btn-elegant btn-rounded btn-info btn-sm my-0 waves-effect waves-light" type="submit">Search</button>
        <div class="es-matching-results" style="display: none"></div>
    </form>
</div>

手机版:

<div class="col-12 col-xs-7 header-search-box">
  <form action="{{CxHelper.Route('eb-front-elastic-search')}}" method="GET" class="form-inline md-form mr-auto mb-4">
      <input class="form-control mr-sm-2 es" type="text" placeholder="Search" autocomplete="off" name="query" aria-label="Search">
      <button class="btn btn-elegant btn-rounded btn-info btn-sm my-0 waves-effect waves-light" type="submit">Search</button>
      <div class="es-matching-results" style="display: none"></div>
  </form>
</div>

更新

下面是我的页脚代码，当我删除这段代码然后请求被触发一次但是这段代码有什么问题？

<section class="cx_headerfooter">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center" id="cx_desktop_brand">
                <img class="lazy" alt="as seen on" width="1050" height="121" src="#" data-src="{{ this.config['images_path'] ~ 'as_seen_on.jpg' }}?q=75&w=1050&h=121&auto=compress,format">
            </div>
            <div class="col-md-12 hidden-md hidden-lg" id="cx_mobile_brand">
                <div class="cx_as_seen">
                    <p>AS SEEN ON</p>
                    <img class="lazy" width="auto" height="auto" alt="fox" src="#" data-src="{{this.config['images_path'] ~ 'eb-assets/fox.jpg' }}?q=75&w=200&h=200&auto=compress,format">
                    <img class="lazy" width="auto" height="auto" alt="nbc" src="#" data-src="{{this.config['images_path'] ~ 'eb-assets/nbc.jpg' }}?q=75&w=200&h=200&auto=compress,format">
                    <img class="lazy" width="auto" height="auto" alt="abc" src="#" data-src="{{this.config['images_path'] ~ 'eb-assets/abc.jpg' }}?q=75&w=200&h=200&auto=compress,format">
                    <img class="lazy" width="auto" height="auto" alt="eye" src="#" data-src="{{this.config['images_path'] ~ 'eb-assets/eye.jpg' }}?q=75&w=200&h=200&auto=compress,format">
                    <img class="lazy" width="auto" height="auto" alt="shopnbc" src="#" data-src="{{this.config['images_path'] ~ 'eb-assets/shopnbc.jpg' }}?q=75&w=200&h=200&auto=compress,format">
                    <img class="lazy" width="auto" height="auto" alt="extra" src="#" data-src="{{this.config['images_path'] ~ 'eb-assets/extra.jpg' }}?q=75&w=200&h=200&auto=compress,format">
                </div>
            </div>
        </div>
    </div>
</section>
<div class="cx_footer">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <br>
                <img class="lazy" width="168" height="65" src="#" alt="logo" data-src="{{ this.config['images_path'] ~ 'logo.png' }}?q=75&w=168&h=65&auto=compress,format">
                <div class="cx_footer_section cx-footer-links-sect">
                    <span class="title">LINKS</span><br>
                        <ul>
                          <li><a href="{{CxHelper.Route('eb-front-terms-and-condition')}}">Terms &amp; Conditions</a></li>
                          <li><a href="{{CxHelper.Route('eb-front-privacy-policy-page')}}">Privacy Policy</a></li>
                          <li><a href="{{CxHelper.Route('eb-front-anti-spam-page')}}">Anti Spam</a></li>
                          <li><a href="{{CxHelper.Route('eb-front-acceptable-use-policy-page')}}">Acceptable Use Policy</a></li>
                          <li><a href="https://testhelp.zendesk.com/hc/en-us/requests/new">Contact Us</a></li>
                          <li><a href="{{CxHelper.Route('eb-front-test-product-catalog')}}">Product Catalog</a></li>
                        </ul>
                </div>
            </div>
            <div class="col-sm-4">
               <div class="cx_footer_section">
                   <span class="title cx-support-links">SUPPORT US</span><br>
                      <ul class="list cx-supports-links-2">
                        <li><a href="#" target="_blank">Visit Support Portal</a></li>
                        <li><a href="#" target="_blank">Submit a support request</a></li>
                      </ul>
                    <span class="title cx-contact-us-links">Contact Us</span><br>
                        <ul class="list">
                             <li>Test &amp; Wellness Center
                               701243-3534-73336</li>

                        </ul>
               </div>
            </div>
            <div class="col-sm-4">
                <div class="cx_footer_section BBB-footer-sect">
                   <div class="cx-BBB-sect">
                    <a href="#" target="_blank" rel="nofollow">
                    <img width="280" height="80" class="lazy" style="border: 0; margin-top: 30px;" src="#" data-src="#" alt="">
                    </a>
                   </div>
                    <ul class="list cx-social-links">
                        <li class="social-medias">
                            <ul class="list-inline">
                                <li class="list-inline-item">
                                    <a href="https://twitter.com/testdc" target="_blank" class="tw-icon"><i class="fa fa-twitter"></i></a>
                                </li>
                                <li class="list-inline-item">
                                    <a href="https://www.facebook.com/test" target="_blank" class="fb-icon"><i class="fa fa-facebook"></i></a>
                                </li>
                                <li class="list-inline-item">
                                    <a href="https://www.pinterest.com/test/" target="_blank" class="pt-icon"><i class="fa fa-pinterest"></i></a>
                                </li>
                                <li class="list-inline-item">
                                    <a href="https://www.youtube.com/user/test123?feature=mhee" target="_blank" class="yt-icon"><i class="fa fa-youtube"></i></a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 text-center cx_copyright">
                <p>
                Copyright © 2019 test.com All Rights Reserved. Site Map <br>
                Disclaimer: The dietary and other substances, and/or materials, equipment or devices discussed on this site may not have undergone evaluation and/or testing <br>
                by the United States Food and Drug Administration or like agency of any other country. Risks that might be determined by such testing are unknown. <br>
                <a href="{{CxHelper.Route('eb-front-earning-disclaimer-page')}}">Click here</a> to read the full disclaimer text.
                </p>
            </div>
        </div>
    </div>
</div>

请求和响应 Headers 第一个请求：

请求Header：

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Connection: keep-alive
Cookie: _ga=GA1.2.1038869862.1572978537; _fbp=fb.1.1572978537645.337701948; _hjid=f35155b8-85ae-44bf-ac27-bcca7379a1bb; contactId=2616322; _gid=GA1.2.794512768.1576330560; PHPSESSID=v6i7f8rmctajmu1fahalfd30qi; _hjIncludedInSample=1; iTracker360_2656=sou%3Dtest.loc%7Cmed%3Dreferral%7Cter%3D-%7Ccon%3D/connextar/%7Ccam%3Dreferral%7Cref%3Dhttp%253A//test.loc/search%253Fquery%253Dketo%7Cfirstlpurl%3Dhttp%253A//test.loc/connextar/test.dev.cx/%7Cgcl%3D%7Cgaclientid%3D%7Cleadsource%3D%7Cip%3D%7Ccustomfield1%3D-%7Ccustomfield2%3D-%7Ccustomfield3%3D-%7Ccustomfield4%3D-
Host: test.loc
Pragma: no-cache
Upgrade-Insecure-Requests: 1
User-AgeCache-Control: no-store, no-cache, must-revalidate
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8
Date: Wed, 25 Dec 2019 07:20:32 GMT
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive: timeout=5, max=100
Pragma: no-cache
Server: Apache/2.2.34 (Unix) mod_wsgi/3.5 Python/2.7.13 PHP/7.2.21 mod_ssl/2.2.34 OpenSSL/1.0.2o DAV/2 mod_fastcgi/mod_fastcgi-SNAP-0910052141 mod_perl/2.0.10 Perl/v5.24.0
Transfer-Encoding: chunked
X-Powered-By: PHP/7.2.21
nt: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36

回复Header：

Cache-Control: no-store, no-cache, must-revalidate
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8
Date: Wed, 25 Dec 2019 07:20:32 GMT
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive: timeout=5, max=100
Pragma: no-cache
Server: Apache/2.2.34 (Unix) mod_wsgi/3.5 Python/2.7.13 PHP/7.2.21 mod_ssl/2.2.34 OpenSSL/1.0.2o DAV/2 mod_fastcgi/mod_fastcgi-SNAP-0910052141 mod_perl/2.0.10 Perl/v5.24.0
Transfer-Encoding: chunked
X-Powered-By: PHP/7.2.21

第二次请求详情：

请求header：

Accept: image/webp,image/apng,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Connection: keep-alive
Cookie: _ga=GA1.2.1038869862.1572978537; _fbp=fb.1.1572978537645.337701948; _hjid=f35155b8-85ae-44bf-ac27-bcca7379a1bb; contactId=2616322; _gid=GA1.2.794512768.1576330560; PHPSESSID=v6i7f8rmctajmu1fahalfd30qi; _hjIncludedInSample=1; iTracker360_2656=sou%3Dtest.loc%7Cmed%3Dreferral%7Cter%3D-%7Ccon%3D/connextar/%7Ccam%3Dreferral%7Cref%3Dhttp%253A//test.loc/search%253Fquery%253Dketo%7Cfirstlpurl%3Dhttp%253A//test.loc/connextar/test.dev.cx/%7Cgcl%3D%7Cgaclientid%3D%7Cleadsource%3D%7Cip%3D%7Ccustomfield1%3D-%7Ccustomfield2%3D-%7Ccustomfield3%3D-%7Ccustomfield4%3D-
Host: test.loc
Pragma: no-cache
Referer: http://test.loc/search?query=keto
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36

回应header：

Cache-Control: no-store, no-cache, must-revalidate
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8
Date: Wed, 25 Dec 2019 07:20:33 GMT
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive: timeout=5, max=98
Pragma: no-cache
Server: Apache/2.2.34 (Unix) mod_wsgi/3.5 Python/2.7.13 PHP/7.2.21 mod_ssl/2.2.34 OpenSSL/1.0.2o DAV/2 mod_fastcgi/mod_fastcgi-SNAP-0910052141 mod_perl/2.0.10 Perl/v5.24.0
Transfer-Encoding: chunked
X-Powered-By: PHP/7.2.21

Answer 1

<img class="lazy" width="168" height="65" src="#" alt="Dr. Berg logo" data-src="{{ this.config['images_path'] ~ 'logo.png' }}?q=75&w=168&h=65&auto=compress,format">

每当浏览器加载网页时，它都会通过 src 解析图像以在页面上获取图像。由于您在网站图像上使用了延迟加载并在图像 src 中给出了 #，这可能是罪魁祸首。

使用 src="#" 解析图像的浏览器可能会向同一网页发出请求，在您的情况下是搜索页面。

此外，使用预览图像作为延迟加载图像的 src 始终是一个好习惯。

表单 GET 请求被触发两次

Form GET request is firing twice

php

forms

get

phalcon