如何使用 Jquery Ajax 将表单输入字段发送到 JSON 格式答案

【问题标题】：How to send Form Input field into JSON Format using Jquery Ajax如何使用 Jquery Ajax 将表单输入字段发送到 JSON 格式
【发布时间】：2020-02-08 21:59:18
【问题描述】：

我想将控制器上的数据发送为 JSON 格式。但进入一个字符串。那我可以这样做吗？我使用了在 ajax 调用中传递的标头，但它没有将 Form filed 转换为 JSON format 。由于字符串格式 Laravel 无法处理此响应。

我的浏览器响应。

HTML 代码

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

我的 Javascript 代码

   $("#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);
    });

【问题讨论】：

你试过 JSON.parse() 了吗？ developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： php json ajax laravel jquery-ajaxq

【解决方案1】：

您可以使用serialize 方法将数据作为Json 发送

$('#NoeticeBoardGetAllFrm').serialize()

你应该用这个代替

data: new FormData(this),

【讨论】：

【解决方案2】：

而不是data: new FormData(this);

使用关注

data: $(this).serializeArray();

它获取您的表单数据并序列化为准备转换为 JSON 的数组。

【讨论】：