Question

我正在使用Wordpress，这是我的html代码：

<input class="form-control text-right" name="majorhead" required="" type="number" id="majorhead"/> 
<div class="result_majorhead"></div>

JS代码：

<script>
    jQuery("#majorhead").on("keyup",function(){    
        jQuery.get(ajaxurl,{'action': 'majorhead'}, 
             function (msg) { jQuery(".result_majorhead").html(msg);
                   });
      });

</script>

这是我在function.php中的代码

add_action('wp_ajax_nopriv_majorhead', 'majorhead_function');
add_action('wp_ajax_majorhead', 'majorhead_function');
function majorhead_function(){
  echo 'hello';
  exit();
}

现在，无论我在输入框中键入什么内容，我都可以在同一网页上显示一条简单消息“ Hello”。现在，我想在键入时在显示消息中显示输入文本中的确切值。

例如：如果我键入1，则应显示1，如果我键入另一个2，则应显示12。

Answer 1

您需要在Javascript中执行的操作是

添加“更改”事件，以便您可以使用箭头来控制“数字”输入。
获取输入值。

将值添加到GET参数中。

jQuery("#majorhead").on("keyup change",function(){ 
    var majorhead_value = $(this).val();
    jQuery.get(ajaxurl,{'action': 'majorhead','majorhead_value': majorhead_value}, 
         function (msg) { jQuery(".result_majorhead").html(msg);
    });

}）;

在您的PHP脚本中，您应该显示GET值：

function majorhead_function(){
echo $_GET['majorhead_value'];
exit();
}

如果您有多个输入，则可以这样处理它们：

jQuery("#text1, #text2, #text3").on("keyup change",function(){    
var majorhead_value = parseInt(0+$("#text1").val());
majorhead_value += parseInt(0+$("#text2").val());
majorhead_value += parseInt(0+$("#text3").val());

jQuery.get(ajaxurl,{'action': 'majorhead','majorhead_value': majorhead_value}, 
function (msg) { jQuery(".result_majorhead").html(msg);
});

}）;

我认为您的HTML将如下所示：

    <input class="form-control text-right" name="text1" required="" type="number" id="text1"/> 
<input class="form-control text-right" name="text2" required="" type="number" id="text2"/> 
<input class="form-control text-right" name="text3" required="" type="number" id="text3"/> 
<div class="result_majorhead"></div>

Answer 2

HTML代码

<input class="form-control" placeholder="Search Service" id="search_service" name="service" type="text" autocomplete="off" value="">

这是我在function.php中的Ajax函数

function search_service() {

    $search_ser = $_POST['search_ser'];

    echo $search_ser;

    die();

}

add_action('wp_ajax_search_service', 'search_service');

add_action('wp_ajax_nopriv_search_service', 'search_service');

JS代码：

jQuery( "#search_service" ).keyup( function() {

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

    var ajax_url = jQuery('#ajax_url_input').val();

    jQuery.ajax({
        type:'POST',
        url: ajax_url,
        data: {
            action: 'search_service',
            search_ser: search_ser,
        },
        beforeSend: function(){
        },
        success:function(data){

            jQuery("._services_list").html(data);

        }
    });

});

我键入时如何通过Jquery Ajax将输入文本中的值传递给php函数？ WordPress的

2 个答案: