在 onchange 上通过 Ajax 传递一个值

Question

我试图了解如何从 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' );

Answer 1

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

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

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

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

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

3. 您的 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参数

5. 您的 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();
}