logo标签列表

如何通过AJAX发送PHP数组？

javascriptphpjqueryarraysajax
4
在我的注册页面上，人们可以通过填写一些输入框和复选框来注册我的网站。它基本上是一个表单，将数据通过ajax发送到PHP页面，然后将其放入数据库中。
例如，JavaScript从表单中获取值的方式如下：
var w = _("website").value;
var bio = _("bio").value;

接着像这样发送信息：ajax.send("w="+w+"&bio="+bio);。这个工作得很顺利，但我想添加一些东西。

现在我有一些复选框，我希望能够将它们收集到一个数组中，在通过ajax提交时以一个变量的形式传递。所以在我的表单中，我有以下PHP代码：

$licensessql = mysqli_query($db_conx, "SELECT * FROM licenses");
while($licenserecord = mysqli_fetch_assoc($licensessql)) {
echo '<input type="checkbox" value="'.$licenserecord["license"].'" name="licenses[]" id="'.$licenserecord["license"].'"><label for="'.$licenserecord["license"].'">'.$licenserecord["license"].'</label><br>';
}

使用纯PHP可以实现这个功能并将复选框中的所有值放入一个数组中licenses[]，但是我不知道如何使用ajax来实现这一点。如果有5个复选框，我希望javascript变量例如具有'value1,value2,value3'的值，并将其发布到PHP中。
谢谢！
4个回答
1
首先，我建议使用其他答案中发布的表单序列化。
回答您的实际问题："如果我有5个复选框，我希望javascript变量例如具有'value1，value2，value3'的值，并将其发布到PHP。" 这是一个完全工作的示例（使用3个复选框），它将生成一个javascript变量，您可以将其用于传递给您的AJAX post方法以供PHP处理。
JSFiddle: https://jsfiddle.net/o5q04vf0/
代码段： 

$(document).ready(function() {
  $('#btnTest').click(function() {
    var checkBoxValues = $("[name=licenses\\[\\]]").map(function() {
      if ($(this).is(':checked')) {
        return this.value;
      }
    }).get().join();

    alert(checkBoxValues);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="0" name="licenses[]" />
<input type="checkbox" value="1" name="licenses[]" />
<input type="checkbox" value="2" name="licenses[]" />
<button id="btnTest">Submit</button>

这将帮助您朝正确的方向引导，但请考虑像其他成员在此处建议的那样通过AJAX传递数据来改变您的方法。
0
使用POST方法，并将数组序列化为数据。 

  $data = $('form').serialize();
    $.post( "ajax/test.html", function($data) {
      $( ".result" ).html( data );
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="demo_form.asp">
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
  <input type="submit" value="Submit">
</form>

在PHP中，您可以使用$_POST['attributeName']来读取值

谢谢您的回答！我只想序列化这个值，所以现在数组的值是这样的：var licenses = $('input[name="licenses"]').serializeArray(); 这就是发送到数据库的内容。因为我还有其他复选框不在数组中，所以我需要指定名称。但是现在发送到数据库的是这些而不是真实的值：[object Object]，[object Object]，[object Object] ... - Senne Vandenputte
我认为这篇文章对你很有帮助：https://dev59.com/TlXTa4cB1Zd3GeqP13Qj - online Thomas
0

您可以使用serializeArray函数发送所有表单数据。
Serialize用于GET请求，而serializeArray对于POST请求非常有用。

$('#btn-send').click(function(e) {
    $.ajax({
        url: 'url-to-data-send',
        method: 'post',
        data: $(this).closest('form').serializeArray(); <--- send form data
    }).done(function(response) {
        alert('form sent');
    })
});

或者你可以明确指定你想要发送的内容

var data = $(this).closest('form').serializeArray();
    console.log(data);

FIDDLE

** 编辑 **

我想这就是你想要的

var arr = [];
$.map( $(this).closest('form').find('input[name="chck[]"]:checked'), function( n, i ) {
     arr.push({ name: $(n).attr('name'), value: $(n).val()});
});
console.log(arr);

代码笔记 2

谢谢你的回答！我只想序列化这个值，所以现在我数组的值为：var licenses = $('input[name="licenses"]').serializeArray(); 这是被发送到数据库的内容。因为我还有其他复选框不在该数组中，所以我需要指定名称。但是现在发送到数据库的却是这个：[object Object]，[object Object]，[object Object] ... 而不是实际值。 - Senne Vandenputte
@SenneVandenputte 我更新了我的答案，请检查是否对您有所帮助。 - daremachine
0

开始吧：

你需要序列化函数！这里是一个例子，你可以看看如何使用它：

HTML：

<form id="yourOrderFormId" method="post">
<input type="checkbox"/><input type="text"/>
<input type="checkbox"/><input type="text"/>
<button id="yourButtonId">Send</button>
</form>

jQuery Ajax：

<script>
    $('#yourButtonId').click(function(e) {

       var yourData = $("#yourOrderFormId").serialize(); 

        $.ajax({
            method: 'POST',
            url: '/yourUrl',
            data: yourData,
            dataType: 'html',
           success:success: function (result) {
           alert("Your message sent!");
           }
    });

或者与 serializeArray() 一起使用;

console.log($('form').serializeArray());

这里：输入链接描述
希望能有所帮助;)
@SenneVandenputte 试试这个方法：如果你只想序列化复选框，请使用以下代码：var yourData = $("yourCheckboxId").val()；而不是 var yourData = $("#yourOrderFormId").serialize(); - Husni Salax
我认为现在它正在工作，但是在我的数据库中，我看到的是[object Object]，[object Object]而不是复选框的值。 - Senne Vandenputte
@SenneVandenputte 我认为，如果你使用这种方法发送数据，就没问题了：var yourData = $（“#yourOrderFormId”）.serialize（）; ps. 如果有帮助，请为我的解决方案打勾。谢谢;) - Husni Salax
我刚刚使用了你的方法，当我使用 var licenses = $('input[name="licenses"]').val(); 时，它能够正确地发送第一个值，但不是整个数组。我觉得它几乎可以工作，但还没有完全实现。 - Senne Vandenputte
@SenneVandenputte 我找到了一些东西 :) 试试这个：var licenses = $（'input[name="licenses"]'）.serializeArray（）; - Husni Salax
显示剩余5条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接