Как отправить эту форму в базу данных с помощью jquery?

Question

Вот код, который представляет данные в базе данных. работает отлично .

Как отправить эту форму с помощью jquery в базу данных, не обновляя страницу.

Пожалуйста, помогите мне с этим кодом, чтобы я мог понять логику этого и позже использовать в моем проекте.

HTML:

<form action="" method="post" id="reply" enctype="multipart/form-data"> 
    <div class="input-group"> 
     <input type="file" name="image" class="file" id="imgInp"/> 
     <input type="text" placeholder="say something" class="form-control" name="comment"/><br/> 
     <span class="input-group-btn"> 
      <button class="btn btn-info" type="submit" name="submit">comment</button> 
     </span> 
    </div> 
</form> 

PHP:

$con = mysqli_connect("localhost","root","","hotwall") or die("unable to connect to internet"); 

$user = $_SESSION['user_email']; 
$get_user = "SELECT * FROM users WHERE user_email = '$user'"; 
$run_user = mysqli_query($con, $get_user); 

$row = mysqli_fetch_array($run_user); 

$user_id = $row['id']; 
$user_name = $row['user_name']; 
$post_slug = $row['post_slug']; 


if(isset($_POST['submit'])){ 
    global $con; 
    global $user_id; 
    $comment = $_POST['comment']; 
    $post_image = $_FILES['image']['name']; 
    $image_tmp = $_FILES['image']['tmp_name']; 

    move_uploaded_file($image_tmp,"images/$post_image"); 
    $insert ="INSERT INTO comments (post_id, post_image, user_id, comment, author_name) VALUES ('$post_slug', '$post_image', '$user_id', '$comment', '$user_name')"; 

    $run = mysqli_query($con,$insert); 
} 

Answer 1

Что-то, как это будет делать трюк:)

$("form#reply").submit(function(){ // on form submit 
    var vals = $(this).serialize(); // get all the form values 

    $.ajax({ 
     url: "postpage.php", // page in which the php is 
     method: "post", 
     data: vals, // you can access the values in php like you normally 
        // would (using the names of the individual input fields) 
     success: function(){ // if post is successful 
      alert("success!"); // alert "success!" 
     } 
    }); 

    return false; // prevent page refresh 
}); 

Вы должны сделать PHP в другом файле, чтобы его работали эффективно.

Answer 2

На кнопку мыши/отправить событие подключить к Ajax вызова JQuery.

http://api.jquery.com/jquery.ajax/

$.ajax({ 
     type: "POST", 
     url: "save_the_form.php", 
     data: { 
      var1: value1, 
      var2: value2, 
     }, 
     success: function(feedback) { 
      // DO SOMETHING 
     } 
    }); 

Затем просто настроить файл «save_the_form.php», чтобы сделать сохранить и материал базы данных и, возможно, бросить некоторую обратную связь.

Answer 3

Это будет в основном что-то вроде этого с помощью JQuery:

JQuery:

$.ajax({ 
     type: "POST", 
     url: FORM_ACTION_PATH, 
     data: { 
      submit: { 
      comment: value, 
      file: value2 
      } 
     }, 
     success: function(retval) { 
      // show success message 
     } 
    }); 

Непроверенные код PHP:

<?php 
    if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { 
      if (isset($_POST["submit"]) && ! empty($_POST["submit"])) { 

      handle_upload(); 

      } 
    } 

    function handle_upload() { 
     global $con; 
     global $user_id; 
     $comment = $_POST['comment']; 

     $post_image = $_FILES['image']['name']; 
     $image_tmp = $_FILES['image']['tmp_name']; 

     move_uploaded_file($image_tmp,"images/$post_image"); 
     $insert =" insert into comments (post_id,post_image,user_id,comment,author_name) values('$post_slug','$post_image','$user_id','$comment','$user_name') "; 
     $run = mysqli_query($con,$insert); 

     return $run; 
    } 
?> 

Answer 4

Вам нужно попробовать вот так. Вам нужно отправить форму с помощью ajax, и вы передаете файл с вашей формой, тогда вам нужно добавить еще один параметр в ajax.

$("#submitAjax").click(function(event){ 
    event.preventDefault(); // Stop page to refresh 
    var formData = new FormData($(this).closest("form")[0]); 
    $.ajax({ 
      url:'URL_OF_YOU_PHP_FILE', 
      type:'POST', 
      contentType: false,  
      cache: false,    
      processData:false, 
      data: formData, 
      success:function(data){ 
      //Success 
      console.log(data); 
     }) 
}) 

Изменение вас кнопка HTML добавить id атрибут

<button class="btn btn-info" id="submitAjax" type="submit" name="submit">comment</button>