使用 jQuery 动态添加 div 并通过 AJAX 提交它们

Question

我正在开发的东西遇到了一些阻塞问题。

这一想法是让客户可能拥有多个地址。因此，当您看到客户“个人资料”时，您会看到一个选择框，其中标记了他/她的所有地址，因此您只能看到选定的地址。

它们确实存在，但隐藏在一些 javascript/jquery 中。

因此，添加新地址时就会出现问题。我不知道如何动态地添加更多内容。我所做的是有一个空的隐藏 div，因此，当您按下“添加地址”按钮时，它会显示该 div 并让您填写表单，但我不知道如何添加多个然后保存它们。

问题在于可用性和编程。可用性部分是，您可能已经看到了带有您要添加的地址的 div，但是如果您尝试添加新的 div，该 div 会发生什么情况？应该隐藏吗？如果是这样，应该有一种方法可以让它们回来，以防万一您需要更改一些数据，或者如果您不隐藏它们，您可能会得到一个非常大的滚动条。

然后，有一种方法可以保存每个地址 div 的信息，我将在此处粘贴我的代码：

$('.form-direcciones').each(function(){
    var ajData = $(this).serialize();
    var idDireccion = $(this).attr('id');
    if (idDireccion === 'form-nueva-direccion'){
        ajData = ajData + '&action=insertar'+
                '&cod_cliente='+cod_cliente;
    }
    else{
        idDireccion = idDireccion.split('-');
        ajData = ajData + '&cod_dir='+idDireccion[2] +
            '&action=' + action +
            '&cod_cliente=' + cod_cliente;
    }

    $.ajax({
        type: "POST",
        url: "controllers/direccion.php",
        async: false,
        data: ajData,
        dataType: "html",
        cache: false
    });
});

如您所见，它会检查 div 的 ID 是否是我用于该目的的 ID，但即使使用该解决方案，它对我来说似乎有点脏。

另外，还有一个问题，就是我的ID重复了...

Answer 1

看看这个 jsfiddle

http://jsfiddle.net/Z3JPW/12/

我已经完成了让您了解如何在客户端进行操作的基础知识。您可以在客户端完成所有操作，例如编辑、删除和插入，最后将数据保存到服务器端。