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

Question

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

示例：www.kijiji.ca

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

Iframe 会是理想的吗？或者也许 Jquery/ajax 可以以某种方式处理这个？

感谢您的建议。

score 0 · Accepted Answer

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

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

jsFiddle (all working except 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 工作原理的其他一些简单示例：

一个简单的例子

更复杂的例子

根据下拉列表 1 中的选择填充下拉列表 2

score 0 · Accepted Answer

我认为你应该使用 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 );
    });

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

您甚至不需要 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;
}

score 0 · Accepted Answer

阿贾克斯是最好的选择。尝试通过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。

score 0 · Accepted Answer

您可以使用 AJAX 轻松实现这一点，而无需任何（已弃用）框架。

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

尝试搜索 jquery 和 ajax。

score 0 · Accepted Answer

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

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

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

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

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

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

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

7 回答 7

Related

Reference