Question

我正在尝试从范围滑块获取值，并使用ajax更新数据库，但这给了我404状态错误。我正在使用Laravel。

这是我的路线：

Route::post('developer/work-progress/changeProgess','DeveloperController@changeProgess');

这是html代码：

<div class="form-group row themered">
    <label for="range_02" class="col-sm-2 col-xs-12 control-label"><b>Back-End</b><span class=" font-13 d-block text-muted clearfix">Set backend progress</span></label>
    <div class="col-sm-10 col-xs-12">
        <input type="text" id="range_01" name="frontend_percent">
    </div>
</div>

<div class="form-group row themered">
    <label for="range_02" class="col-sm-2 col-xs-12 control-label"><b>Front-End</b>
        <span class=" font-13 d-block text-muted clearfix">Set frontend progress</span>
    </label>
    <div class="col-sm-10 col-xs-12">
        <input type="text" id="range_02" name="backend_percent">
    </div>
</div>

<div class="form-group">
    <input class="progressId" type="hidden" name="id" value="{{$order->id}}">
</div>

<div>
    <button class="btn btn-info changeProgress">Change</button>
</div>

这是我的jQuery代码：

var frontend  = $('#range_01').val();
var backend  = $('#range_02').val();

$('#range_01').change(function () {
    frontend = $(this).val();
});

$('#range_02').change(function () {
    backend = $(this).val(); 
});

$('.changeProgress').click(function () {   
    $.ajax({
        type: 'post',
        url: 'work-progress/changeProgress',
        dataType: 'json',
        data: {
            'frontend_percent' : frontend,
            'backend_percent' : backend,
            'id':   $('.progressId').val()
        },
        headers: {"X-CSRF-Token": token},
        success : function (data) {
            console.log("worked");
        }
     });
});

这是控制器功能：

public function changeProgess(Request $request) {

    $data = Order::findOrFail($request->id);

    $data->frontend_percent = $request->frontend_percent;
    $data->backend_percent =  $request->backend_percent;

    $data->save();

    return response()->json($data);

}

我可以在检查网络标签时看到自己的数据以及csrf令牌。所以我不知道问题出在哪里。

Answer 1

实际上，您实际上需要使用请求对象的方法，例如“ input”，就像这样

//data object
project1: {
  otherData: 'value',
  technology: [ 
    {
      name: 'HTML',
      logo: 'logoTest.png',
      altText: 'HTML Logo'
    },
    {
      name: 'CSS',
      logo: 'CSSLogo.png',
      altText: 'CSS Logo'
    }
  ]},
project2: {
  otherData: 'otherInfo',
  technology: [ 
    {
      name: 'HTML',
      logo: 'logoTest.png',
      altText: 'HTML Logo'
    },
    {
      name: 'CSS',
      logo: 'CSSLogo.png',
      altText: 'CSS Logo'
    },
    {
      name: 'JavaScript',
      logo: 'jsTest.png',
      altText: 'JavaScript Logo'
    }
  ]}

//Component
const Technology = props => {
  const techList = props.technology; //object
  console.log(techList); //logs: [{...},{name: 'CSS',logo: 'CSSLogo.png',altText:'CSS Logo'}]
   let techItem = techList.forEach(function(arrayItem) {
      let name = arrayItem.name;
      let logo = arrayItem.logo;
      let altText = arrayItem.altText;
      console.log(name, logo, altText); //logs: CSS CSSLogo.png CSSLogo

        let techDetails = [name, logo, altText];
        console.log(techDetails); //logs values in separate console.logs: name, logo, altText

        let loopThru = techDetails.forEach(function(item) {
            console.log(item);
            return item;
        });

      console.log(techItem,loopThru); //logs 'undefined, 'undefined'
    });

    return(
        <div>
          <p>Tech Component</p> //rendered in browser
          <p>{loopThru}</p> // is NOT rendered in browser
        </div>
    );
};

等等。您可以在这里了解更多信息：https://laravel.com/docs/5.6/requests 如果您未使用5.6来反映自己的版本，请不要忘记更改url中的版本。

Answer 2

有两件事可能引起您的问题。

首先，您需要检查您的路线是否正确。最简单的方法是将dd（）放在changeProgess()函数的顶部

public function changeProgess(Request $request) {
    dd('here');  // test dd
    $data = Order::findOrFail($request->id);

如果您要到达那里，那么下一步就是找出您要传递的ID是否存在于数据库中。

如果您的数据库中没有该ID，则findOrFail()函数将返回404。

最简单的方法是查看是否通过了该函数。

public function changeProgess(Request $request) {
    $data = Order::findOrFail($request->id);
    dd($data);  // test dd

如果您没有到达这里，则您的数据库中没有Order，您将需要检查传递到表单中的值。

Ajax查询不适用于Laravel中的范围滑块

2 个答案: