使用 AJAX 发送隐藏的输入数据

Question

我正在使用AJAX live search 插件。
它将输入数据传递给backend-search.php
backend-search.php 从数据库中选择数据并返回到搜索页面。
现在我想通过搜索查询传递一个隐藏的输入值。

隐藏输入

<input type="hidden" name="group" value="<?php echo $grp_id; ?>" />

以下是我在search.php中的html

<div class="search-box">
   <input type="text" autocomplete="off" placeholder="Search..." />    
<div class="result"></div>

Javascript

<script type="text/javascript">
$(document).ready(function(){
    $('.search-box input[type="text"]').on("keyup input", function(){
        /* Get input value on change */
        var term = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(term.length){
            $.get("backend-search.php", {query: term}).done(function(data){
                // Display the returned data in browser
                resultDropdown.html(data);
            });
        } else{
            resultDropdown.empty();
        }
    });
    // Set search input value on click of result item
    $(document).on("click", ".result p", function(){
        $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
        $(this).parent(".result").empty();
    });
});
</script>

上面的js如何发送隐藏输入框的数据？

Answer 1

您可以像这样使用$.post 而不是$.get：

$.post( "backend-search.php?query="+ term, { hidden_key: "hidden_value"})
.done(function(data) {
    alert( "Data Loaded: " + data );
});

所以，为您的代码定制它，

if(term.length) {
    // get value of hidden field
    var hidden_value = $('[name="group"]').value(); 
    // make a post request, but also pass query params 
    $.post("backend-search.php?query=" + term, { group: hidden_value})
       .done(function(data){
           // Display the returned data in browser
           resultDropdown.html(data);
        });
    }

这里，? 标记之后的所有内容都作为查询字符串传递（即通过 get 方法），而隐藏字段则通过 Post 方法传递。 在您的 Php 脚本中，使用 print_r($_REQUEST) 验证您是否获得了所需的 2 个参数。

此外，您应该像 encodeURIComponent(term) 这样对 URI 参数进行编码，以确保您的 javascript 在用户输入特殊字符时不会中断