Question

组合多个输入的AJAX建议。怎么做？

            <label class="bookLabel">Book Id</label>
            <input id="book" class="bookNameInput" name="bookId" ><br>
            <label class="bookLabel">Book Name</label>
            <label class="bookFormLabel">Title </label>
            <input id="bookName" class="bookNameInput" name="bookTitle" autocomplete="off" required />
            <div id="searchResult">

    </div>

在MySQL数据库中，我有一个Table Named books和Attribute Named BookID和BookName。我正在研究PHP。

        <script type="text/javascript" src="application/jquery-1.8.0.min.js"></script>
        <script type="text/javascript">
        $(function(){
            $(".bookNameInput").keyup(function()
            {
                var bookName = $(this).val();
                var dataString = 'bookNameInput='+ bookName;
                if(bookName!='')
                {
                    $.ajax({
                        type: "POST",
                        url: "application/searchBook.php",
                        data: dataString,
                        cache: false,
                        success: function(html)
                        {
                            $("#searchResult").html(html).show();
                        }
                    });
                }return false;
            });

            jQuery("#searchResult").live("click",function(e){
                var $clicked = $(e.target);
                var $name = $clicked.find('.name').html();
                var decoded = $("<div/>").html($name).text();
                $('#bookName').val(decoded);
            });
            jQuery(document).live("click", function(e) {
                var $clicked = $(e.target);
                if (! $clicked.hasClass("bookNameInput")){
                    jQuery("#searchResult").fadeOut();
                }
            });
            $('#bookName').click(function(){
                jQuery("#searchResult").fadeIn();
            });
        });

但这是一个输入框。如何为两个输入执行此操作，以便我可以这样做：

$q=$_POST['bookId'];
$r=$_POST['bookNameInput'];
$query="select * from books where BookId like '%$q%' and BookName like '%$r%' order by BookID";
$sql_res= mysqli_query($connection, $query);
while($row=mysqli_fetch_assoc($sql_res))
{
    $Name=$row['BookName'];
    $b_name='<strong>'.$q.'</strong>';
    $final_name = str_ireplace($q, $b_name, $Name);
    ?>
    <div id="show">
        <span class="name"><?php echo $final_name; ?></span><br>
    </div>
<?php
}

Answer 1

jQuery中的ajax函数接收一个设置对象。在对象中，您使用dataString来传递data属性。 jQuery的ajax方法获取数据中的值并通过post查询传递它们。传递一个对象，而不是传递一个字符串。

var dataString = 'bookNameInput='+ bookName;// OLD
var dataObject = {bookNameInput:bookName,bookIDinput:bookID}; //New

由于您正在使用keyup事件，它将一次触发一个输入，因此您需要摆脱依赖关键字this的部分来检索数据：

var bookName = $(this).val();//OLD
var bookID = $('#book').val();
var bookName = $('#bookName').val();

AJAX从多个字段搜索MySQL数据库

1 个答案: