如何使用jquery.load(）来通信两个html页面

How to communicate two html pages using jquery .load()

本文关键字：两个 页面 html 何使用 jquery load 通信      更新时间：2023-09-26

我有一个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）？

谢谢！

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

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

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

接下来，看起来您希望在用户完成字段编辑后对数据进行处理。您可以将#centerContentDIV包装在<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实际上很容易。以下是AJAX相对于使用旧的FORMS方法的一些优势：

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

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

  • 更新DIV中的数据
  • 表单未正确过帐
  • 将PHP结果放入HTML页面

以下是您的示例，重构为使用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;
相关文章：