如何使用 Ajax 发送多部分/表单数据

Question

我需要将我的前端数据发送到我的服务器。为此，我创建了类似这样的代码。但我找不到使用 ajax (multipart/form-data) 将我的数据发送到服务器

我的 HTML 部分 -

    <form id="frmCustomer">
        <div>
            <label class="form-label" for="customerID">Customer ID</label>
            <input class="form-control" id="customerID" name="id" type="text">
        </div>
        <div>
            <label class="form-label" for="customerName">Customer Name</label>
            <input class="form-control" id="customerName" name="name" type="text">
        </div>
        <div>
            <label class="form-label" for="customerAddress">Customer Address</label>
            <input class="form-control" id="customerAddress" name="address" type="text">
        </div>
        <div>
            <label class="form-label" for="customerSalary">Customer Salary</label>
            <input class="form-control" id="customerSalary" name="salary" type="text">
        </div>

        <div class="form-group">
            <label for="inputNICImageCreateAccount"> <i class="tags icon"></i> Image Of Your NIC</label>
            <input class="form-control-file" id="inputNICImageCreateAccount" type="file" name="file">
        </div>

        <div class="btn-group mt-3">
            <button class="btn btn-primary" id="btnSave" type="button">Register Customer</button>
            <button class="btn btn-info" id="btnSearch" type="button">Search</button>
            <button class="btn btn-danger" id="btnRemove" type="button">Remove</button>
            <button class="btn btn-warning" id="btnGetAll" type="button">Get All</button>
        </div>
    </form>

我的 Ajax 部分 -

$("#btnSave").click(function () {
    let customerID = $("#customerID").val();
    let customerName = $("#customerName").val();
    let customerAddress = $("#customerAddress").val();
    let customerSalary = $("#customerSalary").val();
    let NICImage = $('#inputNICImageCreateAccount').val();



 $.ajax({
        method: "POST",
        url: "http://localhost:8080/Back_END_war_exploded/ee/maven/customer",
        contentType: 'multipart/form-data',
        async: true,
        data:,
        success: function (data) {
            console.log(data)
        }
    })
})

Answer 1

$("#btnSave").click(function () {
    let customerID = $("#customerID").val();
    let customerName = $("#customerName").val();
    let customerAddress = $("#customerAddress").val();
    let customerSalary = $("#customerSalary").val();
    let NICImage = $('#inputNICImageCreateAccount').val();

    var data = new FormData();
    data.append('customerID',customerID);
    data.append('customerName',customerName);
    data.append('customerAddress',customerAddress);
    data.append('customerSalary',customerSalary);
    data.append('NICImage',NICImage);

    $.ajax({
        method: "POST",
        url: "http://localhost:8080/Back_END_war_exploded/ee/maven/customer",
        contentType: 'multipart/form-data',
        async: true,
        data:data,
        processData: false,
        success: function (data) {
            console.log(data)
        }
    });
});

FormData 的键设置应与您的 API 端点参数名称匹配。

以 JSON 格式而不是 Formdata 传递数据，

$("#btnSave").click(function () {
    let customerID = $("#customerID").val();
    let customerName = $("#customerName").val();
    let customerAddress = $("#customerAddress").val();
    let customerSalary = $("#customerSalary").val();
    let NICImage = $('#inputNICImageCreateAccount').val();

    var formData = {
        customerID : customerID,
        customerName : customerName,
        customerAddress : customerAddress,
        customerSalary : customerSalary 
    };

     $.ajax({
            method: "POST",
            url: "http://localhost:8080/Back_END_war_exploded/ee/maven/customer",
            contentType: 'application/json',
            async: true,
            data : JSON.stringify(formData),
            processData: false,
            success: function (data) {
                console.log(data)
            }
      });
});

Answer 2

类型：'发布'， 网址：网址， 数据类型：'json'， 数据：新表单数据（$（'#frmCustomer'）[0]）， 处理数据：假， 内容类型：假， 缓存：假， 异步：假，