title: load a php query file in an html index page using ajax or jquery
body: <p>index.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="my.css"&gt;
  
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  $(function() {
  
      $(".search_button").click(function() {
          // getting the value that user typed
          var searchString    = $("#search_box").val();
          // forming the queryString
          var data            = 'search='+ searchString;
  
          // if searchString is not empty
          if(searchString) {
              // ajax call
              $.ajax({
                  type: "POST",
                  url: "query.php",
                  data: data,
                  beforeSend: function(html) { // this happens before actual 
                      $("#results").html(''); 
                      $("#searchresults").show();
                      $(".word").html(searchString);
                 },
                 success: function(html)
                 { // this happens after we get results
                      $("#results").show();
                      $("#results").append(html);
                 }
              });    
          }
          return false;
      });
  
      $(document).ready(function{
      $.ajax({
      url: "query.php"
      }).done(function(data) {
      $('body').html(data);
      });
          });
     });
    &lt;/script&gt;
  
  
          &lt;script type="text/javascript"&gt;
  
      $(document).ready(function() {
  
  
   $.ajax({
      type: "POST",
      url: "query.php",
      dataType: "text",
      data: dataString,
      success: function (response)
      {
        alert(response);    //alert responce from  query.php
      },
      error:function (xhr, ajaxOptions, thrownError)
     {
        alert(xhr);
  
      }
     });
  
    });
  
    &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body &gt;
  
  &lt;div id="container"&gt;
  &lt;div style="margin:20px auto; text-align: center;"&gt;
  &lt;form method="post" action="query.php"  &gt;
      &lt;input type="text" name="search" id="search_box" class='search_box'/&gt;
      &lt;input type="submit" value="Search" class="search_button" /&gt;&lt;br /&gt;
  &lt;/form&gt;
  
  &lt;/div&gt; 
  
  
  &lt;div&gt;
  
  &lt;div id="searchresults"&gt;&lt;/div&gt;
  &lt;ul id="results" class="update"&gt;
  &lt;/ul&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  
   query.php
  
  &lt;?php
  
          $user_name = "root";
          $password = "";
          $database = "my_db2";
          $server = "127.0.0.1";
  
          $db_handle = mysql_connect($server, $user_name, $password);
          $db_found = mysql_select_db($database, $db_handle);
  
  
  
  
          $SQL = "SELECT * FROM user WHERE Hometown = 'Quahog'";
  
          //searching for what was entered into the search box
          if (isset($_POST['search']))
          {           
              $search_term = mysql_real_escape_string($_POST['search']);
  
              //concatenating the $SQL variable above
              $SQL .= "AND id = '{$search_term}'";
              $SQL .= "OR Hometown = 'Quahog' AND FirstName = '{$search_term}'";
              $SQL .= "OR Hometown = 'Quahog' AND LastName = '{$search_term}'";
              $SQL .= "OR Hometown = 'Quahog' AND Age = '{$search_term}'";
              $SQL .= "OR Hometown = 'Quahog' AND Job = '{$search_term}'";
  
          }
  
          $result = mysql_query($SQL) or die(mysql_error());  
  ?&gt;
  &lt;html&gt;
  
          &lt;/head&gt;
  
              &lt;body&gt;
  
              &lt;h1&gt; Persons&lt;/h1&gt;
  
                  &lt;table border = "1"   width = "100%"    cellpadding = "5"   cellspacing = "2"&gt;
  
                  &lt;tr&gt;
                      &lt;td&gt;&lt;strong&gt;ID&lt;/strong&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;strong&gt;First Name&lt;/strong&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;strong&gt;Last Name&lt;/strong&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;strong&gt;Age&lt;/strong&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;strong&gt;Hometown&lt;/strong&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;strong&gt;Job&lt;/strong&gt;&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;?php                   
                              while ($row = mysql_fetch_array($result)) { 
                  ?&gt;
  
                  &lt;tr&gt;
                      &lt;td&gt;&lt;?php echo $row['id']; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $row['FirstName']; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $row['LastName']; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $row['Age']; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $row['Hometown']; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $row['Job']; ?&gt;&lt;/td&gt;
  
  
                  &lt;/tr&gt;
                  &lt;?php } ?&gt;              
  
  &lt;/table&gt;    
  
  
              &lt;/body&gt;
  
  &lt;/html&gt; 
  </code></pre>
  
  <p>I am new to javascript, jquery and ajax and I would like some help on modifying the above code so that when the page loads, I can view the results of a php/mysql query named 'query.php' into the index file of my html page. 
  Any help will be greatly appreciated.</p>