通过 ajax 将 html 输入数组值传递给 php 脚本

Question

我有下面的 HTML，我的想法是我有一个添加按钮，您可以添加多个地址。添加按钮将简单地为另一个具有相同名称的输入插入 html，从而创建一个 html 输入数组。我无法通过 ajax 将多个输入传递给 php 脚本。

<form id="addTripForm" class="form-horizontal">
<div class="form-group">
    <label class="col-xs-4 text-right">Address</label>
    <div class="col-xs-8"><input type="text" class="form-control" id="deliveryAddress[]" name="deliveryAddress[]" required/></div>
</div>
</form>

我已经尝试过这种传递值的方式（这里我只是通过名称获取元素并将其放入变量 formData 中）。

var deliveryAddress = document.getElementsByName('deliveryAddress[]');
var formData = {"deliveryAddress":deliveryAddress};

通过以下方式，我获取元素，然后循环遍历它们并将这些值推送到数组，然后将该数组分配给变量 formData

var deliveryAddress = document.getElementsByName('deliveryAddress[]');
var deliveries = new Array();
for(var i=0;i<deliveryAddress.length;i++){
        deliveries.push(deliveryAddress[i].value);
}
var formData = {"deliveryAddress":deliveries};

然后我使用变量 formData 中的值（从上面）并通过 ajax 推送它

$.ajax({
        url : "/admin/PHPClasses/addToDB.php?type=Trip",
        type: "POST",
        data : formData,
        success: function(data, textStatus, jqXHR)
        {
            $('.form-group').hide();
            $('.bg-success').show();
            $('#saveChanges').hide();
            window.location.reload();
         },
         error: function (jqXHR, textStatus, errorThrown)
         {
            $('.bg-danger').show();
         }
});

最后，在我的 PHP 脚本中，我尝试按如下方式访问 deliveryAddress

$deliveryAddress = filter_input(INPUT_POST, "deliveryAddress");

如果有人能证明我做错了什么，以及这是否是解决这个问题的最佳方法。非常感谢您的所有帮助。

更新：我认为所有答案可能都是正确的，我只是注意到我没有关闭页面底部的正文和 html 标记，这导致 javascript 序列化无法正常工作。感谢大家的帮助

Answer 1

您可以使用以下方法：

首先可以使用jQuery.serialize()

其次，使用 serialize()

更新您的 ajax 代码

Java 脚本 Ajax 代码：

$(document).ready(function() {
    // form submit function
    $("#addTripForm").on("submit", function(e) {
        // stop form submission
        e.preventDefault();
        $.ajax({
            url: "/admin/PHPClasses/addToDB.php?type=Trip",
            type: "POST",
            data: $("#addTripForm").serialize(),
            success: function(data, textStatus, jqXHR) {
                $('.form-group').hide();
                $('.bg-success').show();
                $('#saveChanges').hide();
                //window.location.reload();
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $('.bg-danger').show();
            }
        });
    })
});

三、使用下面的php代码获取adderss

<?php
// filter user input
$deliveryAddress = filter_input(INPUT_POST, 'deliveryAddress', FILTER_DEFAULT, FILTER_REQUIRE_ARRAY);
// join array with comma
$deliveryAddress = implode(",\n", $deliveryAddress);
// show address
echo $deliveryAddress;

这里是完整的 html js 和 php 代码：

$(document).ready(function() {
    //maximum input boxes allowed
    var max_fields = 10;
    //Fields wrapper
    var wrapper = $(".pure-control-group");
    //initlal text box count
    var x = 1;
    //on add button click
    $('body').on("click", ".fa-plus-circle", function(e) {
        //max input box allowed
        if (x < max_fields) {
            //text box increment
            x++;
            //add input box
            var render = '<div class="pure-control-group"> ' + '  <label for="deliveryAddress[]">Address</label>' + '      <input name="deliveryAddress[]" type="text" placeholder="Address...">' + '      <i class="fa fa-plus-circle"></i> ' + '      <i class="fa fa-trash-o"></i>' + '</div>';
            $(wrapper).after(render);
        }
    });
    //on delete button click
    $('body').on("click", ".fa-trash-o", function(e) {
            //user click on remove text        
            $(this).parent('div.pure-control-group').remove();
            x--;
        })
        // form submit function
    $("#addTripForm").on("submit", function(e) {
        // stop form submission
        e.preventDefault();
        $.ajax({
            url: "post.php?type=Trip",
            type: "POST",
            data: $("#addTripForm").serialize(),
            success: function(data, textStatus, jqXHR) {
                $('.form-group').hide();
                $('.bg-success').show();
                $('#saveChanges').hide();
                //window.location.reload();
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $('.bg-danger').show();
            }
        });
    })
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Pass html input array values to php script via ajax</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <style type="text/css">i,i:hover{color:#0078e7;cursor:pointer;}</style>


</head>

<body>
    <form class="pure-form pure-form-aligned form-horizontal" id="addTripForm">
        <fieldset>
            <div class="pure-control-group">
                <label for="deliveryAddress[]">Address</label>
                <input name="deliveryAddress[]" type="text" placeholder="Address...">
                <i class="fa fa-plus-circle"></i>
            </div>
            <div class="pure-controls">
                <button type="submit" class="pure-button pure-button-primary">Submit</button>                
            </div>
        </fieldset>
    </form>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="js.js"></script>
</body>

</html>

Answer 2

你好尝试使用formData的对象

var deliveries = new Array();
        $('#addTripForm input[name="deliveryAddress"]').each(function (){
            deliveries.push($(this).val()); 
        });

var formData = new FormData()
formData.append("deliveryAddress",deliveries);

$.ajax({
        url : "/admin/PHPClasses/addToDB.php?type=Trip",
        type: "POST",
        data : formData,
        cache: false,
        contentType: false,
        processData: false
        success: function(data, textStatus, jqXHR)
        {
            $('.form-group').hide();
            $('.bg-success').show();
            $('#saveChanges').hide();
            window.location.reload();
         },
         error: function (jqXHR, textStatus, errorThrown)
         {
            $('.bg-danger').show();
         }
});