首页 > 解决方案 > 如何使用 Jquery Ajax 将表单输入字段发送为 JSON 格式

问题描述

我想将控制器上的数据发送为JSON格式。但进入一个字符串。那我可以这样做吗?我使用了在 ajax 调用中传递的标头,但它没有将Form 文件转换为JSON 格式。由于字符串格式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);
    });

标签: phpjsonajaxlaraveljquery-ajaxq

解决方案


您可以使用序列化方法将数据作为 Json 发送

$('#NoeticeBoardGetAllFrm').serialize()

您应该使用它来代替

data: new FormData(this),

推荐阅读