Saya telah melihat pertanyaan ini muncul berkali-kali dan jawaban yang umum adalah melakukan preventDefault() atau return false tetapi sepertinya tidak ada yang berhasil untuk saya. Adakah yang bisa menunjukkan kepada saya apa yang mungkin saya lewatkan di sini?

$(document).ready(function() {
  $(".compareForm").submit(function(event) {
    event.preventDefault();
    console.log("Calling compare endpoint");
    $.ajax({
      url: "/compare",
      type: "GET",
      dataType: "JSON",
      data: {
        product_url: $(".inputClass").val(),
      },
      success: function(data) {
        console.log("success");
        if (window.location.href !== "./result.html") {
          window.location.href = "./result.html";
        }
      },
      error: function(xhr, statusText) {
        console.log("There was an erorr");
      }
    });
  });
});
<div class="container">
  <div class="button-search">
    <form class="compareForm">
      <div class="d-flex">
        <div class="border">
          <input type="text" class="inputClass" name="" placeholder="Paste the product URL here">
        </div>
        <button type="submit"> <span>Search</span><img src="./assets/images/icon-search.png" alt="Cartaygo"></button>
      </div>
    </form>
  </div>
</div>

Saya tidak tahu apa lagi yang harus saya lakukan di sini. Saya telah melakukan hal serupa seperti ini sebelumnya dan menggunakan tata letak yang sama persis ini dan berfungsi dengan baik (kecuali ini memiliki css yang lebih rumit). Tapi tetap menyegarkan.

Saya bisa melihat log sebelum halaman di-refresh jadi saya tahu itu sedang dipanggil. Saya hanya membutuhkannya untuk berhenti menyegarkan.

1
random123 12 Mei 2021, 10:36

2 jawaban

Jawaban Terbaik

Seperti yang Anda lihat, formulir tidak disegarkan dan acara "submit" dibatalkan. Sebaliknya, AJAX meminta data dan mencetak pesan kesalahan karena tidak dapat menemukan halaman.

Mungkin serangkaian peristiwa yang terjadi di tempat lain dalam kode yang menunjukkan perilaku ini.

$(document).ready(function() {
  $(".compareForm").submit(function(event) {
    event.preventDefault();
    console.log("Calling compare endpoint");
    $.ajax({
      url: "/compare",
      type: "GET",
      dataType: "JSON",
      data: {
        product_url: $(".inputClass").val(),
      },
      success: function(data) {
        console.log("success");
        if (window.location.href !== "./result.html") {
          window.location.href = "./result.html";
        }
        if (data.amazonProducts == null) {
          $(".result-recommendation").html("Sorry, we could not find any comparable products to this.");
        }
      },
      error: function(xhr, statusText) {
        console.log("There was an erorr");
      }
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="button-search">
    <form class="compareForm">
      <div class="d-flex">
        <div class="border">
          <input type="text" class="inputClass" name="" placeholder="Paste the product URL here">
        </div>
        <button type="submit"> <span>Search</span><img src="./assets/images/icon-search.png" alt="Cartaygo"></button>
      </div>
    </form>
  </div>
</div>

Seperti yang saya pahami dari komentar, "location.href" membawa Anda ke halaman baru (meskipun itu sama), dan Anda pikir elemen formulir menyebabkannya.

Sekali lagi, sejauh yang dapat saya simpulkan dari komentar Anda, "data.amazonProducts" data tidak boleh "null" untuk menunjukkan perilaku ini. Dalam hal ini, mari kita siapkan cuplikan baru.

$(document).ready(function() {
  $(".compareForm").submit(function(event) {
    event.preventDefault();
    console.log("Calling compare endpoint");
    $.ajax({
      url: "/compare",
      type: "GET",
      dataType: "JSON",
      data: {
        product_url: $(".inputClass").val(),
      },
      success: function(data) {
        console.log("success");
        if (data.amazonProducts === null) {
          $(".result-recommendation").html("Sorry, we could not find any comparable products to this.");
        } else {
          if (window.location.href !== "./result.html") {
            window.location.href = "./result.html";
          }        
        }
      },
      error: function(xhr, statusText) {
        console.log("There was an erorr");
      }
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="button-search">
    <form class="compareForm">
      <div class="d-flex">
        <div class="border">
          <input type="text" class="inputClass" name="" placeholder="Paste the product URL here">
        </div>
        <button type="submit"> <span>Search</span><img src="./assets/images/icon-search.png" alt="Cartaygo"></button>
      </div>
    </form>
  </div>
</div>

Dengan demikian, ia akan mengarahkan ulang halaman ketika mendeteksi bahwa data yang masuk bukan "null" dan halaman tempat pengguna berada bukan ".result.html".


Sedikit perbaikan "location.href" tidak pernah memberikan tautan relatif. Jadi mencoba menyinkronkan dengan "./result.html" dalam hal ini akan selalu menghasilkan false. Saya berasumsi Anda tahu bagian ini dan tidak menggunakan jalur relatif.

1
BOZ 12 Mei 2021, 07:59

Logika ini bekerja dengan baik. Masalahnya adalah fungsi check in

if (window.location.href !== "./result.html") {
          window.location.href = "./result.html";
        }

Selalu gagal dan akibatnya menyebabkan penyegaran setiap saat.

0
random123 12 Mei 2021, 08:02