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

在按钮上单击/提交事件挂钩jQuery ajax调用。

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>

如何使用jquery在数据库中提交此表单？

4 个答案: