没有在PHP中接收ajax

时间:2018-03-26 11:06:27

标签: javascript php ajax

alert Data

我的PHP没有收到当我更改输入值时发送的ajax数据,因为我的PHP在我的脚本之前运行(index.html包含test.js),如果是这样,如何解决问题或者是它是我失踪的其他东西吗?

PHP和HTML在同一个文件中,因为我需要使用PHP中的值

test.js

$(document).ready(function() {
    var date = "";
    var begin = "";
    var eind = "";
    var aantal = "";

    $('#datum').change(function() {
        date = $("#datum").val();
        console.log(date);
    });
    $('#beginTijd').change(function() {
        begin = ($(this).val());
        console.log(begin);
    });
    $('#Tijdsduur').change(function() {
        eind = ($(this).val());
        console.log(eind);
    });
    $('#aantalSloepen').change(function() {
        aantal = ($(this).val());
        console.log(aantal);

        $.ajax({
            url: "index.php",
            type: "POST",
            data: {
                date: begin,
                quantity: aantal
            },
            success: function(data) {
                console.log(begin, aantal);
            }
        });
    });
});

的index.php

<html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
      <meta name="theme-color" content="#ffffff">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="style.css">
      <script src="script.js"></script>
      <script src="test.js"></script>
      <title>reserveren</title>
    </head>
    <body>
      <div id="BeschikbaarheidReserveren">
        <hr id="hrOne"><hr id="hrTwo"><hr class="hrActive" id="hrThree"><br>
        <h3>Beschikbaarheid &#38; Reserveren</h3>
        <div id="tableHeader">
          <img src="images/GJ_arrow-left.png" alt="left arrow">
          <img src="images/GJ_arrow-right.png" alt="right arrow">
          <h2 id="vestiging">Utrecht</h2>
        </div>
        <img id="gif" src="http://moziru.com/images/pointer-clipart-animated-gif-7.gif" alt="">
        <div class="container">
    <div class="fixed-th-table-wrapper">
    <!-- fixed-th-table -->
    <table>
        <tr>
             <th class="TableGreenJoyGreen"></th>
             <td class="TableGreenJoyGreen">9u</td>
             <td class="TableGreenJoyGreen">10u</td>
             <td class="TableGreenJoyGreen">11u</td>
             <td class="TableGreenJoyGreen">12u</td>
             <td class="TableGreenJoyGreen">13u</td>
             <td class="TableGreenJoyGreen">14u</td>
             <td class="TableGreenJoyGreen">15u</td>
             <td class="TableGreenJoyGreen">16u</td>
             <td class="TableGreenJoyGreen">17u</td>
             <td class="TableGreenJoyGreen">18u</td>
             <td class="TableGreenJoyGreen">19u</td>
             <td class="TableGreenJoyGreen">20u</td>
             <td class="TableGreenJoyGreen">21u</td>
        </tr>
        <tr>
             <th>Ma, 26/02/2018</th>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
        </tr>
            <tr>
             <th>Di, 27/02/2018</th>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
        </tr>
                <tr>
             <th>Wo, 28/02/2018</th>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
        </tr>
                <tr>
             <th>Do, 01/03/2018</th>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
        </tr>
                <tr>
             <th>Vr, 02/03/2018</th>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
        </tr>
                <tr>
             <th>Za, 03/03/2018</th>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
        </tr>
                <tr>
             <th>Zo, 04/03/2018</th>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
        </tr>
    </table>
    </div>

    <div class="scrolled-td-table-wrapper">
    <!-- scrolled-td-table
         - same as fixed-th-table -->
    <table>
        <tr>
             <th class="TableGreenJoyGreen"></th>
             <td class="TableGreenJoyGreen"> 9u</td>
             <td class="TableGreenJoyGreen">10u</td>
             <td class="TableGreenJoyGreen">11u</td>
             <td class="TableGreenJoyGreen">12u</td>
             <td class="TableGreenJoyGreen">13u</td>
             <td class="TableGreenJoyGreen">14u</td>
             <td class="TableGreenJoyGreen">15u</td>
             <td class="TableGreenJoyGreen">16u</td>
             <td class="TableGreenJoyGreen">17u</td>
             <td class="TableGreenJoyGreen">18u</td>
             <td class="TableGreenJoyGreen">19u</td>
             <td class="TableGreenJoyGreen">20u</td>
             <td class="TableGreenJoyGreen">21u</td>
        </tr>
        <tr>
             <th>Ma, 26/02/2018</th>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
        </tr>
            <tr>
             <th>Di, 27/02/2018</th>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
        </tr>
                <tr>
             <th>Wo, 28/02/2018</th>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
        </tr>
                <tr>
             <th>Do, 29/02/2018</th>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
        </tr>
        <tr>
             <th>Vr, 01/03/2018</th>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
        </tr>
        <tr>
             <th>Za, 02/03/2018</th>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
        </tr>
        <tr>
             <th>Zo, 03/03/2018</th>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
        </tr>
    </table>
    </div>

    <div id="wrap">
        <div id="fp1"><div class="circleBase type1"></div><p>Beschikbaar</p></div>
        <div id="fp2"><div class="circleBase type2"></div><p>Enkelen beschikbaar</p></div>
        <div id="fp3"><div class="circleBase type3"></div><p>Uitverkocht</p></div>
        <div id="fp4"><div class="circleBase type4"></div><p>Niet beschikbaar</p></div>
    </div>
    </div>

    <form action="betalen.php" method="post" id="form1">
       <label for="date">Datum*</label>
      <span>
      <input name="datum" type="date" id="datum" required>
      </span>
      <br>

      <label for="beginTijd">BeginTijd*</label>
      <span>
      <select name="beginTijd" id="beginTijd" required>
      <option value="09:00">9u</option>
      <option value="10:00">10u</option>
      <option value="11:00">11u</option>
      <option value="12:00">12u</option>
      <option value="13:00">13u</option>
      <option value="14:00">14u</option>
      <option value="15:00">15u</option>
      <option value="16:00">16u</option>
      <option value="17:00">17u</option>
      <option value="18:00">18u</option>
      <option value="19:00">19u</option>
      <option value="20:00">20u</option>
      <option value="21:00">21u</option>
    </select></span><br>


    <label for="">Tijdsduur*</label>
    <span>
    <select name="Tijdsduur" id="Tijdsduur" required>
      <option value="2:00">2 uur varen</option>
      <option value="3:00">3 uur varen</option>
      <option value="4:00">4 uur varen</option>
      <option value="5:00">5 uur varen</option>
      <option value="6:00">6 uur varen</option>
      <option value="9:00">gehele dag varen (9.00-18.00)</option>
      <option value="12:00">gehele dag varen + avond (9.00-22.00)</option>
    </select></span><br>


    <label for="">Aantal sloepen*</label>
    <span>
    <select name="aantalSloepen" id="aantalSloepen" required>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
    </select></span><br>
    <label for="">Aantal personen per sloep*</label>
    <span>
    <select name="aantalPersonenPerSloep" id="aantalPersonenPerSloepSelect" required>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
    </select><a href="javascript:void(0)" title="Persoon per sloep Info" data-toggle="popover" data-placement="left" data-content="Aantal personen (per sloep), NB: maximaal 540KG aan balast in totaal.">
      <img src="images/info-alt.svg" alt="info">
    </a>
    </span><br>
    <label for="">Vouchercode*</label>
    <span>
    <input name="VoucherCode" type="text">
    <a href="javascript:void(0)" title="Vouchercode Info" data-toggle="popover" data-placement="left" data-content="Heeft u een voucher of kortingscode ? Voer deze hier in
    Heeft u een kadobon of huurtegoed vul hier dan niets in. Zodra u het email adres onderin invult wordt de kadobon/tegoed verrekend">
    <img src="images/info-alt.svg" alt="info">
    </a>
    </span>
    <br>
    <label class="containerTest">Ik ga akkoord met de 
      <a href="http://greenjoy.nl/algemene-voorwaarden/">algemene voorwaarden</a>*    
      <input name="algemevoorwaardenCheckbox" type="checkbox" required>
      <span class="checkmark"></span>
    </label>
    <br><br>
    <label class="containerTest">Borgsom €150.00 - verplicht*
      <input name="borgCheckbox" type="checkbox">
      <span class="checkmark"></span>
    </label>
        <a href="javascript:void(0)" title="Borg Info" data-toggle="popover" data-placement="left" data-content="De borg bedraagt 150 euro. Je ontvangt deze, als er geen schade is geconstateerd, na het varen weer retour per bank.">
      <img src="images/info-alt.svg" alt="info">
    </a>
      <br><br>
    <label class="containerTest">aanmelden nieuwsbrief en aanbiedingen (2,50 extra korting)
      <input name="nieuwsbriefCheckbox" type="checkbox">
      <span class="checkmark"></span>
    </label>
    <br   />
    <p>Verplicht veld*</p>
      <input type="hidden" name="action" value="form1">

    </form>

    <button id="submitButton" type="submit" form="form1">Volgende ></button>
    <?php
    if (!empty($_POST['date'])) {
        echo "Yes, mail is set";    
        $value1= $_POST['date'];  
        $value2= $_POST['quantity'];     
    }else{  
        echo "No, mail is not set";
    }
    echo $value1; 
    echo $value2;
    $canmakereservation = "https://www.planyo.com/rest/?method=can_make_reservation&api_key=YOURKEY&resource_id=110556&start_time=2018-04-25 09:00&end_time=2018-04-25 12:00&quantity=5";
            $cleancanmakereservation = preg_replace("/ /", "%20", $canmakereservation);
            $reservationavailable = file_get_contents("$cleancanmakereservation");
            $reservationAvailable = json_decode($reservationavailable, true);
            // echo "$cleancanmakereservation";
            // var_dump($reservationAvailable);
    ?>
    </div>
    <div id="footer">
      <h3>Uw huurprijs exlusief borg: € 240,00</h3>
      <p>Dit is momenteel de laagste prijs.<br>
          - Langer varen = meer voordeel <br>
          - Vertrek voor 11.00u en na 17.00u = extra voordeel
      </p>
    </div>
    </body>
    </html>

1 个答案:

答案 0 :(得分:0)

解决方案 - 1

有时您必须使用Jquery的On方法,请参阅此处:enter link description here所以您的代码应该是以下内容

$('#aantalSloepen').on("change",function() {
    aantal = ($(this).val());
    console.log(aantal);

    $.ajax({
        url: "index.php",
        type: "POST",
        data: {
            date: begin,
            quantity: aantal
        },
        success: function(data) {
            console.log(begin, aantal);
        }
    });
});

antoher解决方案当用户更改输入值时,检查您的Ajax是否正常工作,为此您可以添加警报以检查它是否正常工作......

解决方案 - 1 使用提示

尝试此ajax代码
$('#aantalSloepen').change(function() {
    aantal = ($(this).val());
    console.log(aantal);
    alert(aantal);
    $.ajax({
        url: "index.php",
        type: "POST",
        data: {
            date: begin,
            quantity: aantal
        },
        success: function(data) {
            console.log(begin, aantal);
        }
    });
});

现在,当用户更改值

时,它将显示警告

解决方案 - 2:检查浏览器的开发人员工具

打开开发人员工具按 CTRL + SHIFT + I 现在单击“网络”选项卡 See Image Here 现在改变输入框的值它应该显示你的index.php如果是你的ajax正常工作,如果没有那么你的ajax有错误