Question

我正在使用php数据库查询开发一个网站。在我的Index.html上，我的网站上有一个seachbar，我已将phpquery.php加载到div中。

我现在想要在搜索栏中键入内容并让加载的phpquery.php在div / window / frame中重新加载。我试图用GET方法解决它，所以我基本上必须用搜索来调用URL，但即便如此，它也无法工作。

我的index.html：

<div>
  <form action="" method = "get">
    <p>
      <input id="suchfeld" name="search" type="text" placeholder="Search..." />
      <select id="sucheid" name="suche">
        <option value="all">Alle Kategorien</option>
        <option value="betreuer">Betreuer</option>
        <option value="thematik">Thematik</option>
        <option value="methodik">Methodik</option>
      </select>

      <input id="subres" type="submit" class="subresclass" />
    </p>
  </form>
</div>
<div id="loader"> </div>  //Trying to load the php file here and let it refresh only there 

<script>
$( "#loader" ).load( "phpquery.php" );

$('#subres').click(function() {
  var term = $('#suchfeld').val();
  $( "#loader" ).load( "phpquery.php?search=" + term + "&suche=all" );
// alert(term);           //term value tester
});
</script>

我的phpquery.php：

<?php
  require("dbconnect.php");
  mysqli_query($con,"SET NAMES 'utf8'");

  if ( !empty($_GET) ){
    $befehlpruefung = "SELECT * FROM themen WHERE thema 
      LIKE '%" . $_GET["search"] . "%' OR inhalt 
      LIKE '%" . $_GET["search"] . "%' ORDER BY thematik";

  }else{
    $befehlpruefung = "SELECT * FROM themen";
  } 

  $res = mysqli_query($con,$befehlpruefung);
  while($dsatz = mysqli_fetch_assoc($res))
  {
    echo  ""  //echo my DATA  
  }
  mysqli_close($con);
?>

我尝试使用.load点击解决此问题，但它没有第二次插入。

我的另一个尝试是尝试用object和iframe实现这个部分窗口，但都失败了。 iframe没有使用php，当我在搜索栏中输入新内容时，对象导入对我的搜索无响应

我的目标是将这个PHP文件插入到我网站的部分窗口中，所以如果我按下搜索它只刷新这个小窗口而不是整个网站。

很高兴看到任何建议让我前进。 Ty预先。

更新谢谢，通过更改提交到按钮并删除＆＃34;输入＆＃34;解决了这个问题。提交时间：

$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
$('#subres').click();
return false;
}
});
});

Answer 1

您只需将输入类型从“提交”更改为“按钮”，并添加带有按钮名称的值属性

<input id="subres" type="button" value="send" class="subresclass"/>

Answer 2

发送表单与点击链接非常相似。您的表单操作为空白，这意味着提交表单只会再次加载您的index.html。这会将空白查询加载到#loader。

您需要阻止表单实际发送，因为您手动处理了点击。您的代码设置了一个单击处理程序，但表单仍在发送中。使用jQuery，您最后可以return false;告诉浏览器该事件已完全处理。

我也简化了一切：

<div>
  <form id="searchform" action="phpquery.php" method="get">
    <p>
      <input name="search" type="text" placeholder="Search..." />
      <select name="kategorie">
        <option value="all">Alle Kategorien</option>
        <option value="betreuer">Betreuer</option>
        <option value="thematik">Thematik</option>
        <option value="methodik">Methodik</option>
      </select>
      <input id="subres" type="submit" class="subresclass" />
    </p>
  </form>
</div>
<div id="result"> </div>

JS：

$(document).ready(function() {
  var $form = $("#searchform");
  var searchURL = $form.attr("action");
  var $result = $("#result");
  $result.load(searchURL);

  $form.submit(function() {
    var query = $form.serialize();
    $result.load(searchURL + "?" + query);
    return false; // don't actually submit form
  });
});

Answer 3

当您单击输入按钮时，您正在提交表单，因此，整个页面重新加载，将事件处理程序添加到click函数，并阻止默认行为，如下所示：

<script>
$( "#loader" ).load( "phpquery.php" );

$('#subres').click(function(e) {
  e.preventDefault();
  var term = $('#suchfeld').val();
  $( "#loader" ).load( "phpquery.php?search=" + term + "&suche=all" );
// alert(term);           //term value tester
});
</script>

如何将php文件加载到内部框架/窗口/ div中

3 个答案: