html - 使用 ajax/query 加载外部文件

Question

我有 2 个按钮来加载 2 个单独的表单、事件和优惠。当用户单击按钮时，我想加载相关的 html 表单并使按钮消失。

事件加载 events.html
提供加载 offer.html

<div class="view_col">
    <form id="form1" name="form_b" method="post" action="">
        <input name="c_event" class="clr" type="button" value="event" />
        <input name="c_offer" class="clr" type="button" value="offer" />
    </form>
</div>

将表单加载到

<div id="form_body"> </div>

我想确保用户点击后按钮消失。

有人可以给出一个想法吗？

Answer 1

您需要使用$.load()从您的外部 HTML 页面获取 HTML。尝试这样的事情：

HTML

<div class="view_col">
    <form id="form1" name="form_b" method="post" action="">
        <input name="c_event" class="clr" type="button" value="event" id="eventsBtn" />
        <input name="c_offer" class="clr" type="button" value="offer" id="offersBtn" />
    </form>
</div>

jQuery

$("#eventsBtn").on('click', function() { 
    $("#form_body").load('events_loads_events.html');
});
$("#offersBtn").on('click', function() { 
    $("#form_body").load('offers_loads_events.html');
});

关于load() 的更多信息；

Answer 2

如果你使用 jQuery，那么这很容易：

$('#form1 input').on('click', function(event) {
  var $target = $(event.target);
  $('#form_body').load($target.data('url'));
  $('#form1').hide();
})

您必须将 html 更改为：

<div class="view_col">
  <form id="form1" name="form_b" method="post" action="">
  <input name="c_event" class="clr" type="button" value="event" data-url="http://www.path-to-your-form-html-for-this-button.com/"/>
  <input name="c_offer" class="clr" type="button" value="offer" />
</div>