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 db？

Answer 1

你的第一个问题就在这一行：

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

您有两种可能性：

将类型=＆＃34;提交＆＃34; 提交至输入=＆＃34;按钮＆＃34;
在 $（＆＃34; #sendbutton21＆＃34;）中使用event.preventDefault（）。click（function（）{

之后，可以更改您的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);
     }
});

＆＃13;

$("#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);
        }
    });
});

＆＃13;

<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>

＆＃13;

Answer 2

尝试https://jquery-form.github.io/form/插件，通过ajax示例代码轻松发送表单：

$('#post123').ajaxForm(function() {
       // SUCCESS CALLBACK
});

Answer 3

要提交表单而不刷新，请使用event.preventDefault()。

$("#sendbutton21").click(function(event) {
event.preventDefault();
    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.
});

Answer 4

而不是

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

使用

$("#post123").submit(function() {

使用文件提交表单而不刷新

4 个答案: