Question

我有两个不同的页面，mouth.html和nose.html。我想从mouth.html获得一个名字。因此，当用户访问nose.html时，它将从nose.html中的mouth.html打印出该地点的名称。我怎么能在Javascript中做到这一点？

这是mouth.html中的代码

 <h1 class="man" style="clear:both;">{{ moot.name }}</h1>

在nose.html中，我尝试了这个，但它无法正常工作

<script language="javascript">
   $("h1.man").load("mouth.html",function(data){
       var value=$(data).find("h1.man").attr("man")
   });

</script>

nose.html中的完整代码

 <head> 
   <script language="javascript">
       $.get( 'mouth.html', function( data ) {
        var mootName = $(data).text();
      // Do something with mootName here
      alert(mootName);
   });
    </script>
  </head>
  <body>
  <form action="." method="POST">
{% csrf_token %}

    <div class="post-fed">
<p><label for="id_event_date">Event date:</label><input type="text" name="event_date" id="id_event_date" /><span class="helptext">E.g 2012-01-00.YYYY/MM/DD</span></p>
<p><label for="id_end_date">End date:</label><input type="text" name="end_date" id="id_end_date" /><span class="helptext">E.g. 2012-01-00.YYYY/MM/DD</span></p>
<p><label for="id_event_information">Event information:</label><textarea id="id_event_information" rows="10" cols="40" name="event_information"></textarea><span class="helptext"> E.g. eating etc</span></p>
<p><label for="id_full_name">Full name:</label><input id="id_full_name" type="text" name="full_name" maxlength="100" /></p>
<p><label for="id_e_mail">Email:</label></th><td><input id="id_e_mail" type="text" name="e_mail" maxlength="100" /></p>
<p><label for="id_phone_no">Phone no:</label></th><td><input id="id_phone_no" type="text" name="phone_no" maxlength="100" /></p>
<input type="submit"  class="put" value="Send"/> 

</form>  
</div>
</body>

Answer 1

您可以像这样直接加载元素：

$('h1.man').load('mouth.html h1.man');

请参阅http://api.jquery.com/load/

修改

正如MichaelGeary所指出的，这也复制了元素，这是不可取的（<h1><h1></h1></h1>）。这会更好：

$.get('mouth.html', function(data) { var newText = $(data).find('h1.man').text(); $('h1').text(newText); });

Answer 2

.find仅匹配后代节点，您的h1位于树的顶部。您可以使用.filter('h1.man')来获取匹配的顶级节点。

但是，请注意，对于刚刚插入的每个顶级元素（在this中传递该节点），将调用一次回调，因此如果<h1>确实是您的顶级节点，则可以只需使用：

var value = $(this).attr(...);

这比使用HTML字符串调用$(data)要高效得多，因为$(data)只会创建下载内容的另一个内存副本。

如果我理解正确的文档，您还需要在现有.load()元素的父上调用h1.man，因为.load()将插入已加载的文件HTML into 指定的元素（替换现有内容），而不是替换最初指定的元素。

这也意味着此父级必须仅包含h1.man元素，这表明您需要的是HTML：

<div id="h1_man_cont"><h1 class="man"> ... </h1></div>

和JS：

$('#h1_cont_man').load('mouth.html', function(data) {
    var value = $(this).attr(...);
});

Answer 3

正如您可以从这里的各种答案和评论中看到的那样，我们对您正在尝试做的事情感到有些困惑。因此，让我将其分成两个独立的问题，我们可以分别查看每个问题。

第一个问题更清楚一点。您想要获取mouth.html的内容并从中获取一些数据。 mouth.html是从这个Django模板生成的文件：

<h1 class="man" style="clear:both;">{{ moot.name }}</h1>

这是整个模板;没有<html>或<body>或其他任何内容。

因此，例如，如果您的Python变量moot.name是“Mike”，则mouth.html的整个内容将是：

<h1 class="man" style="clear:both;">Mike</h1>

现在我们要加载此文件并从中获取“Mike”（或其他）。我们可以这样做：

$.get( 'mouth.html', function( data ) {
    var mootName = $(data).text();
    // Do something with mootName here
});

如何工作：$(data)为您提供整个<h1>标记作为jQuery对象，然后.text()从中抓取内部文本内容。

现在下一部分，该怎么处理这个名字？你必须弄清楚，或者更详细地描述你想做什么，因为那部分还不清楚。

试图获取标签名称但不起作用

3 个答案: