Javascript 无需刷新的Ajax Post数据表单

首先，我被困在方法和类型之间，好像我已经在表单中定义了方法，所以我不必在ajax中定义它，如果是这样的话？ajax在控制台中提供未定义的属性

其次，下面的代码给出了不允许的405 POST方法

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

任何帮助都可以

控制器功能

路线：

表格：

按钮：

脚本：

您需要将action属性从表单传递到ajax调用，如下所示

$document.readyfunction{ $'form_skill'。在'submit'上，功能事件{ 违约事件； $.ajax{ url:$this.attr'action'， 类型:post,， 数据：$this.serialize， 数据类型：“json”， 成功：功能反应{ 如果响应错误{ console.log'Ajax Success' }否则{ console.logresponse.success } } }; }; };

---

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

$document.on'submit'，'form\u 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 () {

        }
});

})

---

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

为什么您的操作url是空字符串？您需要在ajax URL属性中传递URL，而不是在表单中传递incorrect@ShariqShaikh这不是ajax url的工作方式。您需要在ajax url中传递路由url:“/developer/create/skill/”，就像其他人说的那样，action_url是空的，您不传递任何内容。你向任何地方发出了发帖请求。如果表单中有action_url，那么var action_url=；将取代它最好的办法是打开浏览器的开发人员工具，并在“网络”选项卡中检查发送表单时发送的内容。

    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>

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 () {

        }
});