使用AJAX + PHP和MySQL查询处理复选框的表单

Question

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

希望这个问题可能对像我这样的新手想要解决这个问题很有用。

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

我翻译成自己的解决方案如下：它整理出来，该复选框已被处理。它将保持以前的值，因此它需要重置。

同样在这篇文章/问题的结尾，我已经在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数据库。

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

这里是页的书，suggestion.php

<?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); 
} 

?> 

的mysqli的版本是这样的形式部分

<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页面。

如果选中，复选框应该从

LIKE '$book_name%' 

在上面的PHP源查询更改为

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代码* /标签为我的change.Then你可以使用

if($_POST['anychar']) 

在您的PHP代码。