使用 AJAX 从<选择>下拉列表中检索值


Using AJAX to retrieve values from <select> dropdown?

我想在更改时检索我的下拉列表的值,并将其发布到我的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>

阿贾克斯

$(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);
}

编辑

我已经根据前三条注释更改了代码。现在我的代码执行 AJAX,但仍然没有在 php 文件中进行任何var_dump。感谢您到目前为止的帮助,希望您能做得更多。此外,我还添加了函数.php代码,其中绑定了php函数并重定向到ajax-admin.php。

函数.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',

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

请改用这个:

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

如果你正在触发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(),

您在.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);
            }
        });
    });
});

像这样尝试

$(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'] ?>">