Javascript 正在尝试获取标记名，但不起作用_Javascript_Ajax_Jquery

Javascript 正在尝试获取标记名，但不起作用

javascript ajax jquery

Javascript 正在尝试获取标记名，但不起作用,javascript,ajax,jquery,Javascript,Ajax,Jquery,我有两个不同的页面，mouth.html和nose.html。我想从mouth.html获取一个名称。因此，当用户访问nose.html时，它将从nose.html中的mouth.html打印出地点的名称。我如何在Javascript中做到这一点这是mouth.html中的代码 <h1 class="man" style="clear:both;">{{ moot.name }}</h1> {{moot.name} 在nose.html中，我尝试了这个，但不起作用

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

这是mouth.html中的代码

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

{{moot.name}

在nose.html中，我尝试了这个，但不起作用

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

</script>


$（“h1.man”）.load（“mouth.html”，函数（数据）{
var值=$（数据）.find（“h1.man”）.attr（“man”）
});

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>


$.get（'mouth.html'，函数（数据）{
var mootName=$（数据）.text（）；
//在这里用mootName做点什么
警报（mootName）；
});
{%csrf_令牌%}
活动日期：例如2012-01-00.YYYY/MM/DD
结束日期：例如2012-01-00.YYYY/MM/DD
活动信息：如饮食等
全名：
电邮：
电话号码：

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

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

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

看

编辑：

正如MichaelGeary指出的，这也复制了元素，这是不可取的（

）。这样会更好：

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

.find

将只匹配子节点，您的

h1

位于树的顶部。您可以使用

.filter（'h1.man'）

获取匹配的顶级节点

但是，请注意，对于刚刚插入的每个顶级元素（将该节点传入

this

），回调将被调用一次，因此如果

确实是顶级节点，则可以使用：

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

这比使用HTML字符串调用

$（数据）

要高效得多，因为

$（数据）

只会创建下载内容的另一个内存副本

如果我正确理解文档，您还需要对现有

h1.man

元素的父元素调用

.load（）

，因为

.load（）

会将加载的HTML插入指定的元素（替换现有内容），而不会替换最初指定的元素

这还意味着此父级必须只包含

h1.man

元素，这表明您需要的是HTML，因此：

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

从这里各种各样的答案和评论中你可以看到，我们都有点困惑你到底想做什么。所以，让我把它分成两个独立的问题，我们可以分别研究每一个问题

第一个问题更清楚一点。您需要获取

mouth.html

的内容，并从中获取一些数据

mouth.html

是从这个Django模板生成的文件：

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

现在我们要加载这个文件并从中抓取“Mike”（或任何东西）。我们可以这样做：

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

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

工作原理：

$（数据）

将整个

标记作为jQuery对象提供，然后

.text（）

从中获取内部文本内容

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

var value=…

没有任何可见的内容。它只是声明了一个变量，然后由于函数结束而立即丢弃该变量。请注意，.attr（“man”）将获得属性man的值，这两种方式都不是有效的html。尝试使用.attr（“类”）获取man值，或使用.text（）获取内部文本。不知道您希望从.attr（..）中获得什么价值，也可以查看其他解决方案的其他答案。我认为您需要澄清您的问题。您想从mouth.html获取

{{moot.name}

，然后在nose.html中对它做什么？记录下来？警觉的？修改页面的一部分？是什么让你认为

h1

是根？@JanDvorak，因为OP是这么说的-“这是mouth.html中的代码”哦。仍然有点奇怪，这是整个内容。正如Altinak所指出的，

h1.man

是根节点，它是否也能工作？@JanDvorak文档建议它会工作，尽管OP似乎无论如何都有负载工作-他正在查看其中的内容。是的，

h1.man

与任何其他jQuery选择器一样工作，根据文档：“与$.get（）不同，.load（）方法，允许我们指定要插入的远程文档的一部分。这是通过url参数的特殊语法实现的。如果字符串中包含一个或多个空格字符，则假定第一个空格后面的字符串部分是确定要加载内容的jQuery选择器。”像这样尝试$（'h1.man'）.load（'mouth.html h1.man'）；}）；但是它不起作用，它没有在nose.html页面上显示关于地名的警报。嗯。。。文档有这样一个例子：

$（'#result'）.load（'ajax/test.html#container'），它说“当这个方法执行时，它检索ajax/test.html
的内容，然后jQuery解析返回的文档以找到ID为container
的元素。这个元素连同它的内容一起插入ID为result的元素，其余检索到的文档被丢弃。”[强调添加]这难道不意味着它将插入h1
元素的额外副本，而不是仅获取内部内容吗？医生肯定会更清楚这一点。谢谢你的回复。我想在nose.html页面上显示名称。例如，它会在预订表单的顶部显示“您将预订LAV GARDEN”，因此当用户预订花园时，它会保存预订和预订地点的名称。希望你明白我的意思？或者我应该用Microsoft word演示并将文件发送给您？好的，我想我现在就听您的。不幸的是，这是一种比我在这里所能提供的更为详细和普遍的支持。我能说的最好的地方就是我的答案是“在这里使用mootName做点什么”，也就是说，您需要编写一些代码来插入