PHPのmySQLとjQueryを使用して別のページに検索結果を表示する方法は？

Question

index.phpページに検索フォームがあります。私がしたいことは、私が検索をクリックすると、search_result.phpと呼ばれる別のページに結果を表示したいのです。私は、2つのフィールド、すなわちgenderとageの検証を行う検索フォームにjQueryを使用しています。私はjQueryを初めて使用しています。助けてください。ありがとうございました。

マイindex.phpページは

<script type="text/javascript"> 
     $(document).ready(function(){ 

     $("#search_form").submit(function(e) 
     { 
      var formObj = $(this); 
      var formURL = formObj.attr("action"); 

     if(window.FormData !== undefined) 
      { 
       var formData = new FormData(this); 
       $.ajax({ 
        url: formURL, 
        type: 'GET', 
        dataType: "html", //expect html to be returned 
        success: function(data, textStatus, jqXHR) 
        { 
          $("#multi-msg-search").html('<pre><code>'+data+'</code></pre>'); 
        }, 
        error: function(jqXHR, textStatus, errorThrown) 
        { 
         $("#multi-msg-search").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus='+textStatus+', errorThrown='+errorThrown+'</code></pre>'); 
        }   
       }); 
       e.preventDefault(); 
       e.unbind(); 
      } 
     }); 


     var v_gender = 1; 
     var v_age = 1; 
     var v_age1 = 1; 

     $("#submit-btn").click(function() 
      { 

       //gender 
       if($("#s_gender").val() == ''){ 
        $("#s_gender").css("border","2px solid red"); 
        $("#s_gender_error").show(); 
        v_gender = 1; 
       }else{ 
        $("#s_gender").css("border","2px solid green"); 
        $("#s_gender_error").hide(); 
        v_gender = 0; 
       } 

       //age 
       if($("#s_age").val() == ''){ 
        $("#s_age").css("border","2px solid red"); 
        $("#s_age_error").show(); 
        v_age = 1; 
       }else{ 
        $("#s_age").css("border","2px solid green"); 
        $("#s_age_error").hide(); 
        v_age = 0; 
       } 

       //age1 
       if($("#s_age1").val() == ''){ 
        $("#s_age1").css("border","2px solid red"); 
        $("#s_age1_error").show(); 
        v_age1 = 1; 
       }else{ 
        $("#s_age1").css("border","2px solid green"); 
        $("#s_age1_error").hide(); 
        v_age1 = 0; 
       } 

      if(v_gender == 0 && v_age == 0 && v_age1 == 0){ 

      //sending form from here 
      $("#search_form").submit(); 

      } //my code ends here 

     }); 

     }); 

    </script> 

<!-- ============ Home quick search form starts ===================== --> 
    <div class="profile_search"> 
    <div class="container wrap_1"> 
     <form action="search_result.php" method="GET" id="search_form" name="search_form" enctype="multipart/form-data" > 
     <div class="search_top"> 
     <div class="inline-block"> 
      <label class="gender_1">I am looking for :</label> 
      <div class="age_box1" style="max-width: 100%; display: inline-block;" > 
       <select id="s_gender" name="s_gender"> 
        <option value="">* Select Gender</option> 
        <?php 
         $get_gender = "SELECT * FROM genders"; 
         $run_gender = mysqli_query($con, $get_gender); 
          while ($row_gender = mysqli_fetch_array($run_gender)){ 
           $gen_id = $row_gender['gender_id']; 
           $gen_title = $row_gender['gender_title']; 
            echo "<option value='$gen_title' class='$gen_title'>$gen_title</option>"; 
          } 
        ?> 
       </select> 
      </div> 
     </div> 
     <div class="inline-block"> 
      <label class="gender_1">Religion :</label> 
      <div class="age_box1" style="max-width: 100%; display: inline-block;" > 
       <select id="s_religion" name="s_religion"> 
        <option value="">Doesn't Matter</option> 
        <option value="Hindu">Hindu</option> 
        <option value="Sikh">Sikh</option> 
        <option value="Chritian">Chritian</option> 
        <option value="Budhist">Budhist</option> 
        <option value="Other">Other</option> 
       </select> 
      </div> 
     </div> 
     <div class="inline-block"> 
      <label class="gender_1">Occupation :</label> 
      <div class="age_box1" style="max-width: 100%; display: inline-block;" > 
       <select id="s_occupation" name="s_occupation"> 
        <option value="">Doesn't Matter</option> 
        <?php 
         $get_occup = "SELECT * FROM occupation"; 
         $run_occup = mysqli_query($con, $get_occup); 
          while ($row_occup = mysqli_fetch_array($run_occup)){ 
           $occ_id = $row_occup['occ_id']; 
           $occ_title = $row_occup['occ_name']; 
            echo "<option value='$occ_title' class='$occ_title'>$occ_title</option>"; 
          } 
        ?> 
       </select> 
      </div> 
     </div> 
    </div> 
    <div class="inline-block"> 
     <div class="age_box2" style="max-width: 220px;"> 
     <label class="gender_1">Age :</label> 
     <input class="transparent" placeholder="From:" style="width: 34%;" type="text" value="" id="s_age" name="s_age">&nbsp;-&nbsp;<input class="transparent" placeholder="To:" style="width: 34%;" type="text" value="" id="s_age1" name="s_age1"> 
     </div> 
    </div> 
     <div class="inline-block"> 
      <label class="gender_1">Qualification :</label> 
      <div class="age_box1" style="max-width: 100%; display: inline-block;"> 
       <select id="s_qualification" name="s_qualification"> 
        <option value="">Doesn't Matter</option> 
        <?php 
         $get_educ = "SELECT * FROM education"; 
         $run_educ = mysqli_query($con, $get_educ); 
          while ($row_ed = mysqli_fetch_array($run_educ)){ 
           $educ_id = $row_ed['edu_id']; 
           $educ_title = $row_ed['edu_name']; 
            echo "<option value='$educ_title' class='$educ_title'>$educ_title</option>"; 
          } 
        ?> 
       </select> 
      </div> 
     </div> 
     <div class="submit inline-block"> 
      <input id="submit-btn" class="hvr-wobble-vertical" type="submit" name="home_quick_search" value="Find Matches"> 
     </div> 



    </form> 
    </div> 
    </div> 
<!-- ============ Home quick search form ends ===================== --> 

search_result.phpファイルです。

<div class="col-md-9 profile_left"> 
    <div class="paid_people"> 
     <h1>Profiles You Searched</h1> 
     <div class="row_1"> 

     <?php 
      date_default_timezone_set('Asia/Kolkata'); 
      require_once("includes/config.php"); 
      global $con; 

      if(isset($_GET['home_quick_search'])){ 

       $search_gender = $_GET['s_gender']; 
       $search_relegion = $_GET['s_religion']; 
       $search_occupation = $_GET['s_occupation']; 
       $search_age = $_GET['s_age']; 
       $search_age1 = $_GET['s_age1']; 
       $search_qualification = $_GET['s_qualification']; 

       $get_user = "SELECT * FROM profile_details WHERE YEAR(CURDATE())-YEAR(dob) BETWEEN '%$search_age%' AND '%$search_age1%' OR gender LIKE '%$search_gender%' OR main_caste LIKE '%$search_relegion%' OR education_type like '%$search_qualification%' OR occupation like '%$search_occupation%'"; 

       $run_user = mysqli_query($con, $get_user); 

       while ($row_user = mysqli_fetch_array($run_user)){ 

        $u_id = $row_user['user_id']; 
        $u_pid = $row_user['profile_id']; 
        $u_fname = $row_user['first_name']; 
        $u_relegion = $row_user['main_caste']; 
        $u_city = $row_user['city']; 
        $u_image = $row_user['photo']; 
        $u_dob = $row_user['dob']; 


       echo' 
         <div class="col-sm-6 paid_people-left"> 
         <ul class="profile_item"> 
          <a href="view_profile.php?userdetail_id=$u_id"> 
          <li class="profile_item-img"> 
           <img src="users-photo/resized_$u_image" class="img-responsive" alt="$u_fname"/> 
          </li> 
          <li class="profile_item-desc"> 
           <h4>Profile ID: $u_pid</h4> 
           <p>Age: $u_dob Yrs, $u_relegion</p> 
           <h5>View Full Profile</h5> 
          </li> 
          <div class="clearfix"> </div> 
          </a> 
         </ul> 
         </div> 
         <div class="clearfix"> </div> 
        '; 
       } 
      }  
     ?> 
     </div>  
    </div> 

Answer 1

Create a php script to receive http requests and fetch data from the database 
Create a php script called api.php on your server 
Copy and paste the example below and save it 

jQueryのAJAX

は、以下の内容でと同じディレクトリにclient.phpと呼ばれるHTMLスクリプトを作成して使用してAPIスクリプトからデータをフェッチするためのクライアントスクリプトを作成します。 it

セットアップ後、jqueryの

<h2> Client example </h2> 
    <h3>Output: </h3> 
    <div id="output">this element will be accessed by jquery and this text replaced</div> 

    <script id="source" language="javascript" type="text/javascript"> 

    $(function() 
    { 
    //----------------------------------------------------------------------- 
    // 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/ 
    //----------------------------------------------------------------------- 
    $.ajax({          
     url: 'api.php',     //the script to call to get data   
     data: "",      //you can insert url argumnets here to pass to api.php 
             //for example "id=5&parent=6" 
     dataType: 'json',    //data format  
     success: function(data)   //on recieve of reply 
     { 
     var id = data[0];    //get id 
     var vname = data[1];   //get name 


        $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname); //Set output element html 
     //recommend reading up on jquery selectors they are awesome 
     // http://api.jquery.com/category/selectors/ 
     } 
    }); 
    }); 

テストコードのベッドでお使いのブラウザで 後藤client.phpをフェッチすることができ、あなたのすべきテストDBのデータセットを作成します。以下を参照

id：1名前：po WER

@ref：https://openenergymonitor.org/emon/node/107