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

Question

嗨，我正在尝试为一个个人项目创建一份调查，该项目正在从事教学自我网络开发的工作。 该调查是针对F1网站的，我希望能够向用户提出五个问题，并基于这些答案，我希望能够告诉他们最适合他们的大奖赛。

我对用户的问题是：

1. 什么大奖赛最接近您？ （我通过选择框为他们提供了选择3个大奖赛的选项）

2. 您想参观哪些国家？ （我通过选择框为他们提供了选择2个国家的选项）

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);
  }
});