如何提交表格而不刷新？

Question

单击结束按钮以将表单提交到数据库后，我试图删除刷新时间。

关于jquery，我还没有那么丰富的经验，目前我仅依靠视频教程和论坛，但我的学习曲线很靠前。 如您所见，当我单击开始按钮时，我已经将开始按钮转换为jquery以删除刷新时间。

 <tbody class="table table-bordered table-striped">
                    @foreach($user as $task)
                    <tr class="form-group">
                        {{-- <form action="{{ route('amber.timestone.home.start') }}" method="POST" class="align-center"> --}}
                            {{csrf_field()}}
                            <td class="d-flex">
                            <input type="hidden" name="id" id="hidden-id_{{$task->id}}" value="{{ $task->id }}">
                                    <button type="button" id="str-btn" data-id="{{$task->id}}" class="btn btn-primary"
                                        @if(!empty($task->start))
                                            disabled
                                            @elseif(!empty($task->duration))
                                        readonly
                                        @endif
                                    >Start</button>
                                    {{-- <span class="btn btn-primary" onclick="myAlert({{$task->id}})">Test</span> --}}
                            </td>
                            {{-- </form> --}}
                            <form action="{{ route('amber.timestone.home.end', $task->id) }}" method="POST">
                                {{csrf_field()}}

                                <td> 
                                    <input class="my-2" type="text" id="ref_{{$task->id}}" name="ref" value="{{ $task->ref }}"
                                        @if(empty($task->start))
                                            readonly
                                        @elseif(!empty($task->duration))
                                            readonly
                                        @endif
                                        > 
                                        {{-- <input class="my-2" type="hidden" name="ref" value="{{ $task->ref }}"> --}}
                                    </td>
                                    <td>    
                                        <textarea name="remarks" id="remarks_{{$task->id}}" cols="30" rows="4"
                                        @if(empty($task->start))
                                        readonly
                                        @elseif(!empty($task->duration))
                                        readonly
                                    @endif
                                        >{{ $task->remarks }}</textarea>  
                                    </td>
                                    <td>
                                        <select id="campaign_{{$task->id}}" class="custom-select custom-select-lg mb-3" name="campaign" 
                                        @if(empty($task->start))
                                        disabled
                                        @elseif(!empty($task->duration))
                                        disabled
                                    @endif
                                        >        
                                            <option @if($task->campaign == 'cert') selected @endif value="cert">Cert Focus</option>
                                            <option @if($task->campaign == 'omni') selected @endif value="omni">Omni</option>
                                            <option @if($task->campaign == 'textblast') selected @endif value="textblast">TextBlast</option>
                                        </select> 
                                    </td>
                                    <td>
                                        <select id="type_{{$task->id}}" class="custom-select custom-select-lg mb-3" name="type" 
                                        @if(empty($task->start))
                                        disabled
                                        @elseif(!empty($task->duration))
                                        disabled
                                    @endif
                                        >   
                                            <option @if($task->type == 'cert') selected @endif value="cert">Cert</option> 
                                            <option @if($task->type == 'email') selected @endif value="email">Email Support</option>    
                                            <option @if($task->type == 'chat') selected @endif value="chat">Chat Support</option>
                                        </select>
                                    </td>
                                    <td>
                                        <p id="startTime"></p>
                                        {{ $task->start }}

                                    </td>
                                    <td>
                                        {{ $task->end }}
                                    </td>
                                    <td>
                                        {{ $task->duration }}                             
                                    </td>
                                    <td class="d-flex">

                                <input type="hidden" name="id" value="{{ $task->id }}">
                                <button type="submit" id="end-btn_{{$task->id}}" class="btn btn-danger float-right ml-3"
                                @if(!empty($task->end))
                                    disabled
                                @elseif(empty($task->start))
                                    disabled
                                @endif
                                >End</button>
                            </form>

                        </td>

                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

@endsection
@section('reporter')
<script>
        $(document).ready(function() {

        $('#report').DataTable( {
            "bLengthChange": false,
            "lengthMenu": [ 3, 10 ],
            searching: false
        });

        $('#str-btn').click(function(e){
            var id = $(this).data('id');
            $.ajax({
            url: "{{ url('amber/timestone/start') }}"+'/'+id,
            type: "GET",

            success: function(data){
                console.log(data)
                $("#startTime").text(data.start)
                $("#end-btn_"+id).removeAttr("disabled");
                $("#ref_"+id).removeAttr("readonly");
                $("#remarks_"+id).removeAttr("readonly");
                $("#campaign_"+id).removeAttr("disabled");
                $("#type_"+id).removeAttr("disabled");
                $("#str-btn").Attr("disabled");

            }
        })
          $(this).prop("disabled", true);


        });




    });

Answer 1

您可以获取表单并在提交时添加侦听器，然后可以调用event.preventDefault()以避免刷新。

将是这样的：

<form action="{{ route('amber.timestone.home.start') }}" method="POST" class=" form-data-table align-center"> 

...

Javascript部分：

$('.form-data-table').on('submit', function(event){
    event.preventDefault();
   ... remaining code
})