简易AJAX表单提交失败求助：请求协助排查问题原因

我编写了一个简易表单及AJAX函数，本应实现表单数据的POST提交，但目前无法正常提交，恳请协助排查失败原因。

我的预期实现逻辑：

• 阻止表单默认提交行为
• 获取表单数据（存入变量以便后续重新映射）
• 通过AJAX提交表单数据，避免页面刷新

原始代码 #

HTML #

<div id="lp-pom-form-25">
  <form method="POST">
    <div class="row">
      <div class="col-6">
        <label>First Name <input id="your_first_name" name="your_first_name" type="text" /></label>
        <label>Last Name <input id="your_last_name" name="your_last_name" type="text" /></label>
        <label>Company Name <input id="your_company_name" name="your_company_name" type="text" /></label>
        <label>Email Address <input id="your_work_email" name="your_work_email" type="text" /></label>
      </div>
      <div class="col-6">
        <label>Referrals First Name <input id="your_referrals_first_name" name="your_referrals_first_name" type="text" /></label>
        <label>Referrals Last Name <input id="your_referrals_last_name" name="your_referrals_last_name" type="text" /></label>
        <label>Referrals Company Name <input id="your_referrals_company_name" name="your_referrals_company_name" type="text" /></label>
        <label>Referrals Email Address <input id="your_referrals_email_address" name="your_referrals_email_address" type="text" /></label>
        <label>Referrals Phone Number <input id="your_referrals_phone_number" name="your_referrals_phone_number" type="text" /></label>
        <label>How did you hear about us? <input id="how_did_you_hear_about_electrics_referral_program" name="how_did_you_hear_about_electrics_referral_program" type="text" /></label>
      </div>
      <button type="submit">
      Submit
      </button>
    </div>
  </form>
</div>

jQuery #

jQuery(document).ready(function () {

  jQuery("form").submit(function (e) {
  
    e.preventDefault();
    
    var form = jQuery(this);
  
    var formData = {
      your_first_name: jQuery("#your_first_name").val(),
      your_last_name: jQuery("#your_last_name").val(),
      your_company_name: jQuery("#your_company_name").val(),
      your_work_email: jQuery("#your_work_email").val(),
      your_referrals_first_name: jQuery("#your_referrals_first_name").val(),
      your_referrals_last_name: jQuery("#your_referrals_last_name").val(),
      your_referrals_company_name: jQuery("#your_referrals_company_name").val(),
      your_referrals_email_address: jQuery("#your_referrals_email_address").val(),
      your_referrals_phone_Number: jQuery("#your_referrals_phone_number").val(),
      how_did_you_hear_about_electrics_referral_program: jQuery("#how_did_you_hear_about_electrics_referral_program").val()
    }
    
    console.log(formData);

    $.ajax ({
        type: form.attr('method'),
      data: formData,
      dataType: 'json',
      success: function (data) {
        console.log("Success!");
        console.log(data);
      },
      error: function (data) {
        console.log("An error has occured!");
        console.log(data);
      }
    });

  });
});

核心问题分析 #

1. 缺少AJAX提交目标URL：$.ajax配置中未指定url属性，AJAX无法确定数据提交地址。即使表单没有action属性，AJAX也不会自动默认提交到当前页面，必须显式声明提交URL。
2. 字段名大小写不匹配：formData中的your_referrals_phone_Number（首字母N大写）与表单输入框的name属性your_referrals_phone_number（首字母n小写）不一致，会导致该字段数据无法正确传递。
3. jQuery别名混用：代码同时使用jQuery和$别名，若页面存在其他JS库冲突，可能引发异常，建议统一使用一种别名。
4. 数据类型设置可能不符合实际：dataType: 'json'要求服务器必须返回JSON格式响应，若服务器返回非JSON内容，AJAX会直接触发错误回调。若不确定返回格式，可先注释该配置。

修复后的代码示例 #

HTML（补充表单action属性，也可在AJAX中直接指定url） #

<div id="lp-pom-form-25">
  <form method="POST" action="/your-submit-endpoint">
    <div class="row">
      <div class="col-6">
        <label>First Name <input id="your_first_name" name="your_first_name" type="text" /></label>
        <label>Last Name <input id="your_last_name" name="your_last_name" type="text" /></label>
        <label>Company Name <input id="your_company_name" name="your_company_name" type="text" /></label>
        <label>Email Address <input id="your_work_email" name="your_work_email" type="text" /></label>
      </div>
      <div class="col-6">
        <label>Referrals First Name <input id="your_referrals_first_name" name="your_referrals_first_name" type="text" /></label>
        <label>Referrals Last Name <input id="your_referrals_last_name" name="your_referrals_last_name" type="text" /></label>
        <label>Referrals Company Name <input id="your_referrals_company_name" name="your_referrals_company_name" type="text" /></label>
        <label>Referrals Email Address <input id="your_referrals_email_address" name="your_referrals_email_address" type="text" /></label>
        <label>Referrals Phone Number <input id="your_referrals_phone_number" name="your_referrals_phone_number" type="text" /></label>
        <label>How did you hear about us? <input id="how_did_you_hear_about_electrics_referral_program" name="how_did_you_hear_about_electrics_referral_program" type="text" /></label>
      </div>
      <button type="submit">Submit</button>
    </div>
  </form>
</div>

jQuery（修复所有问题点） #

jQuery(document).ready(function () {
  jQuery("form").submit(function (e) {
    e.preventDefault();
    var form = jQuery(this);
    
    var formData = {
      your_first_name: jQuery("#your_first_name").val(),
      your_last_name: jQuery("#your_last_name").val(),
      your_company_name: jQuery("#your_company_name").val(),
      your_work_email: jQuery("#your_work_email").val(),
      your_referrals_first_name: jQuery("#your_referrals_first_name").val(),
      your_referrals_last_name: jQuery("#your_referrals_last_name").val(),
      your_referrals_company_name: jQuery("#your_referrals_company_name").val(),
      your_referrals_email_address: jQuery("#your_referrals_email_address").val(),
      your_referrals_phone_number: jQuery("#your_referrals_phone_number").val(), // 修正字段名大小写
      how_did_you_hear_about_electrics_referral_program: jQuery("#how_did_you_hear_about_electrics_referral_program").val()
    };
    
    console.log(formData);

    jQuery.ajax({
      url: form.attr('action'), // 新增提交URL
      type: form.attr('method'),
      data: formData,
      // dataType: 'json', // 不确定返回格式时可注释
      success: function (data) {
        console.log("Success!");
        console.log(data);
      },
      error: function (xhr, status, error) { // 优化错误信息输出
        console.log("An error has occurred!");
        console.log("Status:", status);
        console.log("Error:", error);
        console.log("Response:", xhr.responseText);
      }
    });
  });
});

额外优化建议 #

• 使用form.serialize()代替手动拼接formData，减少代码量和出错概率：var formData = form.serialize();
• 给表单添加唯一ID（如id="referral-form"），避免页面多表单时触发错误提交事件，绑定事件时使用jQuery("#referral-form").submit(...)

内容的提问来源于stack exchange，提问作者David Martini