Jquery 多动作表单提交ajax

我需要使用表单将数据写入两个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>`

选择加入
登记
`

好的，还有很多工作要做，我会尽量用你容易理解的方式来解释：

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代码之前，我建议您先阅读一下

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

在submit按钮的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');
        }
    });
});

$（文档）。在（'click'，'input[type=submit]'，函数（e）{
e、 预防默认值（）；
$.ajax({
类型：'post'，
url:“http:///api/table1",
数据：$（'form:eq（0）'）。序列化（），
成功：功能（resp）{
警报（“发送第一个表”）；
},
失败：功能（resp）{
警报（'无法发送第一个表'）；
}
});
$.ajax({
类型：'post'，
url:“http:///api/table2",
数据：$（'form:eq（1）'）。序列化（），
成功：功能（resp）{
警报（“发送第二个表”）；
},
失败：功能（resp）{
警报（'无法发送第二个表'）；
}
});
});

注意：

---

这可能不像预期的那样完全有效，因为可能会有各种各样的可能性使其出错，这就是我建议您事先阅读jQueryAjax的原因。虽然您可以在这里再次询问任何后续问题，但到目前为止，您是否尝试过任何方法，或者只是对ajax有所了解？只是了解了一下它的工作原理：）显然，您不能跨域ajax请求，当我在现场推送它而不是在本地运行它时，它就工作了：D