我在引导模式中创建了一个窗体。我必须把数据输入mysql数据库。我已经安装了xammp服务器。我已经创建了一个表名table1。我的代码如下

function adddata() { 

    $("#areadetail").submit(function(e){
        e.preventDefault();
        var year = $("#year-input").val();
        var area = $("#area-input").val();
        var plntd = $("#planted-input").val();
        var ttl = $("#total-input").val();

        var dataForm = 'Year=' + year + '&area=' + area + '&planted=' + plntd + '&total=' + ttl;

        $.ajax({
            type: 'POST',
            url: 'insert.php',
            data: dataForm,
            success: function(html){
                if(html == "success"){
                    $('#table1').dataTable().reload();
                    $('#exampleModal').modal('toggle');
                }
            }
        });
    })
}

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
  <form id = "areadetail" method="post">
    <div class="modal-content">
      <div class="modal-header"> 
        <h5 class="modal-title" id="exampleModalLabel">Area details Data Entry Form</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <!-- ? -->

  <label for="year-input">Year</label>

    <input class="form-control" type="month" name = "year" value="" id="year-input" style = "width:200px ">

  <label for="area-input" >Area</label>

    <input class="form-control" type="number" name = "area" value="" id="area-input" style = "width:200px ">

  <label for="planted-input" >Planted</label>

    <input class="form-control" type="number" name = "planted" value="" id="planted-input" style = "width:200px ">

  <label for="total-input" >Total</label>

    <input class="form-control" type="number" name = "total" value="" id="total-input" style = "width:200px ">

</div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button id = "sub" type="submit" class="btn btn-primary" disabled="disabled" onclick = adddata();>Submit</button>
      </div>

    </div>
 </form>
</div>

我的php文件是

<?php
include("connection.php");

$Year    = mysqli_real_escape_string($_POST['year']);
$Area   = mysqli_real_escape_string($_POST['area']);
$Planted    = mysqli_real_escape_string($_POST['planted']);
$Total = mysqli_real_escape_string($_POST['total']);
$query   = "INSERT into table1 (year,area,planted,total) VALUES('" . $Year . "','" . $Area . "','" . $Planted . "','" . $Total . "')";

if(mysqli_query($query)){
    echo "Records added successfully.";
} else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($conn);
}

// close connection
mysqli_close($link);
?>

我把我的文件夹放到xammp的htdocs文件夹中。但当我点击提交按钮，它给我错误
jquery-3.1.1.min.js:4未能加载文件：///c://……./insert.php:跨源请求仅支持协议方案：http、data、chrome、chrome extension、https。