Question

我有一个HTML页面（Index.html），它有一个左侧菜单，当用户点击菜单项时，内容会加载到Index.html的“中心div”中。

我使用jQuery的.load（）函数：

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

});

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

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

谢谢！

Answer 1

如果我的回答太基础，请原谅我。我很难判断出有多少太多而且我宁愿给你太多的信息而不是太少。

当jQuery使用.load（）方法从服务器加载另一个文件时，新代码将被放入DOM并成为当前页面的一部分。因此，您无需将信息从一个HTML文档传输到另一个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>

当用户点击“Click When Done”按钮时，无论用户键入什么，都会将其发布到名为“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实际上非常简单。以下是使用旧的FORMS方法的AJAX的一些优点：

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

以下是一些显示AJAX如何工作的基本示例。仅第一个就足够了：

以下是您的示例，重构为使用AJAX（完全正常工作）：

HTML - INDEX.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;

如何使用jquery .load（）来传递两个html页面

1 个答案: