如何使用 ajax 发布请求将模态值插入数据库?

Posted

技术标签:

【中文标题】如何使用 ajax 发布请求将模态值插入数据库?【英文标题】:How to insert modal values into db using ajax post request? 【发布时间】:2018-01-25 09:56:13 【问题描述】:

查看代码:

<div class="price">
<form name="priceform" >
      <div class="modal fade" id="price">
      <div class="modal-dialog">
      <div class="modal-content">
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal"><span 
      aria-hidden="true">×</span><span class="sr-only">Close</span>
      </button>
      <h4 class="modal-title">Selling Information</h4>
      </div>
      <div class="modal-body" id="modal-content">     
      <input type="hidden" name="_token" value=" csrf_token() ">
      <div class="row">
      <div class="col-sm-12">
      <b>Listing Information</b>
      <h6>Seller SKU ID  <a href="#" class='my-tool-tip' data-
   toggle="tooltip" data-placement="right" title="Unique identifier 
   for the listings">
      <span class="glyphicon glyphicon-info-sign" style="color:
      #337AB7"></span>
      </a></h6>
      <input type="text" name="skuid" id="skuvalue" class="pricevalue"/>
      </div>
      </div>
      <br/>
      <br/>
      <div class="row">
      <div class="col-sm-12">
      <b>Status Details</b>
      <h6>Listing Status  <a href="#" class='my-tool-tip' data-
      toggle="tooltip" data-placement="right" title="Inactive listings 
      are not available for buyers on Flipkart">
      <span class="glyphicon glyphicon-info-sign" 
       style="color:#337AB7"></span>
        </a></h6>
      <select id="dropDownId" name="listingStatus">
      <option selected disabled>--Choose here--</option>
      <option value="Active">Active</option>
      <option value="Inactive">Inactive</option>
      </select>
      </div>
      </div>
       <br/>
      <br/>
      <div class="row">
      &nbsp;&nbsp;&nbsp;&nbsp;<b>Price Details</b>
      <div class="col-sm-12">
      <div class="col-sm-6">
      <h6>MRP  <a href="#" class='my-tool-tip' data-toggle="tooltip" 
    data-placement="right" title="Maximum retail price of the 
      product">
      <span class="glyphicon glyphicon-info-sign" style="color:
      #337AB7"></span>
      </a></h6>
      <input type="text" name="mrp" id="mrpvalue" class="check-fill"/>
      </div>
      <div class="col-sm-6">
      <h6>Your Selling Price   <a href="#" class='my-tool-tip' data-
       toggle="tooltip" data-placement="right" title="Price at which 
         you want to sell this listing">
      <span class="glyphicon glyphicon-info-sign" 
      style="color:#337AB7"></span>
      </a></h6>
      <input type="text" name="selprice" id="selpricevalue" 
       class="check-fill"/>
      </div>
      </div>
      </div>
      <br/>
      <br/>
      <div class="row">
      &nbsp;&nbsp;&nbsp;&nbsp;<b>Inventory Details</b>
      <div class="col-sm-12">
      <div class="col-sm-6">
      <h6>Fulfilment By  <a href="#" class='my-tool-tip' data-
        toggle="tooltip" data-placement="right" title="Fullfilment of 
           FA listings will be managed by Flipkart ">
      <span class="glyphicon glyphicon-info-sign" style="color:
      #337AB7"></span>
      </a></h6>
      <select id="5" name="fulfillment">
      <option selected disabled>Choose here</option>
      <option value="Seller">Seller</option>
      </select>
      <br/>
      <h6>Procurement SLA  <a href="#" class='my-tool-tip' data-
        toggle="tooltip" data-placement="right" title="Time required 
      to keep the product ready for dispatch">
      <span class="glyphicon glyphicon-info-sign" 
        style="color:#337AB7"></span>
      </a></h6>
      <input type="text" name="sla" class="check-fill"/>Days
      <br/>
          <h6>Stock available for Buyers  <a href="#" class='my-tool-
       tip' data-toggle="tooltip" data-placement="right" title="Number 
     of items available for cutomer to buy after detecting pending 
     orders" >
      <span class="glyphicon glyphicon-info-sign" style="color:
     #337AB7"></span>
      </a></h6>
      <input type="text" name="available" readonly/>
      </div>
      <div class="col-sm-6">
      <h6>Procurement Type  <a href="#" class='my-tool-tip' data-
      toggle="tooltip" data-placement="right" title="Information on 
       how the inventory is procured by the seller to fulfill an 
     order">
      <span class="glyphicon glyphicon-info-sign" 
           style="color:#337AB7"></span>
      </a></h6>
      <select name="procurementType">
      <option selected disabled>--Choose here--</option>
      <option value="instock">instock</option>
      </select>
      <br/>
      <h6>Stock  <a href="#" class='my-tool-tip' data-toggle="tooltip" 
      data-placement="right" title="Number of items you have in 
      stock">
      <span class="glyphicon glyphicon-info-sign" style="color:
       #337AB7"></span>
      </a></h6>
      <input type="text" name="stock" />
      <br/>
      </div>
      </div>
      </div>
      <br/>
      <br/>
      <div class="row">
      &nbsp;&nbsp;&nbsp;&nbsp;<b>Delivery charge to customer</b>
      <div class="col-sm-12">
      <div class="col-sm-4">
      <h6>Local Delivery Charge  <a href="#" class='my-tool-tip' data-
       toggle="tooltip" data-placement="right" title="Delivery charge 
     you want charge a buyer in the same city for listings which are 
     not Flipkart Assured">
      <span class="glyphicon glyphicon-info-sign" 
     style="color:#337AB7"></span>
      </a></h6>
      <input type="text" name="local" />
      </div>
      <div class="col-sm-4">
      <h6>Zonal Delivery Charge  <a href="#" class='my-tool-tip' data-
      toggle="tooltip" data-placement="right" title="Delivery charge 
    you want charge a buyer in the same zone for listings which are 
      not Flipkart Assured">
      <span class="glyphicon glyphicon-info-sign" style="color:
        #337AB7"></span>
      </a></h6>
      <input type="text" name="zonal" />
      </div>
      <div class="col-sm-4">
      <h6>National Delivery Charge  <a href="#" class='my-tool-tip' 
       data-toggle="tooltip" data-placement="right" title="Delivery 
      charge you want charge a buyer outside your zone for listings 
       which are not Flipkart Assured">
      <span class="glyphicon glyphicon-info-sign" 
      style="color:#337AB7"></span>
      </a></h6>
      <input type="text" name="national" />
      </div>
      </div>
      </div>
      <br/>
      <br/>
      <div class="row">
      &nbsp;&nbsp;&nbsp;&nbsp;<b>Packaging Details</b>
      <div class="col-sm-12">
        <div class="col-sm-3">
      <h6>Package Weight  <a href="#" class='my-tool-tip' data-
      toggle="tooltip" data-placement="right" title="Weight of the 
            final package in kgs">
      <span class="glyphicon glyphicon-info-sign" style="color:
     #337AB7"></span>
      </a></h6>
      <input type="text" name="weight" />Kgs
      </div>
      <div class="col-sm-3">
      <h6>Package Length  <a href="#" class='my-tool-tip' data-
          final package in cms">
      <span class="glyphicon glyphicon-info-sign" 
       style="color:#337AB7"></span>
      </a></h6>
      <input type="text" name="length" />cms
      </div>
       <div class="col-sm-3">
      <h6>Package Breadth  <a href="#" class='my-tool-tip' data-
       toggle="tooltip" data-placement="right" title="Breadth of the 
         final package in cms">
         <span class="glyphicon glyphicon-info-sign" style="color:
      #337AB7"></span>
      </a></h6>
      <input type="text" name="breadth" />cms
      </div>
      <div class="col-sm-3">
      <h6>Package Height  <a href="#" class='my-tool-tip' data-
          toggle="tooltip" data-placement="right" title="Height of the 
         final package in cms">
      <span class="glyphicon glyphicon-info-sign" 
         style="color:#337AB7"></span>
      </a></h6>
      <input type="text" name="height" />cms
      </div>
      </div>
      </div>
      <br/>
      <br/>
      <div class="row">
      <div class="col-sm-12">
      <b>Tax Details</b>
      <h6>HSN  <a href="#" class='my-tool-tip' data-toggle="tooltip" 
             data-placement="right" title="code of your product for 
     determining applicable tax rates">
      <span class="glyphicon glyphicon-info-sign" style="color:
        #337AB7"></span>
      </a></h6>
      <input type="text" name="hsn" />
      <a href="#">Find relevant HSN codes</a>
      </div>
      </div>
       <br/>
      <br/>
      <input type="submit" id="priceSave" class="save" value="Save" 
      style="border-radius: 8px; padding: 5px 15px; ">
</form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-info" data-
   dismiss="modal">Close</button>
    <!--<button type="submit" id="priceSave" class="save" 
    style="border-radius: 8px; padding: 5px 15px; 
        display:none;">Save</button>-->
</div>

<div>
<!-- /.modal-content -->
</div>
<div>
<!-- /.modal-dialog -->
</div>

这是我的引导模式。我需要将这些表单值添加到数据库中。为此,我一直在使用 ajax 发布请求。问题是,如果我评论了表单标签,则 url 重定向适用于 ajax 发布请求。但是由于表格的评论而没有添加的值。但是当包含时,不会发生插入。

脚本代码:

<script src = 
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () 
$.ajaxSetup(
    headers: 
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    
);
$("#priceSave").click(function()
$.ajax(
    url: 'addPriceDetails/$dataId',
    type: "post",
    /*success:function(data) 
    alert(data);
    */                        
);
);
);
</script>

这是我试过的脚本。

路线代码:

Route::post('addPriceDetails/dataId','priceDetails@addPriceDetails');

控制器:

public function addPriceDetails(Request $priceform,$dataId)
 
//echo ("1234");
$priceInfo = new priceInfo ;
$priceInfo->deviceCategoryId=$dataId;
$priceInfo->productId=$this->getproductId();
$priceInfo->SKUID =$priceform->input('skuid');
$priceInfo->listingStatus =$priceform->input('listingStatus');
$priceInfo->MRP =$priceform->input('mrp');
$priceInfo->sellingPrice=$priceform->input('selprice');
$priceInfo->fulfillmentBy =$priceform->input('fulfillment');
$priceInfo->procurementType =$priceform->input('procurementType');
$priceInfo->procurementSLA =$priceform->input('sla');
$priceInfo->stock =$priceform->input('stock');
$priceInfo->localDelCharge =$priceform->input('local');
$priceInfo->zonalDelCharge =$priceform->input('zonal');
$priceInfo->nationalDelCharge=$priceform->input('national');
$priceInfo->packWeight =$priceform->input('weight');
$priceInfo->packLength =$priceform->input('length');
$priceInfo->packBreadth =$priceform->input('breadth');
$priceInfo->packHeight =$priceform->input('height');
$priceInfo->HSN =$priceform->input('hsn');

$priceInfo->save();

//echo($priceInfo->SKUID);
return Redirect::back()->with('SKUID',$priceInfo->SKUID)-
>with('listingStatus',$priceInfo->listingStatus)-
>with('MRP',$priceInfo->MRP)->with('sellingPrice',$priceInfo-
>sellingPrice);
 

这里是控制器代码,用于将模态值插入到 db 中,还将一些值重定向到视图

【问题讨论】:

【参考方案1】:

您的 Javascript 未发送表单中的任何数据。您需要收集它,并将其发布到您的 AJAX 调用中,如下所示:

在您的 Javascript 中

$("#priceSave").click(function(e)
    e.preventDefault();
    var data = $('form').serialize();
    $.ajax(
        url: 'addPriceDetails/$dataId',
        type: "post",
        data: data,
        dataType: 'json',
        success: function(response) 
            alert(response.SKUID);
        
    );
);

在您的控制器中

public function addPriceDetails(Request $priceform,$dataId) 
    // ... all your code
    return response()->json([
        'SKUID'    => $priceInfo->SKUID,
        'listingStatus' => $priceInfo->listingStatus
        // ... any other fields you want to return
    ]);

我不确定您为什么要返回您刚刚发布的某些字段。返回操作结果(例如成功或错误)然后在前端显示会更有意义。

【讨论】:

太棒了!现在它保存在数据库中。但它不会重定向值 not redirecting the values - 这是什么意思,会发生什么?你的 Javascript 中有 dataType: 'json' 吗? 现在它保存到 db.BUT 重定向它甚至不显示警告框 我明白了——我们还必须防止表单提交的默认操作。我已经更新了我的答案 - 请尝试新的 Javascript。【参考方案2】:

试试下面的addPriceDetails() 方法代码。这不是解决方案。

.
.
.
$priceInfo->save();
if(!$priceInfo)
    App::abort(500, 'Error');

else 
    return Redirect::back()->with('SKUID',$priceInfo->SKUID)->with('listingStatus',$priceInfo->listingStatus)->with('MRP',$priceInfo->MRP)->with('sellingPrice',$priceInfo->sellingPrice);

【讨论】:

是的,我会试试 表示记录插入成功,与你的数据库表检查确认 不,先生,我只保存了 `deviceCategoryId` 和 productId。而不是 SKUID 和 all 等其他值 检查并将这些列作为可填充列添加到您的模型中。可能这是mass assignment 问题 已添加,但同样发生

以上是关于如何使用 ajax 发布请求将模态值插入数据库?的主要内容,如果未能解决你的问题,请参考以下文章

ReactJS:在superagent ajax请求期间显示带有加载消息的模态

如何在 laravel 中使用 ajax 发布请求将图像插入数据库?

如何通过 fullcalendar 使用 AJAX 将引导模式输入插入到 SQL 表中

如何在Ajax的第二个请求中修复数据库中插入的0值?

使用 laravel 提交带有验证的模态表单

如何将 $_SESSION 变量添加到 Ajax 请求中并将数据插入到 mysql 数据库 PHP 中?