使用AJAX+处理带有复选框的表单；PHP与MySQL查询

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

希望这个问题能对像我这样想探讨这个话题的新手有用

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

我将解决方案翻译为：它解决了必须处理复选框的问题。它将保留以前的值，因此需要重置

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

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

------结束------

------注释------

注意：我的问题，在本文后面看到的，是我无法摆脱将复选框值传递到php页面，我想是因为javascript中出现错误或缺少代码

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

---

我找到了两个新手教程，它们都很有效

虽然我坚持第二次更新它来使用msqli。原因是：它提供了SQL文本文件作为附件，以便立即填充一个虚拟MySQL数据库

如你所见，为了简单起见，他们采取了程序化的方式

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

到

以这样一种方式，如果要列出所有以某个字符/字符串开头的书名，则需要查询所有包含该字符/字符串的书名

所以在HTML表单部分，我添加了这个复选框代码

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

到javascript

这就是PHP程序

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

只是为了测试，但我无法得到要打印的复选框的“是”值

很明显，我在javascript脚本中遗漏了一些内容或做了一些错误的事情

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

多谢各位

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

---

将脚本更改为：

<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>

---

在php代码中。

您好，有一个进展。现在我打印了“是”，但两种情况下都打印。如果我选中复选框，如果我不选中它。酷，现在它工作了！因此，使用AJAX的复选框表单有点棘手。谢谢你的支持。现在我必须离开，但我会用编辑和解决方案更新问题。再次谢谢你。是否有一种方法可以传递所有表单数据，而不必在

var data=

行中逐个添加它们？是的，我很高兴这很有帮助。我认为将ajax与jquery结合使用会更容易：

LIKE '%$book_name%'

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

<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;

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

...

$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
...

<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>

if($_POST['anychar'])