如何使用ajax將javascript中的變量傳遞給php

Question

我試圖用ajax從html的選擇列表中傳遞選定的月份。 但是每次我選擇一個月時，它都不會出現。 在我選擇一個月之前，因為沒有if else條件，所以沒有“什么”，那么當我選擇一個月時，“什么都沒有”這個詞消失了，但是沒有獲取任何變量。 這是我的JavaScript代碼：

$('#button-search-ohr').on('click', function() {
    var month = $('#monthChoose').val();

    if(month == 0) {
        alert('Month must be choosen!');
    }

    $.ajax({
        async   : true,
        type    : 'POST',
        url     : '<?php echo base_url();?>sms/lapkinerjastat', 
        data    : {month:month},
        success : function(data) {
            $('#month').html(data);
        }
    });
}

這是html和php

<h5 class="pilih-bulan">Month Choose
     <select id="monthChoose" name="month">
          <option value="0">Pilih bulan</option>
          <option value="Januari">Januari</option>
          <option value="Februari">Februari</option>
          <option value="Maret">Maret</option>
          <option value="April">April</option>
          <option value="Mei">Mei</option>
          <option value="Juni">Juni</option>
          <option value="Juli">Juli</option>
          <option value="Agustus">Agustus</option>
          <option value="September">September</option>
          <option value="Oktober">Oktober</option>
          <option value="November">November</option>
          <option value="Desember">Desember</option>
     </select>
     <button id="button-search-ohr" type="submit">Search</button>
</h5>    

<div id="month">
     <?php 
     if(isset($_POST['month'])) {
          $month = $_POST['month'];
          echo 'This is '.$month;
     }else {
          $month = null;
          echo 'Nothing';
     }?>
</div>

如何在JavaScript中傳遞變量以將其存儲在php中的正確方法？

編輯：我意識到我寫了錯誤的url ，我只是用javascript編輯了url 。 它成功傳遞了變量，但頁面變成了兩倍。 在這里，我得到了屏幕截圖。 選擇月份之前（請注意“無”）

選擇月份后（請注意“ This is Februari”）

Answer 1

編輯答案

當您單擊按鈕時，您將提交表單，以便您在同一頁面上被重定向。

嘗試這個 ：

$('#button-search-ohr').on('click', function(e) { // Add the "e" in your function
    // You stop the submit
    e.preventDefault();
    e.stopPropagation();

    var month = $('#monthChoose').val();

    if(month == 0) {
        $('#month').html('Nothing');
         alert('Month must be choosen!');
    } else {
        $('#month').html('This is ' + month);
    }
}

並替換：

<div id="month">
     <?php 
     if(isset($_POST['month'])) {
          $month = $_POST['month'];
          echo 'This is '.$month;
     }else {
          $month = null;
          echo 'Nothing';
     }?>
</div>

由：

<div id="month">
    Nothing
</div>

您無需在同一頁面上進行Ajax調用即可更改div的內容。 只需從“無”切換到“這是” +所選月份。

這是向您展示的摘錄：只需單擊您的按鈕，內容就會發生變化：

 $('#button-search-ohr').on('click', function(e) { // Add the "e" in your function // You stop the submit e.preventDefault(); e.stopPropagation(); var month = $('#monthChoose').val(); if(month == 0) { $('#month').html('Nothing'); alert('Month must be choosen!'); } else { $('#month').html('This is ' + month); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h5 class="pilih-bulan">Month Choose <select id="monthChoose" name="month"> <option value="0">Pilih bulan</option> <option value="Januari">Januari</option> <option value="Februari">Februari</option> <option value="Maret">Maret</option> <option value="April">April</option> <option value="Mei">Mei</option> <option value="Juni">Juni</option> <option value="Juli">Juli</option> <option value="Agustus">Agustus</option> <option value="September">September</option> <option value="Oktober">Oktober</option> <option value="November">November</option> <option value="Desember">Desember</option> </select> <button id="button-search-ohr" type="submit">Search</button> </h5> <div id='month'> Nothing </div>