使用Ajax从jQuery选项卡提交表单

Question

我在第二个选项卡上提交表单时遇到问题，因为页面正在重新加载并提交第一个选项卡。 我了解可以使用Ajax解决此问题。 我读过其他文章，但还不太了解，所以任何解释都很好。

我希望表单以与HTML表单中的“操作”相同的方式加载其他页面。

下面的代码显示了HTML和jQuery的一部分。

为了将第二个和正在进行的选项卡发布到特定选项卡中输入的数据，需要放置什么Ajax以及将其放置在何处。

<div class="tabs">
    <ul class="tab-links" style= "margin-top: 50px; width:700px;">
        <li class="active"><a href="#tab1"><p>Advert Space</p></a></li>
        <li><a href="#tab2"><p>Vouchers</p></a></li>
        <li><a href="#tab3"><p>Business 2 Business</p></a></li>
        <li><a href="#tab4"><p>Search Space Ads</p></a></li>
    </ul>

    <div class="tab-content" >
        <div id="tab1" class="tab active">
            <h4 style="font-weight: 100">Display your advert</h4>
            <?php include ('advertinfo.php')?>
        </div>

jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');


        jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });
});

这是表格代码的副本

    <form action="advertupload.php" method= "post">
<dl>
<dd><input type="hidden" name="business" value="<?php echo ($_SESSION['myname']) ?>">
<input type="hidden" name="approval" value="N">
<input type="hidden"  name="id" value="<?php echo $_GET['id'];?>"/>
<dt><p>Which advert space would you like to use?</p>
<dd><select name="location" id="textfield">
  <option value="0">Header</option>
  <option value="1">Location 1</option>
  <option value="2">Location 2</option>
  <option value="3">Location 3</option>
  <option value="4">Location 4</option>
  <option value="5">Location 5</option>
  <option value="6">Location 6</option>
</select>
<dt><p>When would you like to start your advert?</p>
<dd><input type="date" name="startdate" id="textfield">
<dt><p>When would you like your advert to end?</p>
<dd><input type="date" name="enddate" id="textfield">
<dt><button type="submit" name="submit" class="btn" style="margin-top: 20px; margin-left: 40px;"><p style="margin-top:1px; color: #fff">Next</p></a></button></td>
</dl>

Answer 1

这是使用AJAX提交表单的示例： http : //codepen.io/medinasod/pen/QyqMKZ

JS

  jQuery("document").ready(function() {

    jQuery(".tab1Form, .tab2Form, .tab3Form").submit(function() {
      event.preventDefault();
      var fields = jQuery("input", this).serializeArray();
      jQuery("#results").empty();
      jQuery.each(fields, function(i, field) {
        jQuery("#results").append(field.value + " ");
      });
      jQuery.ajax({
          method: "POST",
          url: "advertupload.php",
          data: fields
        })
        .done(function(msg) {
          console.log("Data Saved: " + msg);
          window.location.assign("/advertupload.php");
        });

    });

  });

的HTML

<div class="container">
      <form class="tab1Form">
      <dl>
      <dd><input type="hidden" name="business" value="<?php echo ($_SESSION['myname']) ?>">
      <input type="hidden" name="approval" value="N">
      <input type="hidden"  name="id" value="<?php echo $_GET['id'];?>"/>
      <dt><p>Which advert space would you like to use?</p>
      <dd><select name="location" id="textfield">
        <option value="0">Header</option>
        <option value="1">Location 1</option>
        <option value="2">Location 2</option>
        <option value="3">Location 3</option>
        <option value="4">Location 4</option>
        <option value="5">Location 5</option>
        <option value="6">Location 6</option>
      </select>
      <dt><p>When would you like to start your advert?</p>
      <dd><input type="date" name="startdate" id="textfield">
      <dt><p>When would you like your advert to end?</p>
      <dd><input type="date" name="enddate" id="textfield">
      <dt><button type="submit" name="submit" class="btn" style="margin-top: 20px; margin-left: 40px;"><p style="margin-top:1px; color: #fff">Next</p></a></button><span id="results"></span></td>
      </dl>
      </div>

参考：示例代码来自jQuery AJAX API和jQuery serializeArray（）文档 。