如何从Html文件获取输入并在另一个HTML文件中输出

时间:2017-12-14 05:03:48

标签: jquery html

第一个HTML文件

我在表单中有一个简单的输入标记,要求用户输入他想要的任何内容( text )。

第二个HTML文件

在第一个HTML文件中访问表单内的输入并打印三次。

第一个HTML

 <!DOCTYPE html>
 <html>
     <head>
        <title>First HTML</title>
     </head>
     <body>
        <form>
           input <input id="silly" type="text" placeholder="Enter something silly">
       </form>
     </body>
</html>

第二个HTML

<!DOCTYPE html>
   <html>
      <head>
         <title>Second HTML</title>
      </head>
      <body>
         <p id="printHere">print the input here 3 times</p>
      </body>
   </html>

我试图在第二个HTML中使用的JQuery

$.get('a.html', null, function(text){
    alert($(text).find('.silly'));
});

1 个答案:

答案 0 :(得分:0)

第一个HTML

<!DOCTYPE html>
 <html>
     <head>
        <title>First HTML</title>
     </head>
     <body>
        <form>
           input <input id="silly" type="text" placeholder="Enter something silly" value="aa">
       </form>
     </body>
</html>

第二个HTML

<!DOCTYPE html>
<html>
  <head>
     <title>Second HTML</title>
     <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
    $.ajax({ 
        url: 'first.html', 
        dataType: 'html', 
        success: function(response) { 
            $(response).find('#silly').clone().appendTo("#printHere");
            $(response).find('#silly').clone().appendTo("#printHere");
            $(response).find('#silly').clone().appendTo("#printHere");
        } 
    });
    </script>
  </head>
  <body>
     <p id="printHere">print the input here 3 times</p>
  </body>
</html>

希望这会有所帮助。感谢