Проблема при вставке данных в базу данных с помощью ajax и php

Question

Я использовал Jquery и ajax для вставки данных в базу данных, я не могу вставить какую-либо запись в базу данных, используя ajax, jquery и php.Я думаю, что часть ajax работает, просто он не может сохранить данные в базу данных, в чем проблема с php.

 <!-- JavaScript and Ajax code -->
 <script>
  $(document).ready(function(){
  $('#addrecord').click(function(event){
  event.preventDefault();
  $.ajax({
   url: "new.php",
   type:"post",
   data: $("#addnewteamform").serialize(),
   success: function(data){
    $('form').trigger("reset");
   }
   });
   });
   });
   </script>

  <!-- HTML Plus Form code -->
  <form id="addnewteamform">
  <h4 style="font-family: Times New Roman, Times, serif;">ID</h4>
  <input class="form-control" name="id" id="id"  style="margin- 
  left:100px; 
  background: url(icons/id.png) no-repeat scroll 5px 5px; padding- 
  left:35px;
  border-radius: 6px 6px 6px 6px; width:360px; margin-top:-40px;"  
  type="text" placeholder="Your ID Here">
  <br>
  <h4 style="font-family: Times New Roman, Times, serif;">Name</h4>
  <input class="form-control" name="name"  style="margin-left:100px; 
   width:360px; background: url(icons/name2.png) no-repeat scroll 5px 
   5px; 
   padding-left:35px; border-radius: 6px 6px 6px 6px; margin-top:-40px;"  
  type="text" placeholder="Your Name Here">
  <br>
  <h4 style="font-family: Times New Roman, Times, serif;">Position</h4>
  <input class="form-control" name="position" style="margin-left:100px; 
  width:360px;  background: url(icons/position.png) no-repeat scroll 5px 
  5px; padding-left:35px; border-radius: 6px 6px 6px 6px; margin- 
  top:-40px; 
  "  type="text" placeholder="Your Position Here">
 <div class="custom-file"  style="margin-left:100px; width:360px; border- 
  radius: 6px 6px 6px 6px; margin-top:-40px;">
 <input type="file" name="teamimage"  class="custom-file-input" 
 id="customFile" >
 <label class="custom-file-label" for="customFile" style="background: 
 url(icons/upload.png) no-repeat scroll 5px 5px; padding-left:35px;">Upload 
 Image</label>
 </div>
 <h4 style="font-family: Times New Roman, Times, serif; margin- 
  top:-25px;">Image</h4>
 <br>
 <h4 style="font-family: Times New Roman, Times, serif;">Facebook</h4>
 <input class="form-control" name="fblink" style="margin-left:100px; 
  width:360px; border-radius: 6px 6px 6px 6px; margin-top:-40px; background: 
  url(icons/facebook.png) no-repeat scroll 5px 5px; padding-left:30px;"  
  type="text" placeholder="Your Facebook link Here"> 
 <br>
 <h4 style="font-family: Times New Roman, Times, serif;">Twitter</h4>
 <input class="form-control" name="twlink" style="margin-left:100px; 
 width:360px; border-radius: 6px 6px 6px 6px; margin-top:-40px; background: 
 url(icons/twitter.png) no-repeat scroll 5px 5px; padding-left:35px;""  
  type="text" placeholder="Your Twitter link Here"> 
 <br>
 <h4 style="font-family: Times New Roman, Times, serif;">Google Plus</h4>
 <input class="form-control" name="gplink" style="margin-left:100px; 
 width:360px; background: url(icons/googleplus.png) no-repeat scroll 5px 
 5px; padding-left:35px; border-radius: 6px 6px 6px 6px; margin-top:-40px;"  
 type="text" placeholder="Your Google Plus link Here"> 
<br>
<button type="submit" name="addrecord" id="addrecord" class="btn btn- 
 primary"  style="margin-left:100px;">Add Record</button>
   </form>

PHP-код -> страница new.php ->

   <?php
    include "Config.php";
    $id=$_POST['id'];
    $name=$_POST['name'];
    $position=$_POST['position'];
    $image=$_FILES['teamimage']['name'];
    $imagetmpname=$_FILES['teamimage']['tmp_name'];
    $folder='images/';
    move_uploaded_file($imagetmpname,$folder.$image);
    $fblink=$_POST['fblink'];
    $twlink=$_POST['twlink'];
    $gplink=$_POST['gplink'];
    $sql="INSERT INTO ourteam(id, name, position, image, facebook, 
    twitter, googleplus) VALUES 
    ('$id','$name','$position','$image','$fblink','$twlink','$gplink')";

   $result=mysqli_query($db,$sql);
   if($result)
   {
      echo "true";
   }else
   { 
    echo "false"; 
   }
   ?>

Пожалуйста, поясните, в чем проблема.спасибо.

Answer 1

1. В вашей форме нет элемента с идентификатором $ ('# addrecord'). Click (function (event) {})
2. Там есть только элемент, который является id, name, positionотправляет по ajax, но в php вы пытаетесь получить доступ.Вы не определили эти элементы в своем документе.Если вам нужны эти элементы, попробуйте сначала добавить их, а затем попытаться отправить данные на сервер.

С другой стороны, вы используете ajax и отправляете двоичный файл изображения, которого пока нет, но выиспользуя эти $ image = $ _ FILES ['teamimage'] ['name'];

В худшем случае попробуйте консольно записать в журнал ваше ajax return-сообщение и посмотреть, какая ошибка на самом деле отправляет php.

$fblink=$_POST['fblink'];
$twlink=$_POST['twlink'];
$gplink=$_POST['gplink'];
$image=$_FILES['teamimage']['name'];
$imagetmpname=$_FILES['teamimage']['tmp_name'];

Попробуйте использовать только три элемента.

<!DOCTYPE html>
<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
<body>

<!-- JavaScript and Ajax code -->
 <script>
  $(document).ready(function(){
  $('#addrecord').click(function(event){
  event.preventDefault();
  $.ajax({
   url: "new.php",
   type:"post",
   data: $("#addnewteamform").serialize(),
   success: function(data){

    console.log(data);
    $('form').trigger("reset");
   }
   });
   });
   });
   </script>

  <!-- HTML Plus Form code -->
 <form id="addnewteamform">
   <h4 style="font-family: Times New Roman, Times, serif;">ID</h4>
   <input class="form-control" name="id" id="id"  style="margin- 
      left:100px; 
      background: url(icons/id.png) no-repeat scroll 5px 5px; padding- 
      left:35px;
      border-radius: 6px 6px 6px 6px; width:360px; margin-top:-40px;"  
      type="text" placeholder="Your ID Here">
   <br>
   <h4 style="font-family: Times New Roman, Times, serif;">Name</h4>
   <input class="form-control" name="name"  style="margin-left:100px; 
      width:360px; background: url(icons/name2.png) no-repeat scroll 5px 
      5px; 
      padding-left:35px; border-radius: 6px 6px 6px 6px; margin-top:-40px;"  
      type="text" placeholder="Your Name Here">
   <br>
   <h4 style="font-family: Times New Roman, Times, serif;">Position</h4>
   <input class="form-control" name="position" style="margin-left:100px; 
      width:360px;  background: url(icons/position.png) no-repeat scroll 5px 
      5px; padding-left:35px; border-radius: 6px 6px 6px 6px; margin- 
      top:-40px; 
      "  type="text" placeholder="Your Position Here">
   <input type = "button" id = "addrecord" value = "submit"/>
</form>
</body>
</html>