javascript - 提交带有文件的表单而不刷新

Question

大家好，我不知道如何在不刷新页面的情况下提交表单。这是我的代码:

我的表格:

    <form method="POST" id="post123" action="" enctype="multipart/form-data">
    <input class="form-control input-lg" name="book_name" id="inputLarge" type="text">

     <input class="form-control" name="book_price" type="number">

     <textarea class="form-control" id="exampleTextarea2" 
name="book_description" maxlength="100" rows="7"></textarea>

    <textarea class="form-control" name="book_content"  id="exampleTextarea4" maxlength="200" rows="7"></textarea>

    <input type="file" name="file" id="imgInp44" >

   <button type="submit" name='action' id="sendbutton21" value="post1" class="btn btn-primary">
                            Submit
                        </button>


    </form>

Javascript:

$("#sendbutton21").click(function() {

    var url = "http://localhost:5000/magazin_insert"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           data: $("#post123").serialize(), // serializes the form's elements.
           success: function(data)
           {

               alert(data); // show response from the php script.
           }
         });

    return false; // avoid to execute the actual submit of the form.
});

我如何修改我的代码以将文件连同文本一起提交到 mysql 数据库？

Answer 1

您的第一个问题在这一行中:

<button type="submit" name="action" ... />

你有两种可能:

• 将 type="submit" 更改为 type="button"
• 在您的 $("#sendbutton21").click(function() {
中使用 event.preventDefault()

之后，可以更改您的 ajax 调用以包含文件:

var form = document.getElementById('post123');
var formData = new FormData(form);
$.ajax({
     url: url,
     data: formData,
     type: 'POST',
     processData: false,
     success: function(data) {
         alert(data);
     }
});

$("#sendbutton21").click(function() {
    var url = "http://localhost:5000/magazin_insert"; // the script where you handle the form input.

    // for testing...
    url = 'https://api.github.com/repositories';

    var form = document.getElementById('post123');
    var formData = new FormData(form);
    $.ajax({
        url: url,
        data: formData,
        type: 'GET',
        processData: false,
        success: function (data) {
            console.log(data[0].id);
        }
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form method="POST" id="post123" action="" enctype="multipart/form-data">
    <input class="form-control input-lg" name="book_name" id="inputLarge" type="text">

    <input class="form-control" name="book_price" type="number">

     <textarea class="form-control" id="exampleTextarea2"
               name="book_description" maxlength="100" rows="7"></textarea>

    <textarea class="form-control" name="book_content"  id="exampleTextarea4" maxlength="200" rows="7"></textarea>

    <input type="file" name="file" id="imgInp44" >

    <button type="button" name='action' id="sendbutton21" value="post1" class="btn btn-primary">
        Submit
    </button>
</form>