Skip to content

Instantly share code, notes, and snippets.

@jimgwhit
Last active June 23, 2021 20:02
Show Gist options
  • Save jimgwhit/208ae9427b2623e5366bd4ed3277d1e0 to your computer and use it in GitHub Desktop.
Save jimgwhit/208ae9427b2623e5366bd4ed3277d1e0 to your computer and use it in GitHub Desktop.
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