Jquery Ajax html（多选）

Posted 2023-05-09

【中文标题】Jquery Ajax html（多选）

【英文标题】：Jquery Ajax html (Select multiple)

【发布时间】：2020-11-28 01:11:45

【问题描述】：

我正在寻找一些简单的东西。我必须通过 jquery 将值从表单 html 传递到文件 php。我尝试此代码，结果为零。如果有人能说我哪里错了。谢谢

对于 JQUERY

$('#Save').click(function()

    var realvalues = new Array();//storing the selected values inside an array
    $('#Privilege[] :selected').each(function(i, selected) 
        realvalues[i] = $(selected).val();
    );

    $.ajax(
        type: "POST",
        url: "test5.php",
        data: "Privilege[]": realvalues,
        success:function(data)
                $("#subscrres").html(data)
            
    );
);

对于 HTML

<form method="post">
<select id="Privilege[]" multiple>
<option value="yahoo">yahoo</option>
<option value="chrome">chrome</option>
<option value="mozilla">mozilla</option>
</select>
<input type="button" id="Save" Value="SEND"/>

对于 PHP。内容文件test5.php

if(isset($_POST['Privilege']))
$myvar  =$_POST['Privilege'];
foreach($_POST['Privilege'] as $one)
echo $one."<br/>";

我没有收到关于 PHP 的任何信息。有人可以帮助我吗？

【问题讨论】：

在您的 PHP 顶部添加 var_dump($_POST) 并查看您收到的内容。

您正在发送"Privilege[]"，但您正在检查isset($_POST['Privilege'])

好的，谢谢 Jaj，我同意你的看法，但我还没有解决，当然我还有更多问题......我想。

该帖子缺少</form>，但您可能忽略了它。尝试将“名称”属性添加到<select>。

感谢您的帮助 Funk 四十九，我已将名称添加到选择器中，表格的结尾已经存在，但没有任何改变....将成为真正的反击 :)

【参考方案1】：

如果您尝试使用 id 访问多选元素，则不需要像 Privilege[] 那样设置 id，您可以设置像 privilege-selector 这样的任何唯一标识，但如果您要为任何多选元素命名，那么名字必须像Privilege[]

这里是html：

<form id="form" method="post">
    <select id="privilege-selector" multiple>
       <option value="yahoo">yahoo</option>
       <option value="chrome">chrome</option>
       <option value="mozilla">mozilla</option>
    </select>
    <input type="button" id="Save" Value="SEND"/>
</form>

请检查下面的ajax 请求以将选定的数据发布到服务器

$("#Save").on("click",function()
    var selection = [];
    $.each($("#privilege-selector option:selected"),function(index,element)
        selection.push($(element).val());
    )
    $.ajax(
        url : "test5.php",
        type : "POST",
        data : Privilege:selection,
        success : function(_response)
           var res = JSON.parse(_response);
           if(res.code == "1")
             console.log(res.data);
            else 
             alert(res.message);
            
        
    )
);

这是处理传入请求数据的服务器文件

$serverResponse = [];
if(isset($_POST['Privilege']) && !empty($_POST['Privilege']))
    $formattedData = [];
    foreach($_POST['Privilege'] as $key => $value)
        $formattedData[] = array(
            "id" => $key+1,
            "name" => $value
        );
    
    $serverResponse = ["code"=>"1","message"=>"formatted data","data"=>$formattedData];
 else 
    $serverResponse = ["code"=>"0","message"=>"Please select at least on value"];

echo json_encode($serverResponse);

【讨论】：

我将id="#form" 更改为id="form"，# 不应该在那里。这是我编辑的一个明显的错字。

是的，# 不应该在那里，对不起，谢谢@FunkFortyNiner

显然感谢您的帮助。但我仍然有问题。我也编辑了 test5.php 并回显了建议的新代码，但似乎从 test3.php 我没有达到 test5.php ......最后我也可以在没有旧系统的 jquery 的情况下做到这一点html + php...无论如何感谢您的帮助！

嘿伙计，我已经解决了，你的代码很完美，问题是我写了 http 而不是 hpps 来访问 Jquery 库，所以 Chrome 阻止了我的请求。我已经在 https 上进行了编辑，现在一切正常。非常感谢所有人！！！

@Fabriziosimi 我仍在关注这个问题并注意到您在上面的评论。您知道，如果您想避免脚本、图像等中 HTTP 和 HTTPS 之间的问题，您可以使用//script.xx 方法，而不是使用http:// 或https:// 对其进行硬编码。这样一旦上线，它将自动解析到文件所在的当前 URL。