使用jquery和ajax发布文本字段数组

Question

我不想使用serialize（）函数，请为此提供帮助。 我是初学者

HTML

        <input type='button' value='Add Tier Flavor' id='Add'>
        <input type='button' value='Remove Tier Flavor' id='Remove'>

        <div id='batch'>
            <div id="BatchDiv1">
                <h4>Batch #1 :</h4>
                <label>Flavor<input class="textbox" type='text' id="fl1" name="fl[]" value=""/></label></br>
                <label>Filling<input class="textbox" type='text' id="fi1" name="fi[]" value="" /></label></br>
                <label>Frosting<input class="textbox" type='text' id="fr1" name="fr[]" value=""/></label></br>

            </div>
        </div>
        <br>

    </div>

这是使用javascript动态添加的字段，代码为：

JavaScript的

  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){

    var counter = 2;

    $("#Add").click(function () {

        if(counter>5){
            alert("Only 5 Tiers allow");
            return false;
        }
        var newBatchBoxDiv = $(document.createElement('div')).attr("id", 'BatchDiv' + counter);
        newBatchBoxDiv.html('<h4>Batch #'+ counter + ' : </h4>' +
            '<label> Flavor<input type="text" name="fl[]" id="fl' + counter + '" value=""></label><br>'+
            '<label> Filling<input type="text" name="fi[]" id="fi' + counter + '" value=""></label><br>'+
            '<label> Frosting<input type="text" name="fr[]" id="fr' + counter + '" value=""></label><br>' );

        newBatchBoxDiv.appendTo("#batch");

        counter++;
    });

    $("#Remove").click(function () {
        if(counter==1){
            alert("No more tier to remove");
            return false;
        }
        counter--;

        $("#BatchDiv" + counter).remove();
    });



});
 </script>

我试图发布数组中的值以将其发布到下一个.php页面

我正在使用这个

        var user_cupfl =  $('input[name^="fl"]').serialize();
        var user_cupfi =  $('input[name^="fi"]').serialize();
        var user_cupfr = $('input[name^="fr"]').serialize();

序列化未传递值。 :(

在第二页上，我尝试使用

   $message .= "<tr><td><strong>Cake Flavors(according to batches):</strong> </td><td><pre>" .implode("\n", $user_cupfl). "</pre></td></tr>";
            $message .= "<tr><td><strong>Filling type (Inside the cake):</strong> </td><td><pre>" .implode("\n", $user_cupfi). "</pre></td></tr>";
            $message .= "<tr><td><strong>Frosting type (top of the cake):</strong> </td><td><pre>" .implode("\n", $user_cupfr). "</pre></td></tr>";

即时贴这样的数组

  $user_cupfl=filter_var($_POST["userCupfl"], FILTER_SANITIZE_STRING);

$user_cupfi=filter_var($_POST["userCupfi"], FILTER_SANITIZE_STRING);
$user_cupfr=filter_var($_POST["userCupfr"], FILTER_SANITIZE_STRING);

您的回复将受到高度赞赏

Answer 1

仅仅因为您命名一个变量user_*并不意味着那就是序列化POST数据中字段的名称。 您仍然会在寻找$_POST['fl'] ， $_POST['fi']等。

我不明白为什么您认为需要分别序列化一组输入组。 您应该只序列化整个表格。

我也看不出为什么您需要计数器具有唯一ID和不具有唯一ID的所有逻辑。 如果您根本不使用ID，则将其完全删除。

您可能还考虑仅使用克隆技术来生成动态添加的字段。 通过执行这些操作，可以大大简化所有这些javascript代码。

一个更合理的实现可能看起来像这样。

HTML（清理代码-始终在属性周围使用双引号，更好的类和ID使用策略等）

<div id="batch">
    <div class="batchDiv">
        <h4 class="batchLabel">Batch #1 :</h4>
        <label>Flavor</label>
        <input class="textbox" type="text" name="fl[]" value=""/>
        </br>
        <label>Filling</label>
        <input class="textbox" type="text" name="fi[]" value="" />
        </br>
        <label>Frosting</label>
        <input class="textbox" type="text" name="fr[]" value=""/>
        </br>
    </div>
</div>

使用Javascript：

$(document).ready(function() {
    $('#Add').click(function(){
        var $existingBatches = $('.batchDiv');
        var count = $existingBatches.size();
        if (count < 5) {
            // get last batch div
            var $newBatch = $existingBatches.last().clone();
            // reset input values to empty string
            $newBatch.find('input').val('');
            // change batch label
            count++;
            $newBatch.find('.batchLabel').html('Batch #' + count + ' :');
            // append to document
            $newBatch.appendTo('#batch');
        } else {
            // alert or whatever
        }
    });

    $('#Remove').click(function(){
        var $existingBatches = $('.batchDiv');
        var count = $existingBatches.size();
        // delete last batch item if more than 1 exists
        if(count > 1) {
            $existingBatches.last().remove();
        } else {
            // alert or whatever
        }
    });
});

现在您还没有显示您的AJAX代码，但是您需要做的就是：

var url = '/some/url';
var postData = $('[some form selector]').serialize();
var dataType = '...'; //whatever dataType you are expecting back
$.post(url, postData, function(){
    // success handler
}, dataType));

这样，您的数据就可以在$_POST['fl']等的PHP脚本中使用$_POST['fl'] 。