Question

我想以两种不同的方式发送html表单

首先我需要一个jQuery .submit（）来将信息发送到webservice，之后我需要将表单发送到我的数据库。

现在我的问题是当我使用event.preventDefault（）;它始终只将信息发送到Web服务而不是数据库。

如果我不使用pereventDefault（）;它将信息发送到网络服务但是在竞争条件下它不会等待它的成功功能post.done（）。信息发送到数据库，但不是我的网络服务。

jQuery('#sendform').submit(function(event) {
    event.preventDefault(); //here comes the problem

    var post = jQuery.post(url, {
        email: email,
        firstname: vorname,
        surname: nachname,
        origin: origin,
        newsletter: newsletter
    });

    post.done(function(data) {
        console.log("webservice-done")
        //at this point the data should be send to databdase via send.php
    });
});

这是我的HTML表单：

<section class="formular" id="formular">
    <form id="sendform" action="send.php" method="post" enctype="multipart/form-data">
        <div class="links">
            <input id="idvorname" name="vorname" type="text" placeholder="Vorname*" required/>
           <br>
            <input id="idnachname" name="nachname" type="text" placeholder="Nachname*" required/>
            <br>
            <input id="idemail" name="email" type="text" placeholder="E-Mail-Adresse*" required/>
            <p>* Pflichtfeld</p>
        </div>
        <div class="absenden">
            <input id="senden" type="submit"/></input>
        </div>

    </form>

因此，如果我使用的是preventDefault（），则jQuery部分中的帖子已完成，数据将通过send.php发送到Web服务，但不会发送到数据库。如果我不使用preventDefault（），数据不会正确发送到我的webservice，而是通过send.php发送到我的数据库。

是否有可能将其发送到web服务，就像使用preventDefault（）一样。并且只有在完成后才会发送到数据库？

我已经尝试过使用jQuery Form插件，但它也没有用。像以前一样的错误。我也尝试在post.done函数中使用.submit（），但我最终只是在向网络服务发送infinte数据的循环中。

任何真正帮助的帮助

Answer 1

这应该这样做，调用本机提交DOM方法以避免jQuery处理程序提交循环：

jQuery('#sendform').submit(function(event) {
    // to avoid any multiple form submissions
    $(this).find(':submit').prop('disabled', true);       

    event.preventDefault(); 

    var post = jQuery.post(url, {
        email: email,
        firstname: vorname,
        surname: nachname,
        origin: origin,
        newsletter: newsletter
    });

    post.done(function(data) {
        console.log("webservice-done")
        this.submit(); // submit form here
    }.bind(this)); // bind to set relevant context
});

发送一个html表单2次而不会互相阻塞

1 个答案: