具有AJAX + PHP和MySQL查询复选框处理的表单

Question

我正在本地xampp测试环境中使用AJAX PHP和MySQL进行首次实验。

希望这个问题对像我这样的新手有用。

------编辑[孙先生解决] ------

我将自己的解决方案翻译如下：它整理出必须处理该复选框。 它将保留先前的值，因此确实需要重置。

同样在这篇文章/问题的结尾，我在php代码中添加了修改以实现目标：修改查询操作数。

这个问题与下面链接的第二个教程有关。 如果要遵循此步骤，则必须从教程页面下载文件：-)

- - - 结束 - - -

------笔记------

注意：我的问题（在本文后面会看到）是我无法摆脱将复选框值传递到php页面的问题，我想这是因为javascript中的错误或代码丢失。

注意：请不要建议使用jQuery，谢谢:-)

---

我发现了两个针对新手的教程，它们都可以工作

https://www.w3schools.com/php/php_ajax_database.asp

http://www.w3resource.com/ajax/working-with-PHP-and-MySQL.php

尽管我坚持第二次更新以使用msqli。 原因：它提供SQL文本文件作为附件，以使其立即填充虚拟MySQL DB。

如您所见，为了简单起见，它们采用了程序方式。

这是页面book-suggestion.php的mysqli版本

<?php
$host="localhost"; 
$username="root";  
$password="";
$db_name="book_mast"; 

$book_name = $_POST['book_name'];

if ($book_name != "") {
    $con=mysqli_connect($host, $username, $password, $db_name);

    if (!$con) {
        die('Could not connect: ' . mysqli_error($con));
    }


    mysqli_select_db($con, $db_name);

    $sql = "select book_name from book_mast where book_name LIKE '$book_name%'";

    $result = mysqli_query($con, $sql);

    while($row=mysqli_fetch_array($result))
    {
    echo "<p>".$row['book_name']."</p>";
    }

    /* close connection */
    mysqli_close($con);
}

?>

这是表格部分

<form name="ajax-demo" id="ajax-demo">
    <div class="control-group">
        <label class="control-label" for="book">Book</label><br>
          <div class="controls">
          <input type="text" id="book" onKeyUp="book_suggestion()">
          <div id="suggestion"></div>
        </div>
    </div>

    <div class="control-group">
        <div class="controls">
            <button type="submit" class="btn btn-success">Submit</button>
        </div>
    </div>
</form>

很好地遵循本教程，它可以工作。

当您开始在txt字段中输入内容时（例如在google中），在其下方将列出所有以键入的字符开头的标题，并且随着输入的进行而进行的标题仅与以相同字符串开头的标题匹配。

现在，对于教学法，我想在html页面中添加一个复选框。

如果选中， 则复选框应将上述PHP源中的查询从

LIKE '$book_name%'

至

LIKE '%$book_name%'

以这样一种方式，而不是列出所有以某个字符/字符串开头的书名，而是查询所有包含此类字符/字符串的书名。

因此，在HTML表单部分中，我添加了此复选框代码

Search for any match <input type="checkbox" name="anychar" id="anychar" value="yes"></input>

目前，AJAX javascript是

<script>
    function book_suggestion()
    {
    var book = document.getElementById("book").value;
    var xhr;
     if (window.XMLHttpRequest) { // Mozilla, Safari, ...
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE 8 and older
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    var data = "book_name=" + book;
         xhr.open("POST", "book-suggestion.php", true); 
         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                  
         xhr.send(data);
         xhr.onreadystatechange = display_data;
        function display_data() {
         if (xhr.readyState == 4) {
          if (xhr.status == 200) {
           //alert(xhr.responseText);      
          document.getElementById("suggestion").innerHTML = xhr.responseText;
          } else {
            alert('There was a problem with the request.');
          }
         }
        }
    }
</script>

我试图添加

var anychar = document.getElementById("anychar").value;

到JavaScript

这到PHP程序

if (isset($_POST['anychar'])){
    echo $_POST['anychar']; // Displays value of checked checkbox.
}

仅出于测试目的，但我无法获得要打印的复选框的“是”值。

看起来很明显，我在javascript脚本中缺少了某些内容或做错了什么。

您能否暗示如何正确使用AJAX javascript处理该复选框？

谢谢

---- PHP的最终源代码----

...

$book_name = $_POST['book_name']; //as the original

if(isset($_POST['anychar']) && $_POST['anychar'] == 'yes') { 
    $book_name = "%".$book_name; 
    }

if (($book_name != "") and ($book_name != "%")) { //as the original
...

Answer 1

将您的脚本更改为此：

<script>
function book_suggestion()
{
var book = document.getElementById("book").value;

var anychar = 'no';/*NEW CODE*/
if (document.getElementById("anychar").checked) /*NEW CODE*/
{
   anychar = 'yes';/*NEW CODE*/
} /*NEW CODE*/

var xhr;
 if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var data = "book_name=" + book + "&anychar=" + anychar; /*NEW CODE*/
     xhr.open("POST", "book-suggestion.php", true); 
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                  
     xhr.send(data);
     xhr.onreadystatechange = display_data;
    function display_data() {
     if (xhr.readyState == 4) {
      if (xhr.status == 200) {
       //alert(xhr.responseText);      
      document.getElementById("suggestion").innerHTML = xhr.responseText;
      } else {
        alert('There was a problem with the request.');
      }
     }
    }
}
</script>

查看/ * NEW CODE * /标签进行更改。然后，您可以使用

if($_POST['anychar'])

在你的PHP代码。