Question

我下面有一个搜索栏代码，单击“搜索”后，将在其中加载带有查询结果的新页面。如何更改它，而不是加载新页面，而是在同一页面的模式弹出窗口中打开查询结果？

index.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="search.php">
    <input type="text" name="q" placeholder="Enter query"/>
    <input type="submit" name="search" value="Search" />
  </form>
</body>

search.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 .= "<a href='audio/$audio_name'>$audio_name</a> ";
      }
    }
    echo $output;
  }else{
    "Please add search parameter";
  }

  mysqli_close($conn);
?>

Answer 1

您需要在页面上使用JavaScript来执行对search.php的AJAX调用。该PHP文件最好返回JSON数据或可以添加到模式窗口的完整HTML。

从概念上讲：

使用JavaScript执行AJAX POST到search.php
具有search.php以JSON格式返回数据。
让JavaScript捕获返回的数据，对其进行遍历并创建HTML元素。
使用JavaScript打开新的模式窗口。
使用JavaScript将HTML元素添加到模式主体中。

您不一定需要使用JavaScript来创建模式窗口。您可以用纯HTML创建它，然后填充并使用JavaScript打开。

Answer 2

欢迎来到stackoverflow。这是我的解决方案，因此，首先，您必须捕获表单提交，该技术正在使用jQuery进行GET请求，因为您使用的是Bootstrap，而Bootstrap使用的是jQuery，所以我假设您已经在使用jQuery

$('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);
    });
});

PHP-在Bootstrap模态窗口中显示查询搜索结果

2 个答案: