时间戳

首页 > 解决方案 > 单击刷新按钮时，chrome显示ajax响应

javascript - 单击刷新按钮时，chrome显示ajax响应

问题描述

我是 Laravel 开发人员并正在构建一个应用程序。我正在使用以下技术

我面临一个问题，当我使用 jquery ajax 请求提交表单时，它成功提交并返回响应，但是当我在提交表单后刷新同一页面而不是刷新页面时，它会在屏幕上显示来自最后一个 ajax 请求的响应. 请注意，我用于获取和发布请求的路线是相同的，但我在以前的项目中已经这样做了，并且在那里工作正常。我在下面发布代码，请指导我


@extends('adminlte::page')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header bg-secondary">{{ __('Consultants') }}</div>

                <div class="card-body bg-light">
                   <div class="row">
                        <div class="col-sm-3">
                            <button class="btn btn-secondary" type="button" id="addbtn">Add Consultant</button>
                            <a href="{{url('consultant')}}">test</a>
                        </div>
                   </div>
                   
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="consultantModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg " role="document">
        <div class="modal-content">
            <div class="modal-header bg-secondary">
                <h5 class="modal-title" id="consultantModalCenterTitle">Modal title</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body bg-light">
                <form id="cnsltform">
                    <input type="hidden" id="cnslt_id" name="cnslt_id">
                    <div class="form-group row">
                        <label for="name" class="col-sm-3 col-form-label">Consultant Name</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="name" name="name" placeholder="Consultant Name">
                            <div class="invalid-feedback name">

                            </div>
                        </div>



                    </div>
                    <div class="form-group row">
                        <label for="speciality" class="col-sm-3 col-form-label">Speciality</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="speciality" name="speciality" placeholder="Speciality">
                            <div class="invalid-feedback speciality">

                            </div>
                        </div>

                    </div>



                    <div class="form-group row">
                        <label for="fees" class="col-sm-3 col-form-label">Fees</label>
                        <div class="col-sm-9">
                            <input type="number" class="form-control" id="fees" name="fees" placeholder="Fees">
                            <div class="invalid-feedback fees">

                            </div>
                        </div>

                    </div>





            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" id="savecnslt">Save</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                

            </div>
            </form>
        </div>
    </div>
</div>


@endsection

@section('js')
   
    <script>
        $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });


        $('#cnsltform').submit(function(e) {
            e.preventDefault();
            $('#savecnslt').hide();
            var fd = $(this).serialize();
            // var totdata = totdata + '&items' + encodeURIComponent(JSON.stringify(tbldata));
            $.ajax({
                
                dataType: "json",
                data: fd,
                url: "{{ route('consultant.store')}}",
                cache: false,
                // processData: false,
                // contentType: false,
                type: 'POST',
                
                success: function(data) {
                    $('#savecnslt').show();
                    console.log(data);
                    // Swal.fire({
                    //     icon: 'success',
                    //     text: 'categories added successfully',
                    //     onAfterClose: () => {
                    //         window.close();
                    //     }
                    // });
                },
                // error: function(data) {
                //     var subdata = JSON.parse(data.responseText);
                //     jQuery.each(subdata.errors, function(key, value) {
                //         $(`#${key}`).addClass('is-invalid');
                //         $(`.invalid-feedback.${key}`).text(value);
                //         $(`.invalid-feedback.${key}`).show();
                        
                //     });

                //     return;
                // }
            })



        });
    });

        $('#addbtn').click( function () {

            $('#consultantModal .modal-title').text('Add Consultant');
            
            $('#consultantModal').modal('show');
            $('#consultantModal').on('shown.bs.modal', function () {
                $('#name').trigger('focus');
            });
        });
    </script>
@endsection


<?php

namespace App\Http\Controllers;

use App\Models\Consultant;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;

class ConsultantController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {   
        return view('consultants');
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        info('ok');
        
        $rules = [
            'name' => 'required',
            'speciality' => 'required',
            'fees' => 'required',
        ];

        $messages = [
            'name.required' => 'Consultant Name must be entered',
            'speciality.required' => 'Consultant Speciality must be entered',
            'fees.required' => 'Consultant Fees must be entered',
            
        ];
       
        Validator::make($request->all(), $rules, $messages)->validate();

        return response()->header('Vary', 'Content-Type' )->json('ok');
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Models\Consultant  $consultant
     * @return \Illuminate\Http\Response
     */
    public function show(Consultant $consultant)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Models\Consultant  $consultant
     * @return \Illuminate\Http\Response
     */
    public function edit(Consultant $consultant)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Consultant  $consultant
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Consultant $consultant)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Consultant  $consultant
     * @return \Illuminate\Http\Response
     */
    public function destroy(Consultant $consultant)
    {
        //
    }
}



<?php

use Illuminate\Support\Facades\Artisan;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('/cache', function() {
    $exitCode = Artisan::call('optimize:clear');
    return 'All Cache cleared';
});

Auth::routes();
// Auth::routes(['verify' => true, 'register' => false]);

Route::middleware('auth')->group(function () {
    Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
    Route::resource('/pt-admissions', App\Http\Controllers\PtAdmissionController::class);
    Route::resource('consultant', App\Http\Controllers\ConsultantController::class);

    
});

响应显示为

注意：get 和 post 的路线是相同的，唯一的区别是一个是 get，另一个是 post，通过更改 get 路线我的问题可以解决，但我想保持路线相同

标签： javascriptphpjqueryajaxlaravel

解决方案

推荐阅读