在一个项目中执行服务器端和客户端操作

Question

I found an example that does exactly what I am after. My only issue is that this syntax calls a secondary file of book-suggestion.php If possible, I would like a way of performing all of this function in one page.

Here is step 1 - the client side

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.');
      }
     }
    }
}

And here is part 2 - the server side

<?php
    //provide your hostname, username and dbname
    $host=""; 
    $username="";  
    $password="";
    $db_name=""; 
    //$con=mysql_connect("$host", "$username", "$password")or die("cannot connect");
    $con=mysql_connect("$host", "$username", "$password");
    mysql_select_db("$db_name");
    $book_name = $_POST['book_name'];
    $sql = "select book_name from book_mast where book_name LIKE '$book_name%'";
    $result = mysql_query($sql);
    while($row=mysql_fetch_array($result))
    {
    echo "<p>".$row['book_name']."</p>";
    }
?>

What do I need to do to combine these parts so that they are all in one file?

Answer 1

You could do it all one page, I use a .htaccess rewrite where everything is funneled through just one index page, so essentially doing the same thing. You just do the php above the output of your html and exit when done:

/index.php

<?php
# Create some defines
define('DB_HOST','localhost');
define('DB_NAME','database');
define('DB_USER','root');
define('DB_PASS','');
# Create a PDO connection, mysql_* is out of date and unsafe
# Review PDO, there are some presets to the connection that should be explored
# like emulated prepares and other such niceties
$con = new PDO('mysql:host='.DB_HOST.';dbname='.DB_NAME,DB_USER,DB_PASS);
# If there is a value posted, do action
if(!empty($_POST['book_name'])) {
    # Bind parameters
    $sql = "select book_name from book_mast where book_name LIKE ?";
    $query = $con->prepare($sql);
    $query->execute(array($book_name.'%'));
    # Fetch normally
    while($row = $query->fetch(PDO::FETCH_ASSOC)) {
        echo "<p>".$row['book_name']."</p>";
    }
    ##*****THE IMPORTANT PART ******##
    # Stop so you don't process the rest of the page in the ajax
    exit;
}
?>
<!-- THE REST OF YOUR HTML HERE -->
<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", "index.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>