0

I need to send my Front-end data to my server. To do that I create code something like this. But I can't find out send my data to the server using ajax (multipart/form-data)

My HTML Part -

    <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>

My Ajax Part -

$("#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)
        }
    })
})
Gathsara
  • 51
  • 1
  • 9

2 Answers2

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)
        }
    });
});

keys setting with FormData should match with your API endPoint parameter names.

to pass data in JSON format rather the 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)
            }
      });
});
ThilankaD
  • 1,021
  • 1
  • 13
  • 24
  • Uncaught TypeError: Illegal invocation at i (jquery-3.6.0.min.js:2) at At (jquery-3.6.0.min.js:2) at Function.S.param (jquery-3.6.0.min.js:2) at Function.ajax (jquery-3.6.0.min.js:2) at HTMLButtonElement. (script.js:35) at HTMLButtonElement.dispatch (jquery-3.6.0.min.js:2) at HTMLButtonElement.v.handle (jquery-3.6.0.min.js:2) – Gathsara Jun 12 '21 at 11:24
  • Can't figure out anything wrong with the Ajax request. try setting `contentType: false` or verify and confirm whether the `url` is correct. – ThilankaD Jun 12 '21 at 11:57
  • I already tried. But No of this no work. :cry: – Gathsara Jun 12 '21 at 11:58
  • Could you please check the update to the answer? – ThilankaD Jun 12 '21 at 12:10
  • jquery-3.6.0.min.js:2 POST http://localhost:8080/Back_END_war_exploded/ee/maven/customer 400 – Gathsara Jun 12 '21 at 12:18
  • OK. Now the Ajax is sending the request. 400 means Bad request which indicates due to issues like endpoint error/endpoint URL error/ wrong parameter names, etc.... Now you need to cross-check the Ajax request and Java Endpoint and make sure they are correct. – ThilankaD Jun 12 '21 at 12:23
  • Not Working and I have No error like endpoint error/endpoint URL error/ wrong parameter names, et – Gathsara Jun 12 '21 at 17:40
  • @Gathsara, 400 indicates a malformed request. So it is not accepted by the endpoint. since you didn't mention the server-side endpoint implementation in here, you need to check this by yourself. Since you have asked how to send the Ajax request that part is not relevant to this question either. further, you can check in network tab in the browser's dev tools as well. – ThilankaD Jun 13 '21 at 07:24
  • Thank You very Much..@ThilankaD – Gathsara Jun 13 '21 at 14:30
-1

type:'post', url:url, dataType:'json', data:new FormData($('#frmCustomer')[0]), processData: false, contentType: false, cache:false, async:false,

user16206156
  • 1