javascript - 如何发送和接收动态输入字段的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 个字段，对存储过程的调用都将始终相同。我在一个网站上做到了这一点，效果非常好。不过，我现在不能在那台电脑上获取代码。这些可能会有所帮助......

将 PHP $_POST 转换为 XML: http://davidwalsh.name/watch-post-save-php-post-data-xml 进入存储过程后可以使用一些 MySql XML 函数:http://dev.mysql.com/doc/refman/5.1/en/xml-functions.html

稍后当我使用另一台电脑时，我可以提供更多帮助。希望这会有所帮助。

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

//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();
}