通过ajax和php将数据插入数据库中的问题

时间:2018-12-23 06:55:47

标签: javascript php jquery mysql ajax

我使用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"; 
   }
   ?>

请明确问题所在。谢谢。

1 个答案:

答案 0 :(得分:0)

  1. 您的表单中没有ID为$('#addrecord')。click(function(event){})的元素
  2. 只有一个id,name,position由ajax发送的元素,但是在php中您试图访问。您尚未在文档中定义这些元素。如果您需要这些元素,请尝试先添加,然后尝试将数据发送到服务器。

另一方面,您正在使用ajax并发送仍然不存在的图像二进制文件,但是您正在使用这些$ image = $ _ FILES ['teamimage'] ['name'];

在最坏的情况下,请尝试控制台记录您的ajax返回消息,并尝试查看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>