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数据库。

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

这是页面的mysqli版本 book-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);
}

?>

这是表单部分

<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字段时，就像谷歌一样，在它下面会列出所有以打字字符开头的标题，然后输入它们只匹配那些以相同字符串开头的标题。

现在，对于教学法，我想在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 * / tag我的更改。然后你可以使用

if($_POST['anychar'])

在您的PHP代码中。

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

1 个答案: