在 onchange 上通过 Ajax 传递一个值

Posted 2023-05-09

【中文标题】在 onchange 上通过 Ajax 传递一个值

【英文标题】：Pass a value via Ajax on onchange

【发布时间】：2021-12-01 22:49:48

【问题描述】：

我试图了解如何从 onChange 状态的下拉列表中传递值。对此的最佳做法是什么？这是我到目前为止所得到的。似乎无法正常工作，没有错误。我不能让我的 if/else 语句触发，所以不确定如何检查正在捕获的变量。

不确定我是否走在正确的轨道上 - 这里的最佳做法是什么？

表格：

<select id="dropdown_shop_order_language" name="wcml_shop_order_language">
 <option value="nl" selected="selected">Niederländisch</option>
 <option value="en">Englisch</option>
 <option value="de">Deutsch</option>
</select>

到目前为止我的脚本：

jQuery(document).ready(function () 

    jQuery('#dropdown_shop_order_language').change(function () 
    jQuery.ajax(
          
        dataType: 'json',
        type: "post",
        url: myAjax.ajaxurl,
        data:     
            action:                         'my_action',
            "dropdown_shop_order_language": jQuery('#dropdown_shop_order_language').val()
        ,
        success: function(data)
            console.log(data);
        
    );
      );
 );          
   

功能：

function my_enque_action( $hook ) 

    global $post;
     $postid = $post->ID;  
    if ( $hook == 'post-new.php' || $hook == 'post.php' ) 
        
        if( get_post_type( $postid ) === 'shop_order' )   
         wp_enqueue_script( 'lang_script', get_template_directory_uri() . '/assets/javascripts/language.js', array( 'jquery' ), '1.0.0', true );
         wp_localize_script( 'lang_script', 'myAjax', array( 'ajaxurl' => admin_url('admin-ajax.php') ) );

                

        
    

add_action( 'admin_enqueue_scripts', 'my_enque_action', 10, 1 );




function my_action( ) 
    $dropdown_shop_order_language = $_POST['dropdown_shop_order_language'];
    echo $dropdown_shop_order_language;
    if ( $dropdown_shop_order_language == 'en' ) 

     elseif ( $dropdown_shop_order_language == 'nl' ) 

     elseif ( $dropdown_shop_order_language == 'de' ) 

     else 

    
   echo json_encode(['responsekey' => 'responsevalue']);
    wp_die();

add_action( 'wp_ajax_my_action', 'my_action' );
add_action( 'wp_ajax_nopriv_my_action', 'my_action' );

【问题讨论】：

alert("language is nl"); 那是你有问题的地方

@MasivuyeCokile 我已经根据下面的 cmets 更新了代码，并将警报更改为 echo，但仍然出现相同的错误。

如果代码已经更新，您仍然在函数 my_action() .. 中有警报，并且您仍然没有在函数末尾调用 wp_die/exit

【参考方案1】：

让我们深入了解您的问题：

code: 'invalid_json', message: 'The response is not a valid JSON response.' 这应该会响起，您从服务器收到的答案有问题，而不是请求

这发生在你的 PHP 代码上，我们稍后会看到它的答案。

我假设执行 javascript 代码时 myAjax.ajaxurl 有一个值

你没有告诉 jQuery 它应该等待什么样的响应。你想给 html 吗？杰森？查看dataType 属性并赋予它一些价值

您的 ajax 调用缺少一个值。要使 Wordpress ajax 工作，您需要触发正确的钩子（您在 PHP 代码中执行此操作），但您还需要一个名为 action 的特殊额外 POST 参数，如果没有该值，Wordpress 将无法正确处理您的帖子。

下面是 Ajax 请求的代码：

jQuery.ajax(
    
        type:     "post",
        url:      myAjax.ajaxurl,
        dataType: 'json',
        data:     
            action:                         'my_action',
            "dropdown_shop_order_language": jQuery('#dropdown_shop_order_language').val()
        ,
        success:  function (data) 
            console.log(data);
        
    );

您为 "action" 参数提供的值是它后面的值：

add_action('wp_ajax_my_action', 'my_action');

函数可以是任何你想要的名字，但是wp_ajax_之后的内容需要匹配你来自jQuery的action参数

您的 php 代码缺少退出调用

function my_action( ) 
    $dropdown_shop_order_language = $_POST['dropdown_shop_order_language'];
    echo $dropdown_shop_order_language;
    if ( $dropdown_shop_order_language == 'en' ) 
     alert("language is en");
     elseif ( my_action() == 'nl' ) 
    alert("language is nl");
     elseif ( my_action() == 'de' ) 
    alert("language is nl");
     else 
    alert("language is none");
    
   echo json_encode(['responsekey' => 'responsevalue']);
    exit();

请参阅exit(); 调用，您需要它来停止 Wordpress 执行并简单地响应 Ajax 请求而没有额外的输出。

旁注：我认为在 PHP 中调用 alert 不会打印任何内容，如果您想测试，请使用 echo 或其他东西 =)

你的php代码应该是这样的：

function my_action( ) 
    $dropdown_shop_order_language = $_POST['dropdown_shop_order_language'];
    if ( $dropdown_shop_order_language == 'en' ) 
     // Log in some other way, maybe file?
     elseif ( my_action() == 'nl' ) 
       // Log in some other way, maybe file?
     elseif ( my_action() == 'de' ) 
       // Log in some other way, maybe file?
     else 
     // Log in some other way, maybe file?
    
   echo json_encode(['responsekey' => 'responsevalue']);
    exit();

【讨论】：

Wordpress 有自己的“死”脚本的功能，developer.wordpress.org/reference/functions/wp_die - 最好在这种情况下使用它，因为它比 just make脚本立即终止，包括执行可能由脚本/插件的其他部分设置的过滤器。

谢谢 - 清除了我的一些想法。改为回声 - 不知道我在想什么。到目前为止，我仍然遇到同样的错误。

用最新的代码/控制台错误更新您的问题，以便我们进一步提供帮助

@Diego 刚刚更新了，谢谢

您的 jQuery Ajax 调用中仍然缺少“action”参数