使用 AJAX 从 <select> 下拉列表中检索值？答案

【问题标题】：Using AJAX to retrieve values from <select> dropdown?使用 AJAX 从 <select> 下拉列表中检索值？
【发布时间】：2013-10-30 13:46:40
【问题描述】：

我想检索更改下拉列表的值，并将其发布到我的 PHP（目前，PHP 只是 var_dump，用于调试目的）

我坚持将选定的值发布到我的 AJAX，似乎没有任何变化。

我使用 WP 框架加载脚本并通过 admin-ajax.php 运行它们——我一直将此方法用于其他 AJAX 函数，并且它正在工作。

我有一个下拉列表，如下所示：

HTML

<form action="" method="post">                        
 <select name="count" class="count">
  <option value='1'>1</option>  
  <option value='2'>2</option>  
  <option value='3'>3</option>  
  <option value='4'>4</option>  
  <option value='5'>5</option>  
 </select>
<input class="koordinator_id" type="hidden" name="koordinator_id" value="<?php echo $_SESSION['coordinator_id'] ?>">     
</form>

AJAX

$(document).ready(function () {
    $('select.count').change(function () {

        alert("Whyunoalert?");

        $.ajax({
            type: "POST",
            url: (my_ajax_script.ajaxurl),
            data: ({
                action: 'generate',
                koordinator_id: $('input[name=$"koordinator_id"]').val(),
                id: $('select.count').val()
            }),
            success: function (msg) {
                alert("Data changed:" + msg);
            }
        });
    });
});

PHP

function generate() {     
    $count = $_POST['id'];
    var_dump($count);
    $koordinator_id = $_POST['koordinator_id'];
    var_dump($koordinator_id);
}

编辑

我已将代码相应地更改为前三个 cmets。现在我的代码执行了 AJAX，但 php 文件中仍然没有生成 var_dump。感谢您到目前为止的帮助，希望您能做得更多。我还添加了 functions.php 代码，其中绑定了 php 函数并设置了到 ajax-admin.php 的重定向。

functions.php

function load_scripts() {

wp_enqueue_script('local_jquery', '/wp-content/themes/tutorial_theme/scripts/scripts.js');
wp_enqueue_script('ajax_func', get_template_directory_uri() . '/scripts/ajax_implementation.js');

}
if (!is_admin())
add_action('wp_enqueue_scripts', 'load_scripts');
add_action('template_redirect', 'load_scripts');

$dirName = dirname(__FILE__);
$baseName = basename(realpath($dirName));
require_once ("$dirName/ajax_functions.php");

add_action("wp_ajax_nopriv_approve", "generate");
add_action("wp_ajax_approve", "generate");

第二次编辑

从 ajax 中删除了这个：（来自旧的复制粘贴）

     dataType: 'html',

【问题讨论】：

标签： php jquery ajax wordpress

【解决方案1】：

您的数据行中的选择器$('input[name=$"koordinator_id"]') 错误。以某个字符串结尾的输入名称的语法是$('input[name$=somestring]']。

改用这个：

$('input[name$="koordinator_id"]') // '$' needs to be before '='
             ^

【讨论】：

【解决方案2】：

首先，如果您要触发 ajax onchange 事件，为什么要将它们包装在表单标签中？如果除了onchange 事件之外没有其他用途，请将其删除。

其次，您在 ajax function 中使用了 action: 'generate'，但您没有在 php 函数文件中挂钩正确的操作

add_action("wp_ajax_nopriv_YOUR_ACTION", "METHOD");
add_action("wp_ajax_YOUR_ACTION", "METHOD");

原来如此

add_action("wp_ajax_nopriv_generate", "generate");
add_action("wp_ajax_generate", "generate");

最后但并非最不重要的一点是始终退出您的 ajax 方法调用，因此请确保它不会低于。

function generate() {     
    $count = $_POST['id'];
    var_dump($count);
    $koordinator_id = $_POST['koordinator_id'];
    var_dump($koordinator_id);
    exit;
}

也作为@Krishna 回答删除$ 符号unexpected expression

koordinator_id: jQuery('input[name=$"koordinator_id"]').val(),

需要：

koordinator_id: jQuery('input[name="koordinator_id"]').val(),

【讨论】：

感谢您花时间写一个很好的解释。非常有帮助并解决了一切。多谢！

【解决方案3】：

您在.ready(function() 之后缺少{。像这样修复它：

$(document).ready(function () {
    $('select.count').change(function () {
        alert("Whyunoalert?");

        $.ajax({
            type: "POST",
            url: 'my_ajax_script.ajaxurl',
            data: ({
                action: 'generate',
                koordinator_id: $('input[name=$"koordinator_id"]').val(),
                id: $('select.count').val()
            }),
            dataType: 'html',
            success: function (msg) {
                alert("Data changed:" + msg);
            }
        });
    });
});

【讨论】：

@Pjust 你是否更改了url？如果是，请将您的帖子编辑为当前代码。
是的，我做到了，但没有效果，而且我有一个函数，在 url 周围有括号（），并且有效。所以我不认为就是这样。

【解决方案4】：

这样试试

$(document).ready(function()
$('.count').change(function() {
    $.ajax({
        type: "POST",
        url: 'my_ajax_script.ajaxurl',
        data: {'action': 'generate', 'koordinator_id': $('input[name=koordinator_id]').val(), 'id': $('.count').val()}),
        dataType: 'html',
        success: function(msg) {
            alert("Data changed:" + msg);
        }
    });       
});
});

还要避免使用php短标签。有时如果你的php版本不支持短标签会导致问题。所以改变这个

<input class="koordinator_id" type="hidden" name="koordinator_id" value="<?php echo $_SESSION['coordinator_id'] ?>">

【讨论】：