如何在不刷新网页的情况下填充数据库列表

时间：2013-09-18 18:14:48

标签： javascript jquery html ajax

我感兴趣的是在网页的左侧有一个搜索表单，主要内容是从数据库返回的行。

示例：www.kijiji.ca

我想避免的是重新加载整个页面。 Kijiji不是一个很好的例子，更新查询或更改结果页面，更新整个浏览器窗口。理想情况下，当搜索参数发生更改时，带有搜索结果的容器将更新，而不会更新。这样可以保留外部信息，减少页面加载时间。

Iframe是否适合这种情况？或者也许Jquery / ajax能以某种方式处理这个问题？

感谢您的建议。

7 个答案:

答案 0 :(得分：0)

您可以使用AJAX轻松实现此目标，并且不需要任何（已弃用的）框架。

以JQuery为例。它提供了刷新/填充页面某些区域所需的一切，而无需重新加载整个页面。

尝试搜索jquery和ajax。

答案 1 :(得分：0)

AJAX是你的答案。它代表异步Javascript和XML ......取决于您的开发框架，要求，技能/知识以及您将以各种方式实现它的各种其他因素。

AJAX不是一种语言，它是一种概念。这个想法是允许对网站/ Web应用程序的部分（或整个）页面进行异步更新。这里有一些资源可以帮助您：

http://learn.jquery.com/ajax/

http://www.w3schools.com/ajax/

http://www.tutorialspoint.com/ajax/

有关您选择IDE和/或要求的更多信息（您是在构建ASP / PHP应用程序还是基于CMS的网站？），我们可以提供更有针对性的帮助。

答案 2 :(得分：0)

我认为你应该使用JQuery ajax 它很简单：

    var request = $.ajax({
      url: //here goes url,
      type: "GET",
      data: { param : value}, //pass your parameters here
      dataType: "html"
    });

    request.done(function( data ) {
      //here you update your main container
      $( "#main_container" ).html( data);
    });

    request.fail(function( jqXHR, textStatus ) {
      alert( "Request failed: " + textStatus );
    });

答案 3 :(得分：0)

除了这里提到的关于使用AJAX的内容之外，您还需要一个服务器端后端，它从您的数据库中获取所需的数据，并使用HTTP响应将数据发送回客户端。例如，这可以存储为JSON，您可以使用该响应来填充搜索字段。

我现在在apache服务器上设置python和wsgi作为后端，但是这类事情也可以通过php之类的东西来实现。

答案 4 :(得分：0)

Ajax是最好的选择。尝试浏览http://api.jquery.com/jQuery.ajax/以了解详情。

这是基本的模板代码：

            $.ajax({
                type: "GET",
                url: "",//type your url
                data: {
                    searchdata: searchdata
                },
                success: function (response) {
                   $('#Content').html(response); 
                }
            });

如您所见，您的内容网页上有一个ID为内容的div。它只会更新那个div。

答案 5 :(得分：0)

你甚至不需要Ajax。

这是最近项目中的一些（公认的草率）代码。应该让你开始。您可以稍后添加Ajax以获取整洁的内容，例如重置按钮或链式选择框。祝你好运。

此代码假定您的页面名为index.php（数据已提交到同一页面）此外，注释掉的回声用于测试数据库连接，表单数据用于查询。而且你可能不需要这个查询，但无论如何它都存在。制作一个快速测试数据库并试一试。

HTML：

<div id="formarea">
<form method="post" action="index.php">
Note: All fields are not required for searching<br>
First Name:
<input type="text" name="first"><br>
Last Name:
<input type="text" name="last"><br>
School:
<input type="text" name="edu"><br>
City:
<input type="text" name="cit"><br>
State:
<input type="text" name="st"><br>
<input class="submit" name="submit" type="submit" value="Find">
</form>
</div>

<div id="listarea">
 <?php 
mysql_connect('database', 'username', 'password') or die(mysql_error());
//echo "Connected to MySQL <br>";
mysql_select_db("hair1") or die(mysql_error());
//echo "Connected to Database <br>";
$first = mysql_real_escape_string($_POST['first']);
$last = mysql_real_escape_string($_POST['last']);
$edu = mysql_real_escape_string($_POST['edu']);
$cit = mysql_real_escape_string($_POST['cit']);
$st = mysql_real_escape_string($_POST['st']); 


//echo $first; echo "<br>";
//echo $last; echo "<br>";
//echo $edu; echo "<br>";
//echo $cit; echo "<br>";
//echo $st; echo "<br>";
?>
<?php
if(isset($_POST['submit'])){

$query = "SELECT * FROM hair1 WHERE 1=1 ";
if($first) $query .= "AND fname=\"$first\" ";
if($last) $query .= "AND lname=\"$last\" ";
if($edu) $query .= "AND school=\"$edu\" ";
if($cit) $query .= "AND city=\"$cit\" ";
if($st) $query .= "AND state=\"$st\" ";


$result = mysql_query($query) or die(mysql_error());

while($row = mysql_fetch_array($result)){
    echo "<div class='resultbox'><div class='infobox'>";
    echo $row['fname'];
    echo "</div><div class='infobox'>";
    echo $row['lname'];
    echo "</div><div class='infobox'>";
    echo $row['school'];
    echo "</div><div class='infobox'>";
    echo $row['city'];
    echo "</div><div class='infobox'>";
    echo $row['state'];
    echo "</div><div class='infobox'>";
    echo $row['phone'];
    echo "</div><div class='infobox'>";
    echo $row['email'];
    echo "</div></div>";
}
if ( mysql_num_rows( $result ) > 0 ){
}    

else{ echo "<p>Sorry, that search didn't turn up anything.  Please check your spelling and try again.</p>";
}}
else{ 
  echo  "<p>No Results Found</p>"; 
      } 
?>

</div>

CSS：

#formarea {
    height: 235px;
    width: 280px;
    float: left;
    clear: left;
    text-align: right;
    margin-right: 10px;
}
#listarea {
    height: 235px;
    width: 650px;
    overflow-x: hidden;
    overflow-y: auto;
    float: left;
}
.resultbox {
    height: 18px;
    width: 100%;
    padding-top: 3px;
}
.infobox {
    float: left;
    padding-right: 5px;
    padding-left: 5px;
}

答案 6 :(得分：0)

正如其他人所提到的，AJAX是您所要求的最佳解决方案。

这是一个完整的例子，可以满足您的需求。数据库中的值将通过AJAX进行更新，页面上会显示响应，而不会刷新页面。

jsFiddle（所有工作除了AJAX）

虽然jsFiddle无法演示AJAX，但是如果将以下内容复制/粘贴到两个文件中（如果将javascript分解为自己的文件中有三个），则可以看到实际操作，并编辑它以匹配您自己的数据库结构。

需要两个文件：

一： index.php （或任何你想称之为的）
二： my_php_processor_file.php （如果更改此名称，还必须更改javascript中的AJAX代码块

<强> HTML： 

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

        <style>
        </style>

        <script type="text/javascript">

            //Global var goes here:
            editRow = 0;

            $(document).ready(function() {
                $('#msgbox').dialog({
                    autoOpen:false,
                    width:400,
                    modal:true,
                    buttons: {
                        Submit: function() {
                            var mfn = $('#mfn').val();
                            var mln = $('#mln').val();
                            var mem = $('#mem').val();
                            $('table').find('tr').eq(editRow).find('.fname').val(mfn);
                            $('table').find('tr').eq(editRow).find('.lname').val(mln);
                            $('table').find('tr').eq(editRow).find('.email').val(mem);
            /*                
                            //Now do the ajax transfer to the server
                            $.ajax({
                                type: 'POST',
                                url: 'my_php_processor_file.php',
                                data: 'user_id=' +editRow+ '&first_name=' +mfn+ '&last_name=' +mln+ '&email_addy=' +mem,
                                success:function(recd){
                                    $('#alert').html(recd);
                                    $('#alert').dialog('open');
                                }
                            }); //END ajax code block
            */              //Now, close the dialog -- doesn't happen automatically!
                            $(this).dialog('close');
                        }, //END Submit button
                        Cancel: function() {
                            $(this).dialog('close');
                        } //END Cancel button
                    } //END all buttons
                }); //END msgbox div (dialog)

                $('.editbutt').click(function() {
                    editRow = $(this).parents('tr').index();
                    //alert(editRow);
                    var fn = $(this).parents('tr').find('td').eq(0).find('.fname').val();
                    var ln = $(this).parents('tr').find('td').eq(1).find('.lname').val();
                    var em = $(this).parents('tr').find('td').eq(2).find('.email').val();
                    $('#mfn').val(fn);
                    $('#mln').val(ln);
                    $('#mem').val(em);
                    $('#msgbox').dialog('open');
                }); //END editbutt

                $('#alert').dialog({
                    autoOpen:false,
                    modal:true
                });
            }); //END document.ready

        </script>
    </head>
<body>

    <table id="tbl">
        <tr>
            <td>
                First Name
            </td>
            <td>
                Last Name
            </td>
            <td>
                Email
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" class="fname" id="fn1">
            </td>
            <td>
                <input type="text" class="lname" id="ln1">
            </td>
            <td>
                <input type="text" class="email" id="em1">
            </td>
            <td>
                <input class="editbutt" type="button" value="Edit Row">
            </td>
        </tr>
        <tr id="tr2">
            <td id="td2a">
                <input type="text" class="fname" id="fn2">
            </td>
            <td id="td2b">
                <input type="text" class="lname" id="ln2">
            </td>
            <td id="td2c">
                <input type="text" class="email" id="em2">
            </td>
            <td id="td2d">
                <input class="editbutt" type="button" value="Edit Row">
            </td>
        </tr>
    </table>
    <div id="msgbox">
        <h2>Edit User</h2>
        First Name: <input id="mfn" type="text"><br/>
        Last Name : <input id="mln" type="text"><br/>
        Email Addy: <input id="mem" type="text"><br/>
    </div>
    <div id="alert"></div>

</body>
</html>

PHP处理器文件： my_php_processor_file.php 

<?php

    $fn = $_POST['first_name'];
    $ln = $_POST['last_name'];
    $em = $_POST['email_addy'];
    $uid = $_POST['user_id'];

/*
    //This is where you use the security features of PHP to strip_slashes, and
    //protect html_entities, etc. to guard your database against SQL injection
    //attacks, etc.  SEE THESE POSTS:
    https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php
    http://www.tizag.com/mysqlTutorial/mysql-php-sql-injection.php
    http://blogs.msdn.com/b/brian_swan/archive/2010/03/04/what_2700_s-the-right-way-to-avoid-sql-injection-in-php-scripts_3f00_.aspx
*/

    //Now, update the database:
    $success = mysql_query("UPDATE `users` SET `email`='$em', `first`='$fn', `last`='$ln' WHERE `user_id` = '$uid'");

    //Now, return a message or something
    if (mysql_affected_rows() == -1) {
        $output = '<h2>Sorry, database update failed</h2>';
     }else{
        $output = '<h2>Update successful</h2>';
    }

    echo $output;

以下是AJAX工作原理的其他一些简单示例：

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

相关问题
最新问题