How to send Form Input field into JSON Format using Jquery Ajax

Question

I want to send data on the controller into JSON format. but getting into a string. so can I do this? I used header that is being passed on ajax call but it not converting Form filed into JSON format . due to string format Laravel not able to process this response.

My Browser Response.

HTML Code

       <form id="NoeticeBoardGetAllFrm"  name="NoeticeBoardGetAllFrm" role="form" method="post" >
                <div class="row">
                    <div class="col-sm-6">
                        <label> URL </label>
                        <input type="text" name="NoeticeBoardGetAllUrl" id="NoeticeBoardGetAllUrl"
                               class="form-control"   placeholder="URL"
                               value="https://XXXXXXXXXXXX/get-all-notice-board-information"/>
                    </div>

                    <div class="col-sm-4">
                        <label> Session Code </label>
                        <input type="text" name="scode" id="scode" class="form-control"
                               value="cFZnMVJUY0JNUUJsTXZBeVZhZmRHZz09"
                                maxlength="50" minlength="32" placeholder="Session Code"/>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-sm-2">
                        <input type="submit" name="NoeticeBoardGetAllBtn" id="NoeticeBoardGetAllBtn"
                               class="btn btn-danger "   value="Get Result"  />
                    </div>
                    <div class="col-sm-3"> <i class="fa fa-reddit-square"></i>
                        <span class="inLine">Result :</span>
                        <div id="NoeticeBoardGetAllResult" class="inLine result_box">---</div>
                    </div>
                </div>
            </form>

My Javascript Code

   $("#NoeticeBoardGetAllFrm").submit(function(e) {
        e.preventDefault();

        console.log( new FormData(this));
        $.ajax({
            url: $("#NoeticeBoardGetAllUrl").val(),
            type: 'POST',
              headers: {'Accept': 'application/json','Content-Type': 'application/json',
                'DBAuth': $("#DBAuth").val(),'Authorization': $("#Authorization").val(),},
            dataType: 'json',
            data: new FormData(this),
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                if (data.error == 0) {
                    $("#NoeticeBoardGetAllResult").html("Record fetched successfully!");
                    $("#NoeticeBoardGetAllResult").addClass("alert alert-success");

                } else {
                    $("#NoeticeBoardGetAllResult").html(data.errmsg);
                    $("#NoeticeBoardGetAllResult").addClass("alert alert-warning");
                }
            }, statusCode: {
                500: function (data) {
                    $("#NoeticeBoardGetAllResult").html("Something went wrong!");
                    $("#NoeticeBoardGetAllResult").addClass("alert alert-danger");
                },
                401: function (data) {
                    $("#NoeticeBoardGetAllResult").html("Login Failed");
                    $("#NoeticeBoardGetAllResult").addClass("alert alert-danger");
                }
            }
        });
        setTimeout(function(){ resetResult(); }, 3000);
    });

Answer 1

You can use serialize method to send Data as Json

$('#NoeticeBoardGetAllFrm').serialize()

You should use this in place of

data: new FormData(this),

Answer 2

instead of data: new FormData(this);

use following

data: $(this).serializeArray();

It gets your form data and serialize into array that is ready of convert into JSON.