验证表单字段并在成功完成后写入数据库

Question

我用 jQuery 写了一个小脚本。使用此脚本，如果单击“einen Schritt hinzufügen”按钮，您可以获得更多“步骤”。

现在，当我按下“erstellen”按钮时，我想检查是否所有字段都已填写，如果成功，则将数据写入数据库。

在 jQuery 对字段的验证完成后，如何连接 PHP 和 jQuery？

这里是示例页面：

MyPage

这里是代码（没有 CSS）：

<section>
    <article>
        <div class="step">
            <div class="header_step">Erstelle dein eigenes Tutorial</div>
            <div class="body_step">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        </div>
        <form method="post" action="index.php?content=create_tutorial">
        <div class="step">
            <div class="header_step">Allgemeines zum Tutorial</div>
            <div class="body_step">
                <a class="create_tutorial_a">Titel des Tutorial's</a><input class="create_tutorial_input"/>
                <br>
                <a class="create_tutorial_a">Autor des Tutorial's</a><input class="create_tutorial_input"/>
                <br><br>
                <a class="create_tutorial_a_full_width">Beschreibung des Schrittes</a>
                <br>
                <textarea class="create_tutorial_textarea"></textarea>
            </div>
        </div>
        
        <div class="all_steps">
            
        </div>
        
        <div class="step">
            <div class="body_step">
                <button class="create_button" type="submit" name="submit">Erstellen</button>
                <input type="button" class="create_button" id="add_step" value="Schritt hinzufügen"/>
                <input type="button" class="create_button" id="remove_step" value="Schritt entfernen"/>
            </div>
        </div>
        </form>
        
    </article>
    <div class="clearBoth"></div>
</section>



<script>
    $(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".all_steps"); //Fields wrapper
    var add_button      = $("#add_step"); //Add button ID
    var remove_step     = $("#remove_step");
    
    var x = 0; //initlal text box count
    $(add_button).click(function(){ //on add input button click
        if(x < max_fields){ //max input box allowed
            $(wrapper).append('<div class="step"><div class="header_step">Schritt '+ (x + 1) +' des Tutorial\'s</div><div class="body_step"><a class="create_tutorial_a">Titel des Schrittes</a><input name="input_title_name'+x+'" class="create_tutorial_input" /><br><a class="create_tutorial_a">Bild</a><input type="file" /><br><br><a class="create_tutorial_a_full_width">Beschreibung des Schrittes</a><br><textarea class="create_tutorial_textarea" name="input_description_name'+x+'"></textarea></div>');
            x++; //text box increment
        }
    });
   
    $(remove_step).click(function(){ //user click on remove text
        $('.all_steps .step:last').remove();
        x--;
    })
});
</script>

Answer 1

您可以使用AJAX 来做到这一点，因为没有 AJAX，您将无法获得与服务器连接的正确访问权限。

这里是一个简单的例子：

$.ajax({
    type: "post",
    url: "url",
    data: $("form").serialize(),
    success: function(data) {
       alert("success")
    }
})

type 是方法，data是您要在数据库中发送的参数。 希望你能理解！