如何使用AJAX从select中获取数据以及如何返回值

Question

我创建了一个简码，其中包含一个包含woocommerce产品ID和标题的下拉列表，我要做的就是在表中显示数据。我还有一个查询以从数据库中获取数据。我试图创建一个AJAX jQuery脚本来从下拉列表中的选定项目中获取数据，但是它不起作用。

$the_query = new WP_Query( array(
    'post_type' => 'product',
    'posts_per_page' => -1,
    'post_status' => 'publish',
    'orderby'=> 'title', 
    'order' => 'ASC',
));
ob_start();

<select id="product_id" name="product_id" method= "POST" >
    <option value="0"><?php echo ("Select session"); ?></option>
        <?php 
        if ( $the_query->have_posts() ) {
            while ( $the_query->have_posts() ) {
                $the_query->the_post(); 
                echo '<option name= "product_option" value="'.get_the_ID().'">#'. get_the_ID().' '. get_the_title().'</option>';
                ?>
        <?php
            }
        }
        ?>
</select>
<?php
    $prod_id = $_POST['selectedValue'];
    echo $prod_id;

    if (! empty($prod_id)) {
        $allOrders = retrieve_orders_ids_from_a_product_id($prod_id);
    ?>
        <table id="registration_table">
            <tr>
                <th> Order number </th>
                <th> Name </th>
                <th> Status </th> 
            <tr>
        <?php
        if ( $allOrders ) {
            foreach ($allOrders as $orderID ) {
                $order = wc_get_order( $orderID );
                $order_data = $order->get_data(); // The Order data
        ?>
                <tr>
                    <td> <?php $order_data["id"]; ?> </td>    
                    <td> <?php $order_data["billing"]["first_name"]?> <?php $order_data["billing"]["last_name"]; ?> </td> 
                    <td> <?php $order_data["status"] ?> </td>
                <tr>
        <?php
            }
        }
        ?>
        </table>
    } 

$content = ob_get_clean();
return $content;   

我对数据库的查询

$orders_statuses = "'wc-completed', 'wc-processing', 'wc-on-hold'";
$orders_ids = $wpdb->get_col( "
    SELECT DISTINCT woi.order_id
    FROM {$wpdb->prefix}woocommerce_order_itemmeta as woim, 
         {$wpdb->prefix}woocommerce_order_items as woi, 
         {$wpdb->prefix}posts as p
    WHERE  woi.order_item_id = woim.order_item_id
    AND woi.order_id = p.ID
    AND p.post_status IN ( $orders_statuses )
    AND woim.meta_key LIKE '_product_id'
    AND woim.meta_value LIKE '$prod_id'
    ORDER BY woi.order_item_id DESC"
);
return $orders_ids;


jQuery("#product_id").on('change', function(){

console.log("list item selected");

var val = jQuery(this).val();    

console.log(val);

//Ajax call to php for result
jQuery.ajax({
        type: 'POST',
        url: '/scanner',
        data: { val: val},
        success: function (resp) {
            console.log(resp
        },
        error: function (err) {
            console.log(err)
        },
        complete: function () {
            console.log("Task Complete");
        }
    });
});