AJAX搜索表单

Question

我从html视图和ajax代码中获取以下搜索表单来处理表单请求

$(document).ready(function() {
    console.log('Ready');
    $('.search-wrapper').on('click', '#find-dates', function(a) {
      a.preventDefault();
      console.log('click');
      var t = $("#tour-id").val(),
        e = $("#travel-year").val(),
        o = $("#travel-month").val();
      console.log(t);
      console.log(e);
      console.log(o);
      $("#ajaxloader").show(), $.ajax({
        type: "GET",
        url: "/trip/fetch-departures",
        headers: {
          "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
        },
        data: {
          tour_id: t,
          year: e,
          month: o
        },
        success: function(a) {
          $(".ajaxloadmoredeparture").html(a), $("#ajaxloader").hide()
        }
      })
    })
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>

<div class="uk-container-expand ">
  <div class="uk-card uk-card-default uk-card-body ">
    <div uk-grid="" class="uk-child-width-1-4@m uk-child-width-1-1@s uk-grid-match uk-grid-small search-wrapper uk-grid">
      <div class="uk-first-column">
        <p>Please Check Available Dates for The Year:</p>
        <input type="hidden" value="1" id="tour-id">
      </div>
      <div>
        <select class="uk-select" id="travel-year">Select year
          <option value="" disabled="" selected="">Select year</option>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
        </select>
      </div>
      <div>
        <select class="uk-select" id="travel-month">Select Month
          <option value="" disabled="" selected="">Select Month</option>
          <option value="1">Jan</option>
          <option value="2">Feb</option>
          <option value="3">Mar</option>
          <option value="4">Apr</option>
          <option value="5">May</option>
          <option value="6">Jun</option>
          <option value="7">Jul</option>
          <option value="8">Aug</option>
          <option value="9">Sep</option>
          <option value="10">Oct</option>
          <option value="11">Nov</option>
          <option value="12">Dec</option>
        </select>
      </div>
      <div class="search-wrapper">
        <a href="#" class="uk-button uk-button-primary" id="find-dates">Search</a>
      </div>
    </div>
  </div>
</div>

上面的js代码在这里似乎工作正常。我可以在控制台中看到所有3个变量的数据。但是在我的开发服务器中 这两个变量返回null。

console.log(e); console.log(o); 我确实在项目文件中也包含了jquery cdn链接。 如果有人可以提出建议，我会一直错过我导致这种错误的内容，我将非常感激。

Answer 1

尝试使用$.getJSON代替$.ajax

查看此内容：https://cypressnorth.com/programming/cross-domain-ajax-request-with-json-response-for-iefirefoxchrome-safari-jquery/

$(document).ready(function() {
    console.log('Ready');
    $('.search-wrapper').on('click', '#find-dates', function(a) {
      a.preventDefault();
      console.log('click');
      var t = $("#tour-id").val(),
        e = $("#travel-year").val(),
        o = $("#travel-month").val();
      console.log(t);
      console.log(e);
      console.log(o);
      $("#ajaxloader").show(), $.getJSON({
        type: "GET",
        url: "/trip/fetch-departures",
        headers: {
          "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
        },
        data: {
          tour_id: t,
          year: e,
          month: o
        },
        success: function(a) {
          $(".ajaxloadmoredeparture").html(a), $("#ajaxloader").hide()
        }
      })
    })
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>

<div class="uk-container-expand ">
  <div class="uk-card uk-card-default uk-card-body ">
    <div uk-grid="" class="uk-child-width-1-4@m uk-child-width-1-1@s uk-grid-match uk-grid-small search-wrapper uk-grid">
      <div class="uk-first-column">
        <p>Please Check Available Dates for The Year:</p>
        <input type="hidden" value="1" id="tour-id">
      </div>
      <div>
        <select class="uk-select" id="travel-year">Select year
          <option value="" disabled="" selected="">Select year</option>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
        </select>
      </div>
      <div>
        <select class="uk-select" id="travel-month">Select Month
          <option value="" disabled="" selected="">Select Month</option>
          <option value="1">Jan</option>
          <option value="2">Feb</option>
          <option value="3">Mar</option>
          <option value="4">Apr</option>
          <option value="5">May</option>
          <option value="6">Jun</option>
          <option value="7">Jul</option>
          <option value="8">Aug</option>
          <option value="9">Sep</option>
          <option value="10">Oct</option>
          <option value="11">Nov</option>
          <option value="12">Dec</option>
        </select>
      </div>
      <div class="search-wrapper">
        <a href="#" class="uk-button uk-button-primary" id="find-dates">Search</a>
      </div>
    </div>
  </div>
</div>