动态输入fiels如何收发MySQL数据

Question

我想知道当提交的表单可以添加额外的字段时，如何向MySQL数据库发送和接收输入数据(因此，一个订单可能有10个输入字段，另一个可能有30个)。这里有一个片段，让您了解我正在说的是什么- http://jsfiddle.net/gv0029/M84r7/

我看到了一篇关于使用数组的文章，但这是4年前的事，我想确定我所做的一切仍然是使用最佳实践。任何和所有的帮助或想法都将是非常感谢的！谢谢!

HTML：

<fieldset id="fence">
    <div name="inputFence" class="inputFence">
        <legend><strong>Fence Description</strong>
        </legend>
        <label>Footage:
            <input name="footage_1" class="footage" />
        </label>
        <label>Fence Height</label>
        <select name="fenceHeight_1" class="fenceHeight">
            <option value="select">Select Fence Height</option>
            <option value="6" id="fH6">6 Ft.</option>
            <option value="8" id="fH8">8 Ft.</option>
        </select>
        <legend><strong>Post Type</strong>
        </legend>
        <label>Post Quantity:
            <input name="postQuantity_1" class="postQuantity" />
        </label>
        <label>Picket Quantity
            <input name="picketQuantity_1" class="picketQuantity" />
        </label>
</fieldset>
<div>
    <input type="button" id="btnAddFence" value="Add Another Fence" />
    <input type="button" id="btnDelFence" value="Remove Fence" />
</div>
</form>

JS

//Dynamic Fence Input Fields
$('#btnAddFence').click(function () {

    // create the new element via clone()
    var newElem = $('.inputFence:last').clone();

    // insert the new element after the last "duplicable" input field
    $('.inputFence:last').after(newElem);

    // enable the "remove" button
    $('#btnDelFence').removeAttr('disabled');

    //get the input name and split into array (assuming your clone is always last)
    var parts = $('.fenceHeight:last').attr('name').split("_");
    //change the second element of the array to be one higher
    parts[1]++;
    //join back into a string and apply to the new element
    $('.fenceHeight:last').attr('name', parts.join("_"));

    //do the same for other two inputs
    parts = $('.postQuantity:last').attr('name').split("_");
    parts[1]++;
    $('.postQuantity:last').attr('name', parts.join("_"));

    parts = $('.footage:last').attr('name').split("_");
    parts[1]++;
    $('.footage:last').attr('name', parts.join("_"));

    parts = $('.6foc:last').attr('name').split("_");
    parts[1]++;
    $('.6foc:last').attr('name', parts.join("_"));

    parts = $('.railQuantity:last').attr('name').split("_");
    parts[1]++;
    $('.railQuantity:last').attr('name', parts.join("_"));

});

$('#btnDelFence').click(function () {
    //remove the last inputFence
    $('.inputFence:last').remove();

    // if only one element remains, disable the "remove" button
    if ($('.inputFence').length == 1) $('#btnDelFence').attr('disabled', 'disabled');
});

$('#btnDelFence').attr('disabled', 'disabled');

Answer 1

因此，听起来您有一个未知数量的字段，您正在寻找一种将它们发送到MySql的简单方法。因此，我假设您正在调用一个存储过程，但不知道如何处理未知参数。我会接受这个表单，或者将其序列化为JSON，或者将所有$_POST值转换为一个XML。然后，只需将单个对象传递到MySql存储过程中即可。一旦进入，您就可以使用一些循环和XML函数来完成您必须做的事情。这样，无论您提交10个字段还是100个字段，对存储proc的调用都是相同的。我在一个网站上做了这件事，而且效果很好。不是在电脑上，我现在可以在那里得到代码。这些可能会有帮助..。

要将PHP转换为XML：$_POST，请在存储的proc：http://dev.mysql.com/doc/refman/5.1/en/xml-functions.html中使用一些MySql XML函数

当我打开我的另一台电脑时，我可以提供更多的帮助。希望这能有所帮助。

更新:这里的是如何获取所有$_POST数据并将其转换为有效的$_POST文档的.

//Grab all the POST info, turn it into a valid XML object and store it
$postData = null;
if($_SERVER['REQUEST_METHOD'] == 'POST' && count($_POST) > 0) $postData = assocArrayToXML('POST_DATA',$_POST);
//The assocArrayToXML returns the XML object with page breaks, we need a stright non-breaking string
//so that the flexigrid can display the results properly.
$postData = str_replace(chr(13), '', $postData);
$postData = str_replace(chr(10), '', $postData);

这是assocArrayToXML函数..。

function assocArrayToXML($root_element_name,$ar)
{
  $xml = new SimpleXMLElement("<?xml version=\"1.0\"?><{$root_element_name}></{$root_element_name}>");
  $f = create_function('$f,$c,$a','
          foreach($a as $k=>$v) {
              if(is_array($v)) {
                  $ch=$c->addChild(htmlspecialchars($k));
                  $f($f,$ch,$v);
              } else {
                  $c->addChild($k,htmlspecialchars($v));
              }
          }');
  $f($f,$xml,$ar);
  return $xml->asXML();
}

Answer 2

序列化表单并发送。在服务器端，将其取消序列化并插入到数据库。

var str = $( "form" ).serialize();

参考http://api.jquery.com/serialize/