load a php query file in an html index page using ajax or jquery

Question

index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="my.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


<script type="text/javascript">

$(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);
    });
        });
   });
  </script>


        <script type="text/javascript">

    $(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);

    }
   });

  });

  </script>

</head>
<body >

<div id="container">
<div style="margin:20px auto; text-align: center;">
<form method="post" action="query.php"  >
    <input type="text" name="search" id="search_box" class='search_box'/>
    <input type="submit" value="Search" class="search_button" /><br />
</form>

</div> 


<div>

<div id="searchresults"></div>
<ul id="results" class="update">
</ul>

</div>
</div>

</body>
</html>



 query.php

<?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());  
?>
<html>

        </head>

            <body>

            <h1> Persons</h1>

                <table border = "1"   width = "100%"    cellpadding = "5"   cellspacing = "2">

                <tr>
                    <td><strong>ID</strong></td>
                    <td><strong>First Name</strong></td>
                    <td><strong>Last Name</strong></td>
                    <td><strong>Age</strong></td>
                    <td><strong>Hometown</strong></td>
                    <td><strong>Job</strong></td>
                </tr>

                <?php                   
                            while ($row = mysql_fetch_array($result)) { 
                ?>

                <tr>
                    <td><?php echo $row['id']; ?></td>
                    <td><?php echo $row['FirstName']; ?></td>
                    <td><?php echo $row['LastName']; ?></td>
                    <td><?php echo $row['Age']; ?></td>
                    <td><?php echo $row['Hometown']; ?></td>
                    <td><?php echo $row['Job']; ?></td>


                </tr>
                <?php } ?>              

</table>    


            </body>

</html>

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.

ghost · Answer 1 · 2014-01-30T04:56:54.820

1

$(document).ready(function() {

jQuery.ajax({
        type: "POST",  //  this is post request u can also do get request
        url: "query.php", 
        dataType: "text",

        success: function (response)  // this is the response from  url: "query.php",
        {
          alert(response);    //alert responce from  query.php and here you can do 
                              //                   whatever u like with response.
        },
        error:function (xhr, ajaxOptions, thrownError)
       {
          alert(xhr); // if any error function.

       }
});

});

edited Jan 30 '14 at 04:56

answered Jan 30 '14 at 04:41

ghost

467
2
6
19

i don't want to pass any values to the php file. the way it is supposed to work is that on loading the index.html file, the results of the query would be displayed and then a search can be performed to find what the user enters in the searchbox. – user3251568 Jan 30 '14 at 04:53
ok thanks a lot. can you also please put some comments so that i can understand the procedure? thank you – user3251568 Jan 30 '14 at 04:58

score 0 · Answer 2 · answered Jan 30 '14 at 04:36

0

Use AJAX in yout index.html like this:

$(document).ready(function{
    $.ajax({
      url: "query.php"
    }).done(function(data) {
      $('body').html(data);
    });
});

More info on AJAX.

Make sure that you have included jQuery in your code.

answered Jan 30 '14 at 04:36

Rahul Desai

15,242
19
83
138

Thank you for your quick response. I have included jQuery in the code already but the results of the query in the 'query.php' file is still not being loaded into the index.html file. – user3251568 Jan 30 '14 at 04:39
@user3251568 Make sure that `query.php` is in same folder as in `index.html`. Also, can you post your `PHP` and `HTML` code here? – Rahul Desai Jan 30 '14 at 04:40
@user3251568 I see that you have put in the code in the question. Please put the code for `$.ajax` into `$(function() .. )`, (same as `$(".search_button").click`) – Rahul Desai Jan 30 '14 at 05:04
Have you tested the PHP code? Check if it is working in the browser, like `localhost/query.php` or something. – Rahul Desai Jan 30 '14 at 05:26
yes i can see the results when i enter the name of the php file but for some reason it is not loading in the index.html file. – user3251568 Jan 30 '14 at 05:29
the php file is working and the search feature in the index.html file is working. the only problem is that i am not able to get the php file to display the results to the index page before searching can begin – user3251568 Jan 30 '14 at 05:30
Have you moved the ajax code to `$(function() .. )` as I mentioned earlier? Please post your latest code in the question. – Rahul Desai Jan 30 '14 at 05:33

load a php query file in an html index page using ajax or jquery

2 Answers2

Linked