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

Posted 2023-05-09

【中文标题】使用 jquery 和 ajax 发布文本字段数组

【英文标题】：posting array of text fields using jquery and ajax

【发布时间】：2014-10-14 01:35:22

【问题描述】：

我不想使用 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();

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);

我们将非常感谢您的回复

【问题讨论】：

请发布您的完整提交/ajax 代码。

jsfiddle.net/35e2j4fb 这是一个小提琴

【参考方案1】：

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

我不明白您为什么认为需要单独序列化输入组集。您应该一次序列化整个表单。

我也看不出为什么你需要在计数器的唯一 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));

您的数据在 PHP 脚本中可用时$_POST['fl'] 等。

【讨论】：

先生，我将通过电子邮件发送此表单值。

@tabia 这有什么关系？

还有一件事，如果我不花时间请帮我获取这些文本字段的数组值。我希望 fl 在风味数组 fi 中填充数组和 fr 在糖霜数组中

@tabia 它们将在$_POST 内的数组中，如$_POST['fl']、$_POST['fi'] 等。做一个var_dump($_POST) 看看。

先生它没有返回我的值。