Fatal编程技术网
  • javascript/
  • Javascript 使用ajax或jquery在html索引页中加载php查询文件

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

javascript php jquery mysql ajax

Javascript 使用ajax或jquery在html索引页中加载php查询文件,javascript,php,jquery,mysql,ajax,Javascript,Php,Jquery,Mysql,Ajax,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

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> 


$（函数（）{
$（“.search_按钮”）。单击（函数（）{
//获取用户键入的值
var searchString=$（“#搜索框”）.val（）；
//形成查询串
变量数据='搜索='+搜索字符串；
//如果searchString不是空的
如果（搜索字符串）{
//ajax调用
$.ajax({
类型：“POST”，
url:“query.php”，
数据：数据，
beforeSend:function（html）{//这发生在实际
$（“#结果”）.html（“”）；
$（“#搜索结果”）.show（）；
$（“.word”）.html（搜索字符串）；
},
成功：函数（html）
{//这是在我们得到结果之后发生的
$（“#结果”）.show（）；
$（“#结果”）.append（html）；
}
});    
}
返回false；
});
$（文档）.ready（函数）{
$.ajax({
url:“query.php”
}).完成（功能（数据）{
$（'body'）.html（数据）；
});
});
});
$（文档）.ready（函数（）{
$.ajax({
类型：“POST”，
url:“query.php”，
数据类型：“文本”，
数据：dataString，
成功：功能（响应）
{
警报（响应）；//来自query.php的警报响应
},
错误：函数（xhr、ajaxOptions、thrownError）
{
警报（xhr）；
}
});
});



    


query.php

在yout
index.html
中使用AJAX
，如下所示：

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

确保代码中包含了jQuery。

感谢您的快速响应。我已经在代码中包含了jQuery，但是“query.php”文件中的查询结果仍然没有加载到index.html文件中。@user3251568请确保
query.php
与
index.html
位于同一文件夹中。另外，你能在这里发布你的
PHP
和
HTML
代码吗？@user3251568我看到你在问题中输入了代码。请将
$.ajax
的代码放入
$（function（）..）
，（与
$（“.search_按钮”）相同。单击
）您测试过PHP代码吗？检查它是否在浏览器中工作，如
localhost/query.php
或其他。是的，我可以在输入php文件名时看到结果，但由于某些原因，它没有加载到index.html文件中。我不想向php文件传递任何值。它的工作方式是加载index.html文件时，将显示查询结果，然后可以执行搜索，以查找用户在搜索框中输入的内容。好的，非常感谢。你也可以提出一些意见，以便我能理解程序吗？非常感谢。

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

       }
});

});