0

我有一个Index.html带有左侧菜单的 HTML 页面 ()，当用户单击菜单项时，内容会加载到Index.html.

我像这样使用 jQuery 的 .load() 函数：

$('#centerContent').load('DoSomething.html', function() {

});

在DoSomething.html用户可以执行一些操作后，用户点击 a 后"done button"，我想将一些信息发送到index.html页面。

DoSomething.html页面（从 加载）如何Index.html将信息传递给加载它的页面（Index.html）？

谢谢！

4

1 回答 1

0

如果我的回答太基本，请见谅。很难判断多少是太多，我宁愿给你太多太多的信息，也不愿给你太多的信息。

当 jQuery 使用 .load() 方法从服务器加载另一个文件时，新代码将被放入 DOM 并成为当前页面的一部分。因此，您不需要将信息从一个 HTML 文档传输到另一个文档——它们已集成到单个 DOM 中。

但是，要检测注入的HTML 发生的事件触发器（例如检测按钮单击），您必须使用该.on()方法。

接下来，您似乎想在用户完成字段编辑后对数据执行某些操作。您可以将#centerContent DIV 包装在<form>标签内，如下所示：

<form action="somephpfile.php" method="POST">
    Document Title:<br />
    <input type="text" name="theVarNameThatGetsSubmitted" /><br />
    Document Text:<br />
    <input type="text" name="formDocText"><br />
    <br />
    <input type="submit" value="Click When Done" />
</form>

当用户单击“完成时单击”按钮时，用户键入的任何内容都将被发布到名为“somephpfile.php”的 PHP 文件中，并且用户的视图也将转移到该文档。

在“somephpfile.php”文件中，您可以通过从 POST 变量中检索用户数据来获取它：

<?php

    $titre = $_POST['theVarNameThatGetsSubmitted'];
    $text = $_POST['formDocText'];

    //Now do what you want, and show the user what you want

但是，提交数据的更好方法是通过 AJAX。一开始可能听起来很困难，但 AJAX 实际上很容易。以下是 AJAX 与使用旧的 FORMS 方法相比的一些优点：

  • AJAX 不会将用户发送到任何地方。用户停留在同一页面上。
  • AJAX 不刷新屏幕。一切都在后台无形中发生。
  • AJAX 更容易。

下面是一些展示 AJAX 工作原理的基本示例。仅第一个就足够了：

这是您的示例，已重构为使用 AJAX（完全工作）：

HTML - 索引.HTML：

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <style>
            #centerContent{min-height:200px; width:70%; margin:50px auto 0px auto; background-color:lightgrey;}
        </style>

        <script type="text/javascript">
            $(document).ready(function() {


                $('#left_menu').click(function() {
                    //var stuff = '<h2>Your Document</h2>Title: <input type="text" id="doctitle" /><br />Document Text: <input type="text" id="doctext" /><br /><br /><input type="button" id="done" value="Done Editing" />';
                    //$('#centerContent').html(stuff);
                    $('#centerContent').load('second_html_doc.html');
                });

                $(document).on('click', '#done', function() {
                    var ti = $('#doctitle').val();
                    var tx = $('#doctext').val();
                    alert('Now we can save this data into another file: ['+ti+'] ['+tx+']');

                    $.ajax({
                        type: 'POST',
                        url: 'your_php_file.php',
                        data: 'theTitle=' +ti+ '&theDocText=' +tx,
                        success: function(whatigot) {
                            //alert('Server-side response: ' + whatigot);
                            $('#centerContent').html(whatigot);
                        } //END success fn
                    }); //END $.ajax

                });
            }); //END $(document).ready()

        </script>
    </head>
<body>

    <a id="left_menu" href="#">Left Menu Item</a>
    <div id="centerContent">Hello</div>


</body>
</html>

HTML #2，另存为：second_html_doc.html

<h2>Your Document</h2>
Title: <input type="text" id="doctitle" /><br />
Document Text: <input type="text" id="doctext" /><br />
<br />
<input type="button" id="done" value="Done Changing Stuff" />

PHP 处理文件。另存为：your_php_file.php

<?php

    $t = $_POST['ti'];
    $x = $_POST['tx'];

    $r = '<h1>Info Received by PHP</h1>';

    $r .= 'Document Title: ' . $t . '<br /><br />';
    $r .= 'Document Text : ' . $x . '<br /><br />';

    echo $r;
于 2013-07-22T19:27:50.683 回答