Ajax Post 数据表单不刷新答案

【问题标题】：Ajax Post Data Form without refreshingAjax Post 数据表单不刷新
【发布时间】：2020-02-06 13:10:01
【问题描述】：

首先，我被困在 method 和 type 之间，好像我已经在表单中定义了方法，所以我不必在 ajax 中定义它，并且如果是这样？ ajax 在控制台中给出 undefined。

其次，下面的代码给出了405 POST method not allowed。

另外，当我成功尝试用 ajax 刷新整个页面时，我想在不刷新页面的情况下将数据发布到服务器。

任何帮助都可以！

控制器功能

public function storeDevSkill(Request $request, $user_id)
{
    $this->validate($request,
        [
            'dev_skill_name' => 'required',
            'dev_skill_exp' => 'required',
        ]);

    try {
        $data = array(
            'dev_id' => $user_id,
            'dev_skill_name' => $request->dev_skill_name,
            'dev_skill_exp' => $request->dev_skill_exp,
        );
        DevSkill::create($data);
        return back();
    } catch (\Exception $exception) {
        return back()->withError($exception->getMessage())->withInput();
    }
}

路线：

    Route::post('/developer/create/skill/{user_id}', 'SuperAdminControllers\DeveloperController@storeDevSkill')->name('store.developer.skill');

表格：

<form id="form_skill" method="POST" enctype="multipart/form-data" action= "{{route('store.developer.skill',$user->user_id)}}">

按钮：

<button type="submit" id="addskillSubmit" value="{{$user->user_id}}" style="display: none;" class="btn btn-primary">Save</button>

脚本：

<script>
    $(document).ready(function () {
        $('#form_skill').on('submit', function (event) {
            console.log("Ajax Call")
            event.preventDefault();
            var action_url = '';
            var user_id = $(this).attr('value');
            console.log(action_url)

            $.ajax({
                url: action_url,
                type: "post",
                data: $(this).serialize(),
                // dataType: 'json',

                success: function (response) {
                    if (response.error) {
                        console.log('Ajax Success')
                    } else {
                        // var table = $('#addskilltable').DataTable();
                        // table.ajax.reload();
                        console.log(response.success)
                    }
                }
            });
        });
    });
</script>

【问题讨论】：

为什么你的action_url 是一个空字符串？您需要在 ajax url 属性中传递 URL，而不是在表单中。
我认为 action_url 不正确
@ShariqShaikh 这不是 ajax url 的工作方式。你需要通过你的route url ajax url: '/developer/create/skill/'
就像其他人说的那样，action_url 是空的，你什么都不会通过。您向无处发出发布请求。如果您的表单中有action_url，var action_url = ''; 行将替换它
最好的办法是打开浏览器的Developer tools 并在“网络”选项卡中查看发送表单时发送的内容。

标签： javascript php jquery ajax laravel

【解决方案1】：

您需要像这样将表单中的action 属性传递给您的ajax 调用

<script>
  $(document).ready(function () {
    $('#form_skill').on('submit', function (event) {
      event.preventDefault();
      $.ajax({
        url: $(this).attr('action'),
        type: "post",
        data: $(this).serialize(),
        dataType: 'json',

        success: function (response) {
          if (response.error) {
            console.log('Ajax Success')
          } else {
            console.log(response.success)
          }
        }
      });
    });
  });
</script>

试一试，看看会不会有什么改变。

【讨论】：

【解决方案2】：

$(document).on('submit', '#form_skill', function(e){

e.preventDefault();

var nFormId = '#'+ $(this).attr('id');
var formData = $(this).serialize();
var url = $(this).attr('action');
$.ajax({
          type: "POST",
          url: url,
          data: formData,
          success: function (response) {
            console.log(response);
            $(nFormId)[0].reset();
          },
          error: function (jqXHR, exception) {

          },
          beforeSend: function () {

          },
          complete: function () {

        }
});

});

希望这个答案对你有所帮助。

【讨论】：