javascript - 调用ajax函数从html提交表单如何传递输入值？

Question

我正在使用模态提交新数据。它使用 ajax 来使用 API。

我通过 API 发送数据没有问题，但我不擅长 html，如何传递表单数据的值令人困惑。

在这种情况下，我向用户展示了一个模式来输入新数据，然后将其提交给 ajax 函数addData()，并且我想发送所有表单值，但我不知道如何将数据传递给函数。

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Tambah Karyawan</h3>
</div>
<div class="modal-body">
                    <form class="form-horizontal" role="form" id="tambah_karyawan">
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="name">Name:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="name_add" autofocus>
                                <p class="errorTitle text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="content">Role:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="role_add" autofocus>
                                <p class="errorContent text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="content">Email:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="email_add" autofocus>
                                <p class="errorContent text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="content">Password:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="password_add" autofocus>
                                <p class="errorContent text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="content">Foto:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="foto_add" autofocus>
                                <p class="errorContent text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="content">Cabang:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="cabang_add" autofocus>
                                <p class="errorContent text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success add" onclick="document.getElementById('tambah_karyawan').addData()" data-dismiss="modal">
                            <span id="" class='glyphicon glyphicon-check'></span> Add
                        </button>
                        <button type="button" class="btn btn-warning" data-dismiss="modal">
                            <span class='glyphicon glyphicon-remove'></span> Close
                        </button>
                    </div>
                </div>

一旦我可以将值传递给函数，我就可以很好地完成其余的工作。

编辑：这是供参考的解决方案

function addData()
{
    $.ajax({
    type: 'POST',
    url: "{{ url('someajaxurl') }}",
    dataType: "json",
    data: $('#tambah_karyawan').serialize(),
    success: function (data) {
        console.log(data);
    },
    error: function (data) {
            //
        }
  });
}

我学到了什么：我认为您必须将值直接传递给 addData()，例如 addData(value1,value2,value3)，但在这种情况下，您只需调用 addData()，它将传递所有值，然后在 ajax 中捕获它功能。

标签： javascriptjqueryajaxlaravel

Answer 1

您可以将 jquery ajax 方法中的数据传递为

$.ajax({
       type: 'POST',
        url: 'your url',
        data: $('#tambah_karyawan').serialize(),
        success: function () {

    }
});