Не в состоянии хранить данные в MySQL, используя ajax

Question

Я пытаюсь сохранить детали своей формы в базе данных, используя PHP и Ajax.Включает в себя текстовые поля и изображение.Мои данные не сохраняются в MySQL.Если я пытаюсь сохранить данные без Ajax, он работает отлично.Поэтому, пожалуйста, помогите мне в моем коде.

Вот как я сохраняю свои данные в базе данных:

// Create database connection
$db = mysqli_connect("localhost:8889","root","123","temp") or die("could not connect to server");

// If upload button is clicked ...

  $finame=$_POST['firstname'];
  $laname=$_POST['lastname'];
  $image_text = $_POST['image_text'];
  $template = $_POST['template'];
  $address = $_POST['address'];
  $email = $_POST['email'];
  $experience = $_POST['experience'];

   // Get image name
   $image = $_FILES['image']['name'];
   $directory = date("Y").'/'.date("m").'/'.date("d").'/';
  //If the directory doesn't already exists.
  if(!is_dir($directory)){
      //Create our directory.
      mkdir($directory, 755, true);
  }
   // image file directory
   $target = $directory.basename($image);

   $sql = "UPDATE person SET fname='$finame', sname='$laname', image='$image', about='$image_text', template='$template', address='$address', email='$email', experience='$experience'  where id=1";
   // execute query
   mysqli_query($db, $sql);
 ?>

Вот моя таблица в mysql:

CREATE TABLE `person` (
  `fname` varchar(30) DEFAULT NULL,
  `sname` varchar(30) DEFAULT NULL,
  `image` mediumblob NOT NULL,
  `about` varchar(10000) NOT NULL,
  `id` int(10) NOT NULL,
  `template` int(10) NOT NULL,
  `address` varchar(300) NOT NULL,
  `email` varchar(100) NOT NULL,
  `experience` varchar(1000) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

И это моя форма и скрипт:

<form enctype="multipart/form-data" id="frmBox" method="post">
<input type="text" name="firstname" id="fname" placeholder="First Name">
<input type="text" name="lastname" id="lname" placeholder="Last Name">
<input type="text" name="address" placeholder="Your address..." id="address">
<input type="file" name="image" id="image">
<textarea id="text" cols="30" rows="4" name="image_text" placeholder="Say something"></textarea></div>
<input type="radio" value="1" name="template" style="margin-left: 15px;">&nbsp; Template 1 &nbsp; &nbsp; 
<input type="radio" value="2" name="template">&nbsp; Template 2
<input type="text" name="email" placeholder="Your Email" id="email">
<textarea id="experience" cols="30" rows="4" name="experience" placeholder="Say something..."></textarea>
<h3 id="success"></h3>
<input type="submit" name="upload" class="sub-btn" value="submit">
</form>

<script type="text/javascript">
      $('document').ready(function(){
        $('#frmBox').submit(function(){
          $.ajax({
            type: 'POST',
            url: 'insert.php',
            data: $('#frmBox').serialize(),
            success: function(response){
              alert(response);
            }
          });
        });

          // var form = document.getElementById('frmBox').reset();

        });
</script>

Answer 1

Вы должны использовать preventDefault внутри скрипта, чтобы предотвратить отправку формы.После этого вы сможете передавать данные в ваш php-скрипт, кроме изображения.Вы можете использовать FormData для этой цели.Вот сценарий:

<script type="text/javascript">
    $('document').ready(function(){
        $('#frmBox').submit(function(e){
            e.preventDefault();
            var formData = new FormData(this);
            $.ajax({
                type: 'POST',
                url: 'insert.php',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response){
                    alert(response);
                }
            });
        });
    });
</script>