javascript - 在 document.createElement 中加载 HTML 表单页面-6ren

javascript - 在 document.createElement 中加载 HTML 表单页面

转载作者：行者123 更新时间：2023-11-28 08:20:24

下面是我一直在编辑的 javascript 站点的示例部分。我需要在该部分中加载 HTML 表单。如何将 html 表单 (../form.html) 嵌入其中？或者有更好的方法利用 JS 创建表单吗？

this.display_admin_table_header = function () {

    current_pane.send_get_admin_table_data = this.send_get_admin_table_data;
    $('#admin_tab').addClass('selected');
    $('#stat_table').find('tr:gt(0)').remove();
    var test =  $(document.createElement('p'));
    test.append("test string test string test string"
    );

    $('#stat_table').append(test);
    }

HTML 表单只是由这样的东西组成(没什么花哨的，但在浏览器中显示自己的 find:

    <label class="description" for="element_1">Node </label>
    <div>
        <input id="element_1" name="element_1" class="element text medium" type="text" maxlength="255" value=""/> 
    </div> 
    </li>       <li id="li_2" >
    <label class="description" for="element_2">Site-Bucket </label>
    <div>
        <input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/> 
    </div> 
    </li>

最佳答案

您可以使用 jQuery.get() 从 html 表单页面获取 html

$.get( "ajax/form-page.html", function( data ) {
  //here you have acess to the html form the form page
  $( ".result" ).html( data );
  alert( "Load was performed." );
});

jQuery.get() 是一个简写 Ajax 函数，相当于:

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

另一个选择是使用 jquery 的加载函数

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#div2").load("form.html");
      });
    });
    </script>
    </head>
    <body>

    <div id="div1"><h2>jQuery AJAX Load</h2></div>
    <div id="div2"><h2>Let jQuery AJAX Change This Text</h2></div>
    <button>Get External Content</button>

    </body>
    </html>