Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fetch simple example

Just test data and uptating one field using put:

    document.getElementById('submitBtn').addEventListener('click', submitPost);
    function submitPost(e) {
        e.preventDefault();
        const data = {petid: document.getElementById('petid').value,
            species: document.getElementById('species').value,
            _token: document.getElementsByName("_token")[0].value,
            _method: document.getElementsByName("_method")[0].value};
        fetch('http://localhost/laravel70/pet/petupdate', {
            method: 'PUT', // or 'POST'
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data),
        })
                .then(function (response) {
                    if (response.status === 200) {
                        response.json().then(function (data) {
                            //console.log(data.type, data.message)
                            var div = document.getElementById('msg');
                            for (var key in data) {
                                div.innerHTML += data[key];
                            }
                        })
                    }
                    if (response.status === 422) {
                        response.json().then(function (data) {
                            //console.log(data.type, data.message)
                            var div = document.getElementById('msg');
                            for (var key in data) {
                                div.innerHTML += data[key];
                            }
                        })
                    }
                    if (response.status === 403 || response.status === 500) {
                        response.json().then(function (data) {
                            var div = document.getElementById('msg');
                            div.innerHTML += "Not Authorized";

                        })
                    }

                })

                .catch((error) => {
                    console.error('Error:', error);
                    document.getElementById('msg').innerHTML = "An error occured";
                });
    }

Controller

        public function petUpdate(Request $request) {

        // Authorize however you deal with it

        $validator = \Illuminate\Support\Facades\Validator::make($request->all(), [
                    'species' => 'required',
        ]);

        if ($validator->fails()) {
            return response()->json($validator->errors(), 422);
        }

        $petid = $request->input('petid');
        $species = $request->input('species');
        $postdata = [
            'species' => $species
        ];
        DB::table('dc_pets')
                ->where('petid', $petid)
                ->update($postdata);
        return Response::json(['success' => 'all okay']);
        
    }

In the response status if statements, I put the errors, or success message as needed.

You can setup a token header just like jquery or other ajax, but the above works also.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment