Question

我需要使用表单将数据写入两个api表。一个写入一个表，一个动作写入另一个表。但是，由于这是在同一页面，我只想要一个提交按钮，我知道不可能有两个不同的操作。但与此同时，我知道为了使用两种不同的形式，我需要AJAX，而对于我在下面的代码中的第一种形式，我不能做任何事情，但我想知道我如何使用AJAX将以下表格发布到两个使用多个动作的不同表。那么有人可以告诉我我该怎么做吗？

<div id="login">
<div id="triangle"></div>
<h1>Opt in</h1>
<form method="post" action="http://<ipaddress>/api/table1">
<input type="user_email" name = "user_email" placeholder="Email" />
<input type="user_name" name = "user_name" placeholder= "Your name" />
<input type="user_skills" name = "user_skills" placeholder="Skills" />
<input type="user_bio" name = "user_bio" placeholder = "Biography" />
<input type= "user_other" name = "user_other" placeholder = "Other Information" />
</form>
</div>
<div id="whitelist">
<h1>Register</h1>
<form method = "post" action = "http://<ipaddress>/api/table2">
<input type = "device_id" name = "device_id" placeholder = "Device ID" />  
<input type = "device_description" name = "device_description" placeholder = "Describe your Device" /> 
<input type = "device_name" name = "device_name" placeholder = "Type of Device" />
<input type = "submit" value = "Submit" />
</form>
</div>`

Answer 1

好的，那将会有很多工作，我会尝试以一种你能够轻易理解的方式解释它：

<强> HTML：

为了进行ajax调用，您不需要表单，因此您也可以将其删除或至少从中删除action和method属性：

<div id="login">
    <div id="triangle"></div>
    <h1>Opt in</h1>
    <form>
        <input type="user_email" name = "user_email" placeholder="Email" />
        <input type="user_name" name = "user_name" placeholder= "Your name" />
        <input type="user_skills" name = "user_skills" placeholder="Skills" />
        <input type="user_bio" name = "user_bio" placeholder = "Biography" />
        <input type= "user_other" name = "user_other" placeholder = "Other Information" />
    </form>
</div>
<div id="whitelist">
    <h1>Register</h1>
    <form>
        <input type = "device_id" name = "device_id" placeholder = "Device ID" />  
        <input type = "device_description" name = "device_description" placeholder = "Describe your Device" /> 
        <input type = "device_name" name = "device_name" placeholder = "Type of Device" />
        <input type = "submit" value = "Submit" />
    </form>
</div>

<强> jQuery的：

在我们开始讨论jQuery代码之前，我建议您阅读一些关于 jQuery-AJAX 的内容。

现在让我们来看看代码的有趣部分：

在提交按钮的click事件中，我们调用ajax并将值发送到对应表，如下所示：

$(document).on('click','input[type=submit]',function(e){
    e.preventDefault();
    $.ajax({
        type:'post',
        url:"http://<ipaddress>/api/table1",
        data:$('form:eq(0)').serialize(),
        success:function(resp){
            alert('first table sent');
        },
        fail:function(resp){
            alert('couldn\'t send the first table');
        }
    });
    $.ajax({
        type:'post',
        url:"http://<ipaddress>/api/table2",
        data:$('form:eq(1)').serialize(),
        success:function(resp){
            alert('second table sent');
        },
        fail:function(resp){
            alert('couldn\'t send the second table');
        }
    });
});

注意：

这可能并不完全按预期工作，因为可能存在各种可能导致这种情况出错，这就是为什么我建议你事先阅读有关jQuery-AJAX的原因。虽然您可以随时在 StackOverflow 再次询问任何后续问题。

多个动作表单提交ajax

1 个答案: