Question

我经历了很多教程和博客，但我无法在代码中实现我需要的东西。有人可以帮我吗？

我正在尝试创建一个网站。基本结构（fields.html）是，它包含两个文本字段X和Y以及一个提交按钮。（所有这三个都放在一个表格内）。基本上，当你在两个文本框中输入一些值并按下提交按钮时，（它将连接到query.php（action =“query.php”），在那里我编写了代码来获取值（x和y））从fileds.html并基于接收到的值（x和y），query.php将从数据库中获取一些值并使用echo命令显示这些结果。值列表将显示在同一页面中。我已经使用了JQuery。

所以这就是我面临的要求和问题：

要求：

（简单地说我需要页面中的功能：http://nix.lv/history/demo.html（右键单击此页面，您可以查看页面来源）但是在此页面中它正在加载静态页面（通过主页标签）但是我想加载QUERY.PHP（通过单个提交按钮），它基于来自FIELDS.HTML的值进行动态运行

一个。每当我在文本框（x和y）中输入值时，这些值应该显示在同一页面中 - （使用了-JQuery）。 B.每当我按下刷新按钮时，已经显示的结果都不会消失。只是页面应该刷新，它应该显示结果.-（不工作/我不知道如何实现它）。 C.例如：我第一次通过输入fields.html中x和y文本框中的值来获得resultset1。第二次，我正在进入 X和Y文本框中的不同值以及在同一fileds.html上获取resultset2（resultset2替换resultset1）。现在，如果按回按钮，我应该得到reslutset1。简单地说，结果必须显示在同一页面中，但刷新按钮和后退/前进按钮必须按照最终用户的预期工作。

的问题：

刷新按钮无法正常工作。当我按下刷新按钮时，已经显示的结果将随着在文本框中输入的值一起消失。（我不希望在A点中提到这一点）
此外，在获得结果集后，如果我在X和Y文本框中输入新值，并且如果我按下“提交”按钮，则不会发生任何事情。 - （不工作）
另外，我需要后退按钮才能正常工作。 - （不知道如何实现）

代码：

fileds.html：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>history plugin demo</title>

        <script type="text/javascript" src="jquery-1.2.3.min.js"></script>
        <script type="text/javascript" src="jquery.history.js"></script>

        <script type="text/javascript">
            var $j = jQuery.noConflict();
            var $ = {};
            // PageLoad function
            // This function is called when:
            // 1. after calling $.historyInit();
            // 2. after calling $.historyLoad();
            // 3. after pushing "Go Back" button of a browser
            function pageload(hash) {
                // hash doesn't contain the first # character.
                if(hash) {
                    // restore ajax loaded state
                    $j("#load").load(hash + ".php" , {X: $j("#ix").val(), Y: $j("#iy").val()});
                } else {
                    // start page
                    $j("#load").empty();
                }
            }

            $j(document).ready(function(){
                // Initialize history plugin.
                // The callback is called at once by present location.hash. 
                $j.history.init(pageload);

                // set onlick event for buttons
                $j("form[@rel='history']").submit(function(){
                    // 
                    var hash = this.action;
                    hash = hash.replace(/^.*#/, '');
                    // moves to a new page. 
                    // pageload is called at once. 
                    $j.history.load(hash);
                    return false;
                });
            });
        </script>
    </head>
    <body>
        Ajax load<BR>
            <form id="myForm" action='#query' method='POST' rel="history">
                X <BR>
                <input type="text" name="X" id="ix"><BR> <BR>
                Y <BR>                            
                <input type="text" name="Y" id="iy" > <BR> <BR>
                <input id= "sub" type="submit" value="Search" align="centre"/>
            </form>
        <hr>
            Loaded html:<BR>
            <div id="load"></div>
        <hr>

    </body>
</html>

Answer 1

<强> fields.php

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>history plugin demo</title>
    </head>
    <body>
    <?php
        $x = ( !empty( $_REQUEST['X'] ) ? $_REQUEST['X'] : null );
        $y = ( !empty( $_REQUEST['Y'] ) ? $_REQUEST['Y'] : null );
        $a = "{ $x , $y }";
    ?>
        Ajax load<BR>
            <form id="myForm" action='fields.php' method='GET' rel="history">
                X <BR>
                <input type="text" name="X" id="ix" value="<?=$x;?>"><BR> <BR>
                Y <BR>
                <input type="text" name="Y" id="iy" value="<?=$y;?>"> <BR> <BR>
                <input id="sub" type="submit" value="Search" align="centre"/>
            </form>
        <hr>
            Loaded html:<BR>
            <div id="load"><?=$a;?></div>
        <hr>
    </body>
</html>

Jquery中的后退按钮和刷新按钮

1 个答案: