Q:

Variable in jQuery dialog to be passed for use in php function via ajax

I think I am close. I'm trying to pass variables from jquery to a php function using ajax. I've included the html and script. But I should note, the php file in "url:" is the same file where this html code and script is written. Does the php file have to be external to the script. Or, can the "url:" be followed by a function? Or does this even matter? I'm trying to figure out what I'm doing incorrect. The "alert(data)" produces a popup window with nothing in it. For now I am just trying to assign "success" to book_title.
<!doctype html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <title>jQuery UI Dialog - Default functionality</title>
      <link rel="stylesheet" href="//whosgotbooks.com/jquery/jquery-ui-1.10.4.custom.css">
      <script src="//whosgotbooks.com/jquery/jquery-1.10.2.js"></script>
      <script src="//whosgotbooks.com/jquery/jquery-ui-1.10.4.custom.js"></script>
      </head>
      <body>
      <div id="dialog" title="Google Books Search Results" style="display:none;">

  <script>
  $(function() { 
  $( "#dialog" ).dialog({
    height: 550, width: 450});
   $( ".btn" ).click(function(){
     $.ajax({
          type: "POST",
          url: 'book-search-google.php',
          data: { book_title: "success" },
            success: function(data)
            {
            alert(data);
            },
            error: function(errorThrown){
            alert('error');
            }
            });
   $( "#dialog" ).dialog( "close" ); 
   }); 
  });
  </script> 

Here is my code where I hope to pass the variable "book_title". Again, this code is in the same file (book-search-google.php) as the html and script code.
$book_title = $_POST['book_title'];
echo "$book_title";

Here is the code where I have an input line. @Lokesh gave me a good answer, but I now think it is important to show that I am trying to pass variables depending upon a user selecting one of the 10 "Select" buttons that appear next to each result in my jquery dialog window:
<?php foreach ($data['items'] as $item) { ?>
        <?php for($i =1; $i <11; $i++) { ?>     
                  <tr>
            <td>
                       <strong><u><div style="font-size: 14px";><?php printf($item['volumeInfo']['title'])?></u></div></strong>
                         <strong>Author: </strong><?php printf( $item['volumeInfo']['authors'][0])?><br />
                         <strong>Published: </strong><?php printf( $item['volumeInfo']['publishedDate']); ?><br />                       
               <strong>Page(s): </strong><?php printf( $item['volumeInfo']['pageCount']); ?><br />
                         <strong>Publisher: </strong><?php printf( $item['volumeInfo']['publisher']); ?><br />
                         <strong>Category: </strong><?php printf( strtolower($item['volumeInfo']['printType']).', '.strtolower($item['volumeInfo']['categories'][0])); ?>&nbsp;&nbsp;
               <strong>ISBN: </strong><?php printf( $item['volumeInfo']['industryIdentifiers'][0]['identifier']); ?></td>
            <td><p><input type="submit" method="post" name="selectbook" value="Select" class="btn" id="returnvalues$i"/></p>
            <img src="<?php printf( rawurldecode($item['volumeInfo']['imageLinks']['smallThumbnail'])); ?>" />
                    </td>
            <tr><td style="width:420px"><p><strong>Description: </strong><?php printf( $item['volumeInfo']['description']); ?><br /></p></td>           
            </tr>
            </tr>

A:

Code works fine.. try debugging through a browser console rather alerting a raw html.
To play around clean code you can either put your server code on other page and bind result to an search box. 
  <html lang="en">
  <head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//whosgotbooks.com/jquery/jquery-ui-1.10.4.custom.css">
  <script src="//whosgotbooks.com/jquery/jquery-1.10.2.js"></script>
  <script src="//whosgotbooks.com/jquery/jquery-ui-1.10.4.custom.js"></script>
  </head>
  <body>

  <div id="dialog" title="Google Books Search Results" style="display:;">
    <input type="text" id="txtSrch"/>
    <input type="button" class="btn" value="SEARCH"/><br/>
      <?php

        if(isset($_POST['book_title']))
        {
          $book_title = $_POST['book_title'];

         //loop through dataset in you case
          for($i=1;$i<=10;$i++)
          {
                echo "Result Set $i<input type='submit' class='btn' value='Select'  id='select_$i'/><br/>";
          }
        }
      ?>
  <div> 
    <script>
     $(function() { 
         $( "#dialog" ).dialog({
           height: 550, width: 450});
           $( ".btn" ).click(function(){
              if(this.id.indexOf('select')>-1)
      {
        var id = (this.id.split("_"))[1];
        console.log(id);
      }
              else
              {

                    $.ajax({
                       type: "POST",
                       url: 'test.php',
                   async:true,
                       data: { book_title: $("#txtSrch").val() },
                       success: function(data)
                       {
                         console.log(data);
                         $("#dialog").html(data);
                        },
                        error: function(errorThrown){
                        alert('error');
                        }
                 });
        //$( "#dialog" ).dialog( "close" ); 
              }
          }); 
    });
</script> 

