使用 ajax 或 jquery 在 html 索引页面中加载 php 查询文件答案

【问题标题】：load a php query file in an html index page using ajax or jquery使用 ajax 或 jquery 在 html 索引页面中加载 php 查询文件
【发布时间】：2014-02-22 05:52:06
【问题描述】：

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>

我是 javascript、jquery 和 ajax 的新手，我希望在修改上述代码方面得到一些帮助，以便在页面加载时，我可以在索引中查看名为 'query.php' 的 php/mysql 查询的结果我的 html 页面的文件。任何帮助将不胜感激。

【问题讨论】：

标签： javascript php jquery mysql ajax

【解决方案1】：

像这样在index.html 中使用AJAX：

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

More info on AJAX.

确保在代码中包含 jQuery。

【讨论】：

感谢您的快速回复。我已经在代码中包含了 jQuery，但“query.php”文件中的查询结果仍未加载到 index.html 文件中。
@user3251568 确保query.php 与index.html 位于同一文件夹中。另外，您可以在这里发布您的PHP 和HTML 代码吗？
@user3251568 我看到你已经在问题中输入了代码。请将$.ajax的代码放入$(function() .. )，（与$(".search_button").click相同）
你测试过PHP代码吗？检查它是否在浏览器中运行，例如localhost/query.php 或其他东西。
是的，当我输入 php 文件的名称时，我可以看到结果，但由于某种原因，它没有加载到 index.html 文件中。

【解决方案2】：

$(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.

       }
});

});

【讨论】：

我不想将任何值传递给 php 文件。它应该工作的方式是在加载 index.html 文件时，将显示查询结果，然后可以执行搜索以查找用户在搜索框中输入的内容。
好的，非常感谢。您能否也请放一些 cmets 以便我理解该程序？谢谢