使用 jQuery 将表单数据作为数组传递给 Laravel

Posted

技术标签:

【中文标题】使用 jQuery 将表单数据作为数组传递给 Laravel【英文标题】:Passing form data with jQuery to Laravel as an array 【发布时间】:2019-11-13 21:07:18 【问题描述】:

我有一个 Bootstrap 4 Modal,它的主体中有一个表单。它有一个输入类型文本和一个输入类型文件,也可以上传多个文件。如何获取文本和图像并使用 AJAX 将它们发送到我的后端?

我的 html 标记:

<div class="modal fade" id="myModal">
          <div class="modal-dialog">
            <div class="modal-content">

              <!-- Modal Header -->
              <div class="modal-header">
                <h4 class="modal-title">Update Post</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>

              <!-- Modal body -->
              <div class="modal-body">
                <form class="updateForm">
                    <input type="text" class="form-control textt" name="text">


                    <label class="float-left m-2" style="padding: 4px; background-color: white;cursor: pointer;font-weight: 600;border-radius: 10px; border: none; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);">
                        ADD PICTURES 
                        <span>
                            <img src="http://www.transparentpng.com/thumb/logo-instagram/SKq9yH-black-and-white-instagram-logo-png.png" style="width: 25px; height: 25px;">
                        </span>
                        <input type="file" id="file-input" name="images[]" style="display: none;" class="inp" multiple >

                        <div id="preview"></div>

                    </label>

                    <button class="btn btn-warning btn-block updatee">UPDATE</button>

                </form>
              </div>

            </div>
          </div>
        </div>

我试图将我的数据存储在这样的对象中:

$('.updateForm').submit(function(e)

    e.preventDefault();

       var values = ;

    $.each($('.updateForm').serializeArray(), function(i, field) 

        values[field.name] = field.value;

    );
);

但它只给了我一个带有文本的对象。

【问题讨论】:

你知道ajax怎么用吗? 是的,我可以进行 AJAX 调用 【参考方案1】:
var form_data = new FormData($('#ur_form')[0]);
            $.ajax(
                method: "POST",
                url: "post-url",
                data: form_data,
                cache : false,
                contentType: false,
                processData: false,
                success: function (result) 
                    //success
                
            );

试试这个方法。不要忘记在表单中添加 csrf 字段

【讨论】:

您能否告诉我如何从 Laravel 获取数据。我尝试执行 $request->input("form_data") 和 $request->file("form_data") 但都返回 null。 可以通过字段名获取。例如:$request->input('first_name');或 request->file('image'); 我可以获取文本并成功打印,但是当我执行 $request->file('image') 时,它会返回 link Ith 是上传的文件。您可以使用 foreach 函数并将这些文件保存在文件夹中。 它是数组格式。你可以使用 foreach( $request->file('image') as $image) //上传图片代码

以上是关于使用 jQuery 将表单数据作为数组传递给 Laravel的主要内容,如果未能解决你的问题,请参考以下文章

将php数组传递给jquery函数

jQuery Ajax 不将数组作为数据对象发送

使用 jquery 调用 cakephp 动作并将数组作为参数传递

将数组传递给 jQuery 每个函数以重新格式化数据

将 laravel 变量传递给 jquery 数组

从使用 jQuery 加载的表单中检索数据并将其传递给父页面