使用jQuery AJAX对接LOXO API失败，请求排查脚本问题

我正在使用LOXO提供的凭据对接LOXO Dashboard平台，修改一款对接该平台的插件以提交求职者申请信息，但编写的jQuery AJAX脚本无法通过API传输数据，恳请帮忙排查脚本问题。

现有AJAX脚本 #

jQuery.ajax({
    // var usernamex = 'user name API';
     //var passwordx = 'Password API';

    // Base64 encode the username and password
   
    /* var name = $("#name").val();
     var phone = $("#phone").val();
     var email = $("#email").val();
     var resume = $("#resumeinput").val(); */

    /* var formdata = {
            name: 'Luis test',
            phone: '1-555-555-555',
            email: 'luiscabre@myemail.com',
            resume: 'resumeInput'
        };  */
    type: 'POST',
    url: 'https://loxo.co/api/kinetic-staffing/jobs/1596232/apply',
    dataType: 'json',
    data:   JSON.stringify(formData),
     beforeSend: function (xhr) {
                xhr.setRequestHeader('Authorization', 'Basic ' + base64Credentials);
            },
    mimeType:"multipart/form-data",
    processData: false,  
    contentType: 'application/json',  
    success: function(response) {
        applyJobBtn.attr("disabled", false);
        // Handle the server response
        jQuery('.wljap_job_form_wrap').find(".wljap_success").remove();
        jQuery('.wljap_job_form_wrap').find(".wljap_error").remove();
        if(jQuery.trim(response) == "success")
        jQuery('.wljap_job_form_wrap').prepend('<span class="wljap_success">Job Applied Successfully</span>');

    
        else
        jQuery('.wljap_job_form_wrap').prepend('<span class="wljap_error">'+response+'</span>');
    },
    error: function(xhr, ajaxOptions, thrownError) {
        // Handle errors
        //alert('Error submitting the form.');
        alert(thrownError);
    }
});  

对应HTML表单 #

<a href="#_" style="color:#2B85BB" class="apply_now" rel-id="<?php echo $jobDetail["id"]; ?>">Apply Now</a>
<div class="wljap_job_applyform" style=" background-color:#fff; padding:20px; display:none">
    <div class="wljap_job_form_wrap">
        <form action="" method="POST" id="wljap_job_form" enctype="multipart/form-data">
            <input type="hidden" name="job_id" value="" id="apply_job_id" />
            <div class="wljap_job_form_fields">
                <label>Name:</label>
                <input type="text" name="name" />
            </div>

            <div class="wljap_job_form_fields">
                <label>Email:</label>
                <input type="email" name="email" />
            </div>

            <div class="wljap_job_form_fields">
                <label>Phone:</label>
                <input type="text" name="phone" />
            </div>

            <div class="wljap_job_form_fields">
                <label>Upload Resume:</label>
                <input type="file" name="resume" id="resumeInput" />
            </div>

            <div class="wljap_job_form_fields">
                
            <input type="submit" id="applyJob" value="Apply" />

            </div>

        </form>
    </div>
</div>

核心问题排查与修复方案 #

1. 关键变量未定义 #

• base64Credentials：注释掉了用户名密码的Base64编码逻辑，导致请求缺少合法授权头
• formData：没有定义就直接使用，且注释了表单数据获取代码
• applyJobBtn：未定义就调用attr方法

修复：
取消注释并完善凭据生成和表单数据获取逻辑：

// 替换为实际的LOXO API凭据
var usernamex = '你的API用户名';
var passwordx = '你的API密码';
// 生成Base64授权字符串
var base64Credentials = btoa(usernamex + ':' + passwordx);

// 获取表单元素
var applyJobBtn = jQuery('#applyJob');
var form = jQuery('#wljap_job_form');
var formData = new FormData(form[0]); // 直接从表单创建FormData，自动包含文件

2. 内容类型与数据格式冲突 #

• 同时设置了contentType: 'application/json'和mimeType:"multipart/form-data"，两者互斥
• 上传文件时不能用JSON.stringify，必须用FormData对象，否则文件无法正确传输

修复：
删除contentType: 'application/json'和data: JSON.stringify(formData)，直接使用FormData作为data值，jQuery会自动设置正确的multipart/form-data头：

// 移除这两行
// data: JSON.stringify(formData),
// contentType: 'application/json',
// 改为
data: formData,

3. 表单提交默认行为未阻止 #

点击表单的submit按钮会触发浏览器默认提交行为，导致AJAX请求还未完成就跳转页面，数据无法正常发送。

修复：
绑定表单提交事件，阻止默认行为：

jQuery('#wljap_job_form').on('submit', function(e) {
    e.preventDefault(); // 阻止默认提交
    // 在这里执行AJAX请求逻辑
});

4. 表单元素选择错误 #

原代码中$("#resumeinput").val()的选择器是小写，但HTML中文件输入框的id是resumeInput（首字母大写），导致无法获取文件数据。使用FormData可以避免这个问题，因为它会直接从表单中读取所有字段。

5. 响应处理逻辑错误 #

API返回的response是JSON对象，直接用jQuery.trim(response) == "success"对比字符串会失效，需要根据LOXO API的实际返回结构判断状态。

修复：
假设API返回的JSON包含status字段，调整判断逻辑：

success: function(response) {
    applyJobBtn.attr("disabled", false);
    jQuery('.wljap_job_form_wrap').find(".wljap_success, .wljap_error").remove();
    if(response.status === "success") {
        jQuery('.wljap_job_form_wrap').prepend('<span class="wljap_success">职位申请提交成功</span>');
    } else {
        jQuery('.wljap_job_form_wrap').prepend('<span class="wljap_error">'+(response.message || '提交失败')+'</span>');
    }
},

完整修复后的代码 #

jQuery('#wljap_job_form').on('submit', function(e) {
    e.preventDefault();
    var applyJobBtn = jQuery('#applyJob');
    applyJobBtn.attr("disabled", true);

    // LOXO API凭据
    var usernamex = '你的API用户名';
    var passwordx = '你的API密码';
    var base64Credentials = btoa(usernamex + ':' + passwordx);

    var form = jQuery(this);
    var formData = new FormData(form[0]);
    // 可以手动添加额外字段（如果需要）
    // formData.append('job_id', jQuery('#apply_job_id').val());

    jQuery.ajax({
        type: 'POST',
        url: 'https://loxo.co/api/kinetic-staffing/jobs/1596232/apply',
        dataType: 'json',
        data: formData,
        beforeSend: function (xhr) {
            xhr.setRequestHeader('Authorization', 'Basic ' + base64Credentials);
        },
        processData: false,  
        contentType: false, // 让jQuery自动设置正确的Content-Type
        success: function(response) {
            applyJobBtn.attr("disabled", false);
            jQuery('.wljap_job_form_wrap').find(".wljap_success, .wljap_error").remove();
            if(response.status === "success") {
                jQuery('.wljap_job_form_wrap').prepend('<span class="wljap_success">职位申请提交成功</span>');
                form[0].reset(); // 重置表单
            } else {
                jQuery('.wljap_job_form_wrap').prepend('<span class="wljap_error">'+(response.message || '提交失败，请重试')+'</span>');
            }
        },
        error: function(xhr, ajaxOptions, thrownError) {
            applyJobBtn.attr("disabled", false);
            jQuery('.wljap_job_form_wrap').find(".wljap_success, .wljap_error").remove();
            var errorMsg = thrownError || '网络错误，无法提交申请';
            if(xhr.responseJSON && xhr.responseJSON.message) {
                errorMsg = xhr.responseJSON.message;
            }
            jQuery('.wljap_job_form_wrap').prepend('<span class="wljap_error">'+errorMsg+'</span>');
        }
    });
});

内容的提问来源于stack exchange，提问作者Luis Cabré