php - 在 jquery ajax 中使用两个文本字段数据的搜索功能

Question

我想从 MySQL 表中搜索和检索数据。我使用了两个文本字段来获取搜索关键词。我为此使用了 jquery ajax。我第一次只使用位置进行搜索。然后就可以了。当我同时使用这两个文本字段时，它不起作用。然后我总是没有数据。

    <div class="container">
<form action="search.php" method="post">
    <input type="text" id="location" name="location">&nbsp;
    <input type="text" id="catogary" name="catogary">
    <script>
        $('#location,#catogary').keyup(function () {
            var loca=$(this).val();
            var cato=$(this).val();
            if(loca!='' || cato!=''){
                $.ajax({
                    url:"search.php",
                    method:"POST",
                    data:{searc:loca,cato:cato},
                    DataType:"text",
                    success:function (data) {
                        $('#result').html(data);
                    }
                });
            }
            else{
                $('#result').html('');
            }

        });
    </script>
</form>
<div id="result"></div>
</div>

php代码

    <?php

    $conn=mysqli_connect("localhost","root","","internship");
    $output='';
    $sql="select * from vacancy where location like '%".$_POST["searc"]."%' 
    and catogary like '%".$_POST["cato"]."%'";
    $res=mysqli_query($conn,$sql);
    if(mysqli_num_rows($res)>0){

    while($row=mysqli_fetch_assoc($res)){
    ?>
        <div class="bs-calltoaction bs-calltoaction-primary">
                    <div class="row">
                        <div class="col-md-9 cta-contents">
                            <h1 class="cta-title">Its a Call To Action</h1>
                            <div class="cta-desc">
     <input type="text" value='<?= $row['catogary'];?>' readonly style="width: 75%"><br><br>
     <input type="text" value='<?= $row['company_name'];?>' readonly style="width:    75%"><br><br>
     <input type="text" value='<?= $row['location'];?>' readonly style="width: 75%"><br><br>
     <input type="text" value='<?= $row['qulification'];?>' readonly style="width: 75%"><br><br>
     <input type="text" value='<?= $row['catogary'];?>' readonly style="width: 75%"><br><br>
     <input type="text" value='<?= $row['indate'];?>' readonly style="width: 37.5%">&nbsp;
     <input type="text" value='<?= $row['expdate'];?>' readonly style="width: 37.5%">
                 </div>

                        </div>
                        <div class="col-md-3 cta-button">
                            <a class="btn btn-primary btn-large" 
                    href="#myModal" data-toggle="modal">Apply for job</a>
                        </div>
                    </div>
                </div>
             <?php
        }



          }
           else{
            echo 'no data';
             }

            ?>

Answer 1

改变下面两行，

var loca=$(this).val();
var cato=$(this).val();

通过，

var loca=$('#location').val();
var cato=$('#catogary').val();

在 $.ajax() 中也使用 dataType 而不是 DataType ,

$.ajax({
   url:"search.php",
   method:"POST",
   data:{searc:loca,cato:cato},
   dataType:"text", // use dataType not DataType
   success:function (data) {
       $('#result').html(data);
   }
});