Выполнение операций на стороне сервера и на стороне клиента в одном проекте

Question

Я нашел пример, который делает то, что я делаю. Моя единственная проблема заключается в том, что этот синтаксис вызывает дополнительный файл book-suggestion.php. Если возможно, я хотел бы, чтобы он выполнил всю эту функцию на одной странице.

Вот шаг 1 - на стороне клиента

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

А вот часть 2 - на стороне сервера

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

Что мне нужно сделать, чтобы объединить эти части так, что все они в одном файле?

Answer 1

Вы можете сделать это на одной странице, я использую перезапись, где все перемещается по одной индексной странице, поэтому, по сути, делаю то же самое. Вы просто сделать PHP над выходом вашего HTML и exit когда сделано:

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