javascript - How to populate a database list without refreshing webpage

Question

I'm interested in having a search form on the left side of a webpage, and the main content being the rows returned from the database.

Example : www.kijiji.ca

What I want to avoid, is reloading the whole page. Kijiji is not a good example of this, updating the query or changing the results page, updates the entire browser window. Ideally when search parameters are changed, the container with the search results will update, and nothing else. This way the outside information is preserved, and page loading time is reduced.

Would an Iframe be ideal for this? Or perhaps Jquery/ajax can handle this somehow ??

Thanks for the advice.

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 はあなたが要求したものに最適なソリューションです。

これは、あなたが望むことを行う完全な例です。データベースの値は AJAX 経由で更新され、ページを更新しなくても応答がページに表示されます。

jsFiddle (all working except AJAX)

jsFiddle は AJAX のデモを行うことはできませんが、以下を 2 つのファイル (javascript を独自のファイルに分割する場合は 3 つ) にコピー/貼り付けし、それを編集して独自のデータベース構造に一致させると、動作を確認できます。

次の 2 つのファイルが必要です。

1: index.php (または任意の名前)
2: 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 を設定します

javascript - How to populate a database list without refreshing webpage

7 に答える 7

Related

Reference