如何使用jquery .load（）交流两个HTML页面

Question

I have a HTML page ( Index.html ) that has a left menu and when an user clicks on a menu item a content is loaded in a "center div" of Index.html . 我有一个HTML页面（ Index.html ），该页面具有一个左侧菜单，并且当用户单击菜单项时， Index.html内容加载到Index.html的“中心div”中。

I use the .load() function of jQuery like this: 我使用jQuery的.load（）函数，如下所示：

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

});

In the DoSomething.html the user can performs some action and, after the user tap on a "done button" , I want to send some information to index.html page. 在DoSomething.html ，用户可以执行一些操作，并且在用户点击"done button" ，我想向index.html页面发送一些信息。

How the DoSomething.html page (loaded from Index.html ) can pass information to the the page that loaded it ( Index.html )? （从Index.html加载的） DoSomething.html页面如何将信息传递到加载它的页面（ Index.html ）？

Thank you! 谢谢！

Answer 1

Please forgive me if my answer is too basic. 如果我的回答太基础，请原谅我。 It's difficult to judge how much is too much and I'd rather give you a lot too much info than a bit too little. 很难判断多少太多了，我宁愿给您提供太多信息而不是太多信息。

When jQuery uses the .load() method to load another file from the server, the new code is placed into the DOM and becomes part of the current page. 当jQuery使用.load（）方法从服务器加载另一个文件时，新代码将放入DOM并成为当前页面的一部分。 Therefore, you do not need to transfer information from one HTML document to the other -- they have been integrated into a single DOM. 因此，您无需将信息从一个HTML文档传输到另一个HTML文档-它们已集成到单个DOM中。

However, to detect event triggers happening to the injected HTML (such as detecting a button click), you must use the .on() method. 但是，要检测注入的 HTML发生的事件触发（例如检测按钮单击），必须使用.on()方法。

Next, it looks like you want to do something with the data once the user has finished editing the fields. 接下来，用户一旦完成对字段的编辑，您似乎想对数据做一些事情。 You can either wrap the #centerContent DIV inside <form> tags, like this: 您可以将#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>

When user clicks the "Click When Done" button, whatever the user typed will be POSTed to a PHP file called "somephpfile.php", and the user's view will also transfer over to that document. 当用户单击“完成时单击”按钮时，无论用户键入什么内容，都将过帐到名为“ somephpfile.php”的PHP文件中，并且用户的视图也将转移到该文档中。

In the "somephpfile.php" file, you can get the user's data by retrieving it from the POST variable: 在“ somephpfile.php”文件中，可以通过从POST变量中检索用户的数据来获取数据：

<?php

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

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

However, a better way to submit your data is by AJAX. 但是，提交数据的更好方法是使用AJAX。 It might sound difficult at first, but AJAX is actually very easy. 一开始听起来可能很困难，但是AJAX实际上非常简单。 Here are some advantages of AJAX over using the old FORMS method: 与使用旧的FORMS方法相比，这是AJAX的一些优点：

AJAX doesn't send the user anywhere. AJAX不会将用户发送到任何地方。 User stays on the same page. 用户停留在同一页面上。
AJAX doesn't refresh the screen. AJAX不会刷新屏幕。 Everything happens invisibly, in the background. 一切都在后台无形中发生。
AJAX is easier. AJAX更容易。

Here are some basic examples that show how AJAX works. 以下是一些基本示例，它们说明了AJAX的工作原理。 The first one alone should be enough: 仅第一个就足够了：

Here is your example, refactored to use AJAX (fully working): 这是您的示例，经过重构可以使用AJAX（可以正常运行）：

HTML - INDEX.HTML: 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, save it as: second_html_doc.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 Processing File. PHP处理文件。 Save it as: your_php_file.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 个解决方案

解决方案1
0 2013-07-22 19:27:50

如何使用jquery .load（）交流两个HTML页面

问题描述

1 个解决方案

解决方案1 0 2013-07-22 19:27:50

解决方案1
0 2013-07-22 19:27:50