时间戳

首页 > 解决方案 > 以模式而不是新页面加载查询搜索结果

php - 以模式而不是新页面加载查询搜索结果

问题描述

编辑：这是一个屏幕截图：模态屏幕截图

编辑：我编辑了代码，单击“搜索”按钮时不再重定向到新页面，但 index.php 的输出仍未显示在模式中。当我单击“搜索”时，模式弹出正文为空。如何让 index.php 的输出显示在模态的正文中？

我有一个搜索栏供用户输入查询。单击“搜索”后，查询结果应出现一个模式。

我的代码在模式窗口中没有显示任何内容。当我单击“搜索”按钮时，模式窗口会打开，但随后会立即加载一个带有查询结果的新页面。

如何更改它以使查询结果显示在模式窗口而不是新页面中？

索引.php

<head>
  <title>Search</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <link rel="stylesheet" type="text/css" href="style.css"/>
 </head>
 <body>
  <form method="POST" action="#">
   <input type="text" name="q" placeholder="Enter query"/>
   <input type="button" name="search" value="Search" data-toggle="modal" data-target="#mymodal">
   </form>
 </body>

<script>
  $('form').submit(function(e){
  e.preventDefault() // do not submit form
      // do get request
     $.get( 'search.php', { q : },function(e){
         // then show the modal first
         $('#mymodal').modal('show');
         // then put the results there
         $('#mymodal:visible .modal-container .modal-body').html(e);
     });
  });
</script>

 <!-- The Modal -->
<div class="modal" id="mymodal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">

      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

搜索.php

<?php
  error_reporting(E_ALL);
  ini_set('display_errors',1);

  include_once('db.php'); //Connect to database
  if(isset($_POST['q'])){
    $q = $_POST['q'];

    //get required columns
    $query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%$q%' OR `yupikWord` LIKE '%$q%'") or die(mysqli_error($conn)); //check for query error
    $count = mysqli_num_rows($query);
    if($count == 0){
      $output = '<h2>No result found</h2>';
    }else{
      while($row = mysqli_fetch_assoc($query)){
        $output .= '<h2>'.$row['yupikWord'].'</h2><br>';
        $output .= '<h2>'.$row['englishWord'].'</h2><br>';
        $output .= '<h2>'.$row['audio'].'</h2><br>';
        $audio_name = $row['audio'];
        $output .= '<td><audio src="audio/'.$audio_name.'" controls="control">'.$audio_name.'</audio></td>';
      }
    }
    echo $output;
  }else{
    "Please add search parameter";
  }

  mysqli_close($conn);
?>

标签： phpjquerymysqlajaxbootstrap-modal

解决方案

您可以通过以下更改尝试此可能的解决方案 - 删除表单标签 - 在搜索按钮上添加 Onclick 列表 - 首先将内容放入模态，然后显示模态

索引.php

$(document).ready(function () {

$('.search').click(function () {
    var q= $('#q').val();

    // AJAX request
    $.ajax({
        url: 'search.php',
        type: 'post',
        data: {
            q: q
        },
        success: function (response) {
            // Add response in Modal body
            $('.modal-body').html(response);


            $('#mymodal').modal('show');
        }
    });
});
});
<head>
   <title>Search</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href='bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
   <!-- Script -->
   <script src='jquery-3.1.1.min.js' type='text/javascript'></script>
   <script src='bootstrap/js/bootstrap.min.js' type='text/javascript'></script>
</head>
<body>
   <input type="text" id="q" name="q" placeholder="Enter query"/>
   <input type="button" class="search" name="search" value="Search">
</body>
<!-- The Modal -->
<div class="modal" id="mymodal">
   <div class="modal-dialog">
      <div class="modal-content">
         <!-- Modal Header -->
         <div class="modal-header">
            <h4 class="modal-title">Modal Heading</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
         </div>
         <!-- Modal body -->
         <div class="modal-body">
         </div>
         <!-- Modal footer -->
         <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>

推荐阅读