Javascript 如何处理接收到的数据以将其保存在数据库Laravel和Ajax中？

我试图在不刷新页面的情况下将带有多个图像的产品添加到数据库中，我在控制台上没有收到任何错误，但我看到了这样开始的长文本

<script> Sfdump = window.Sfdump || (function (doc) { var refStyle = doc.createElement('style'), rxEsc = /([.*+?^${}()|\[\]\/\\])/g, idRx = /\bsf-dump-\d+-ref[012]\w+\b/, keyHint = 0 <= navigator.platform.toUpperCase().indexOf('MAC') ? 'Cmd' : 'Ctrl', addEventListener = ....

刀片

---

根据您在注释中添加的错误，

$request->photos

中的值是不可迭代的，这是有意义的，因为您不使用表单数据来处理上载

普通ajax不处理文件上载，因此您必须使用：

var-token=$（“#token”）.val（）；
$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
var form=$（'form'）[0]；//此处需要使用标准javascript对象
var formData=新formData（表格）；
formData.append（“_token”，token）；//添加token
$.ajax({
url:“”，
data:formData，//仅此而已，不带变量
键入：“POST”，
contentType:false，//需要，不要忽略它（需要jQuery 1.6+）
processData:false，//需要，不要忽略此项
成功：功能（数据）{
控制台日志（数据）；
}
});
});
});

根据您在评论中添加的错误，

$request->photos

中的值是不可迭代的，这是有意义的，因为您不使用表单数据来处理上载

普通ajax不处理文件上载，因此您必须使用：

var-token=$（“#token”）.val（）；
$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
var form=$（'form'）[0]；//此处需要使用标准javascript对象
var formData=新formData（表格）；
formData.append（“_token”，token）；//添加token
$.ajax({
url:“”，
data:formData，//仅此而已，不带变量
键入：“POST”，
contentType:false，//需要，不要忽略它（需要jQuery 1.6+）
processData:false，//需要，不要忽略此项
成功：功能（数据）{
控制台日志（数据）；
}
});
});
});

您是否查看了chrome开发者工具中的网络部分？如果未单击，

ctrl+shift+i

，一旦开发工具显示，选择“网络”，然后再次触发事件（提交表单），然后单击将显示的链接并检查响应。我看到此

“消息”：“为foreach（）提供的参数无效”，“异常”：“ErrorException”，

当我单击response@MEDZDid时，您是否检查了chrome developer tools中的网络部分？如果未单击，

ctrl+shift+i

，一旦开发工具显示，选择“网络”，然后再次触发事件（提交表单），然后单击将显示的链接并检查响应。我看到此

“消息”：“为foreach（）提供的参数无效”，“异常”：“ErrorException”，

当我点击response@MEDZSo时，我刚刚发现产品被添加到数据库中，而不是图像，我试图更改代码并使用带有

formData的代码，但它没有添加产品@MEDZWell，请尝试dd（$request->all（））然后检查“预览”选项卡上的网络部分，让我知道请求是否包含任何数据。此外，我在代码中没有看到标记。。请确保您有一个标签，因为表单数据正在使用标签。您是否在html模板中使用标签？如果我放置此
，我会收到一个错误
，此路由不支持POST方法。支持的方法：GET、HEAD、PUT、PATCH、DELETE。
@MEDZSo我刚刚发现产品已添加到数据库中，但未添加图像，我尝试更改代码并使用带有
formData
的代码，但它未添加产品@MEDZWell，尝试添加（$request->all（））然后检查“预览”选项卡上的网络部分，让我知道请求是否包含任何数据。此外，我在代码中没有看到标记。。请确保您有一个标签，因为表单数据正在使用标签。您是否在html模板中使用标签？如果我放置此
，我会收到一个错误
，此路由不支持POST方法。支持的方法：GET、HEAD、PUT、PATCH、DELETE。
@MEDZ
 public function store(Request $request)
 {
    $formInput=$request->except('filename');

    $product = product::create(array_merge($formInput, [
        'seller_id'=> Auth::user()->id,
        'user_id' => Auth::user()->id
    ]));
    foreach ($request->photos as $photo) {
       $filename = $photo->store('public/photos');
        ProductsPhoto::create([
            'product_id' => $product->id,
            'filename' => $filename
        ]);
    }
}

  <div class="panel-body">

   <input type="hidden" value="{{csrf_token()}}" id="token"/>

     <label for="pro_name">Name</label>
      <input type="text" class="form-control" name="pro_name" id="pro_name" placeholder="Enter product name">

        <label for="pro_price">Price</label>
           <input type="text" class="form-control" name="pro_price" id="pro_price" placeholder="Enter price">

        <label for="pro_info">Description</label>
         <input type="text" class="form-control" name="pro_info" id="pro_info" placeholder="Enter product description">

           <label for="stock">Stock</label>
            <input type="text" class="form-control" name="stock" id="stock" placeholder="Enter stock">

        <label  for="category_id">Choose Category</label>
           <select name="category_name" id="category_name">
             <option value=""> --Select Category -- </option>
               @foreach ($categoryname_array as $data)
                <option value="{{ $data->name }}"  >{{$data->name}}</option>
                 @endforeach
               </select>

 <label for="photos">Choose 5 Images</label>
  <input  "multiple="multiple" id="photos" name="photos[]" type="file">

  <input type="submit" class="btn btn-primary" value="Submit" id="btn"/>

</div>

   $(document).ready(function(){
   $("#btn").click(function(){
    var category_name = $("#category_name").val()
    var pro_name = $("#pro_name").val();
    var pro_price = $("#pro_price").val();
    var stock = $("#stock").val();
    var pro_info = $("#pro_info").val();
    var photos = $("#photos").val();
    var token = $("#token").val();

    $.ajax({

        type: "post",
        data: "pro_name=" + pro_name + "&pro_price=" + pro_price + "&stock=" + stock + "&_token=" + token + "&category_name=" + category_name + "&pro_info=" + pro_info + "&photos=" + photos,
        url: "<?php echo url('seller/product') ?>",
        success:function(data){
        console.log(data);
        }

    });
  });
});

 Route::post('seller/product', 'ProductController@store')->name('product.store');

var token = $("#token").val();
$(document).ready(function(){
    $("#btn").click(function(){
        var form = $('form')[0]; // You need to use standard javascript object here
        var formData = new FormData(form);
        formData.append('_token', token); // adding token
        $.ajax({
            url: "<?php echo url('seller/product') ?>",
            data: formData, //just that without variables
            type: 'POST',
            contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
            processData: false, // NEEDED, DON'T OMIT THIS
            success:function(data){
                console.log(data);
            }
        });
    });
});