javascript - 使用 Javascript 和 Ajax 从 php 文件获取数据

Question

您好，我正在尝试为一个个人项目创建一个调查，我正在致力于该项目的自学网络开发。该调查是针对 F1 网站的，我希望能够向用户提出五个问题，并根据这些答案我希望能够告诉他们什么大奖赛最适合他们。

我向用户提出的问题是:

1. 哪场大奖赛离您最近？ (我已经给了他们选择通过使用选择框来选择 3 个大奖赛)

2. 您想去哪些国家？ (我已经给了他们通过使用选择框来选择 2 个国家/地区的选项)

3. 你什么时候可以参加大奖赛(我已经给了他们通过选择框选择 3 个月的选项)

4. 你最喜欢的球队是哪支？ (使用选择框的一个选项)

5. 您最喜欢的车手是谁？ (使用选择框的一个选项)

到目前为止，我已经创建了一个数据库，其中包含国家、大奖赛、月份、团队和驱动器的表格。

我有一个 Survey.php 文件，用于填充数据库中的选择框。

所以我的问题是如何创建一个 JavaScript 文件并将其链接到 php 文件，以便它填充选择框以获取用户的输入并显示结果，而无需使用 Ajax 刷新页面？

My Survey.php 


    <?php

    $link = mysqli_connect("localhost","student","student");
    mysqli_select_db($link,"gpdb");


    //question 1
    $query = "SELECT * from gp";
    $result = mysqli_query($link,$query);
    $row = mysqli_fetch_assoc($result);
    ?>

    <div class="Circuits">
    <h1>Which Grand Prix's are closest to you<h1>
    <form action="<?php $_SERVER['PHP_SELF']; ?>" method="get" >
    <p>Option 1</p>
    <select name="GrandPrix">
    <?php do { ?>    
                <option value="<?php echo $row['Circuits'];  ?>"><?php echo                        
    $row['Circuits'];  ?></option>
            <?php } while ($row = mysqli_fetch_assoc($result)); ?>
         </select>


    <?php
    $query = "SELECT * from gp";
    $result = mysqli_query($link,$query);
    $row = mysqli_fetch_assoc($result);
    ?>


    <p>Option 2</p>
    <select name="GrandPrix2">
    <?php do { ?>    
                <option value="<?php echo $row['Circuits'];  ?>"><?php echo           
    $row['Circuits'];  ?></option>
        <?php } while ($row = mysqli_fetch_assoc($result)); ?>
    </select>

    <?php
    $query = "SELECT * from gp";
    $result = mysqli_query($link,$query);
    $row = mysqli_fetch_assoc($result);
    ?> 

    <p>Option 3</p>
    <select name="GrandPrix3">
    <?php do { ?>    
                <option value="<?php echo $row['Circuits'];  ?>"><?php echo         
    $row['Circuits'];  ?></option>
        <?php } while ($row = mysqli_fetch_assoc($result)); ?>
    </select><br />
    </form>
    </div>

    <?php
    $query = "SELECT * from place";
    $result = mysqli_query($link,$query);
    $row = mysqli_fetch_assoc($result); 
    ?>

    <div class="Country"
    <h1>What countries would you like to visit?</h1>
    <p>Country 1</p>
    <select name="Country1">
    <?php do { ?>
        <option value="<?php echo $row['Location']; ?>"><?php echo     
    $row['Location']; ?></option>
            <?php } while ($row = mysqli_fetch_assoc($result)); ?>
      </select>

    <?php
    $query = "SELECT * from place";
    $result = mysqli_query($link,$query);
    $row = mysqli_fetch_assoc($result); 
    ?>
    <p>Country 2</p>
    <select name="Country1">
    <?php do { ?>
        <option value="<?php echo $row['Location']; ?>"><?php echo     
    $row['Location']; ?></option>
            <?php } while ($row = mysqli_fetch_assoc($result)); ?>
      </select>
    </div>



    <?php
    $query = "SELECT * from month";
    $result = mysqli_query($link,$query);
    $row = mysqli_fetch_assoc($result);
    ?>

    <div class="month">
    <h1>When are you available to go to a grand prix</h1>
     <p>Month 1</p>
    <select name="Month">
    <?php do { ?>    
                <option value="<?php echo $row['monthofgp'];  ?>"><?php echo     
      $row['Location']; ?></option>
        <?php } while ($row = mysqli_fetch_assoc($result)); ?>
    </select>

    <?php
    $query = "SELECT * from month";
    $result = mysqli_query($link,$query);
    $row = mysqli_fetch_assoc($result);
    ?>
    <p>Month 2</p>
    <select name="Month">
    <?php do { ?>    
                <option value="<?php echo $row['monthofgp'];  ?>"><?php echo     
    $row['monthofgp'];  ?></option>
        <?php } while ($row = mysqli_fetch_assoc($result)); ?>
    </select>

    <?php
    $query = "SELECT * from month";
    $result = mysqli_query($link,$query);
    $row = mysqli_fetch_assoc($result);
    ?>
    <p>Month 3</p>
    <select name="Month">
    <?php do { ?>    
                <option value="<?php echo $row['monthofgp'];  ?>"><?php echo 
   $row['monthofgp'];  ?></option>
        <?php } while ($row = mysqli_fetch_assoc($result)); ?>
    </select><br />
     </div>


    <div class="Driver">   
    <?php
    $query = "SELECT * from teamName";
    $result = mysqli_query($link,$query);
    $row = mysqli_fetch_assoc($result);
    ?>

    <h1>What is favourite team?</h1>

     <p>Team</p>
    <select name="taem">
    <?php do { ?>    
                <option value="<?php echo $row['Team'];  ?>"><?php echo 
    $row['Team'];  ?></option>
        <?php } while ($row = mysqli_fetch_assoc($result)); ?>
    </select><br />
    </div>



    <div class="Driver">
    <?php
    $query = "SELECT * from driverName";
    $result = mysqli_query($link,$query);
    $row = mysqli_fetch_assoc($result);
    ?>

    <h1>Who is your favourite driver?</h1>

     <p>Driver</p>
     <select name="taem">
    <?php do { ?>    
                <option value="<?php echo $row['Driver'];  ?>"><?php echo    
    $row['Driver'];  ?></option> 
        <?php } while ($row = mysqli_fetch_assoc($result)); ?>
        </select><br />
    </div>


    <input type="submit" />
    <input type="reset" />

    </form> 

Answer 1

使用 jquery 验证来验证此表单...它很简单，但对我来说很难解释。

对于没有帖子页面的情况，请保存此数据...1.制作一个php函数来保存数据..2.使用ajax/jquery调用此函数..

示例代码在这里...

$.ajax({
  type: 'GET',
  url: "Your Function Path/Url",
  crossDomain: 'true',
  success:
  function (data){
  // here alert your function response..
  alert(data);
  }
});