为什么我的Ajax无法将数据保存到数据库？ Laravel和Ajax

Question

我正在尝试使用ajax保存数据。 Ajax在我的JavaScript文件中，并传递给我的控制器和路由。但是问题是它无法将数据保存到我的数据库中。

这是我的包含ajax的jquery.hotspot.js文件：

(function ($) {

    var defaults = {

        // Object to hold the hotspot data points
        data: [],

        // Element tag upon which hotspot is (to be) build
        tag: 'img',

        // Specify mode in which the plugin is to be used
        // `admin`: Allows to create hotspot from UI
        // `display`: Display hotspots from `data` object
        mode: 'display',

        // HTML5 LocalStorage variable where hotspot data points are (will be) stored
        LS_Variable: '__HotspotPlugin_LocalStorage',

        // CSS class for hotspot data points
        hotspotClass: 'HotspotPlugin_Hotspot',

        // CSS class which is added when hotspot is to hidden
        hiddenClass: 'HotspotPlugin_Hotspot_Hidden',

        // Event on which the hotspot data point will show up
        // allowed values: `click`, `hover`, `none`
        interactivity: 'hover',

        // Action button CSS classes used in `admin` mode
        save_Button_Class: 'HotspotPlugin_Save',
        remove_Button_Class: 'HotspotPlugin_Remove',
        send_Button_Class: 'HotspotPlugin_Send',

        // CSS class for hotspot data points that are yet to be saved
        unsavedHotspotClass: 'HotspotPlugin_Hotspot_Unsaved',

        // CSS class for overlay used in `admin` mode
        hotspotOverlayClass: 'HotspotPlugin_Overlay',

        // Enable `ajax` to read data directly from server
        ajax: false,
        ajaxOptions: { url: '' },

        listenOnResize: true,

        // Hotspot schema
        schema: [
            {
                'property': 'Title',
                'default': ''
            },
            {
                'property': 'Message',
                'default': ''
            }
        ]
    };

    // Constructor
    function Hotspot(element, options) {

        var widget = this;

        // Overwriting defaults with options
        this.config = $.extend(true, {}, defaults, options);

        this.element = element;

        // `tagElement`: element for which hotspots are being done
        this.tagElement = element.find(this.config.tag);

        // Register event listeners
        $.each(this.config, function (index, fn) {
            if (typeof fn === 'function') {
                widget.element.on(index + '.hotspot', function (event, err, data) {
                    fn(err, data);
                });
            }
        });

        if (this.config.mode != 'admin' && this.config.listenOnResize) {
            $(window).on('resize', function () {
                $(element).find('.' + widget.config.hotspotClass).remove();
                widget.init();
            });
        }

        if (this.config.tag !== 'img') {
            widget.init();
            return;
        }

        if (this.tagElement.prop('complete')) {
            widget.init();
        } else {
            this.tagElement.one('load', function (event) {
                widget.init();
            });
        }
    }

    Hotspot.prototype.init = function () {
        this.parseData();

        // Fetch data for `display` mode with `ajax` enabled
        if (this.config.mode != 'admin' && this.config.ajax) {
            this.fetchData();
        }

        // Nothing else to do here for `display` mode
        if (this.config.mode != 'admin') {
            return;
        }

        this.setupWorkspace();
    };

    Hotspot.prototype.createId = function () {
        var id = "";
        var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

        for (var i = 0; i < 7; i++) {
            id += letters.charAt(Math.floor(Math.random() * letters.length));
        }

        return id;
    };

    Hotspot.prototype.setupWorkspace = function () {
        var widget = this;

        // `data` array: to contain hotspot objects
        var data = [];

        var tHeight = $(widget.tagElement[0]).height(),
            tWidth = $(widget.tagElement[0]).width(),
            tOffset = widget.tagElement.offset(),
            pHeight = $(widget.element[0]).height(),
            pWidth = $(widget.element[0]).width(),
            pOffset = widget.element.offset();

        // Create overlay for the tagElement
        $('<span/>', {
            html: '<p>Click this Panel to Store Messages</p>'
        }).css({
            'height': (tHeight / pHeight) * 100 + '%',
            'width': (tWidth / pWidth) * 100 + '%',
            'left': (tOffset.left - pOffset.left) + 'px',
            'top': (tOffset.top - pOffset.top) + 'px'
        }).addClass(widget.config.hotspotOverlayClass).appendTo(widget.element);

        // Handle click on overlay mask
        this.element.delegate('span', 'click', function (event) {
            event.preventDefault();
            event.stopPropagation();

            // Get coordinates
            var offset = $(this).offset(),
                relativeX = (event.pageX - offset.left),
                relativeY = (event.pageY - offset.top);

            var height = $(widget.tagElement[0]).height(),
                width = $(widget.tagElement[0]).width();

            var hotspot = { x: relativeX / width * 100, y: relativeY / height * 100 };

            var schema = widget.config.schema;

            for (var i = 0; i < schema.length; i++) {
                var val = schema[i];
                var fill = prompt('Please enter ' + val.property, val.default);
                if (fill === null) {
                    return;
                }
                hotspot[val.property] = fill;
            }

            data.push(hotspot);

            // Temporarily display the spot
            widget.displaySpot(hotspot, true);
        });

        // Register admin controls
        var button_id = this.createId();

        $('<button/>', {
            text: "Save data"
        }).prop('id', ('save' + button_id)).addClass(this.config.save_Button_Class).appendTo(this.element);

        $('<button/>', {
            text: "Remove data"
        }).prop('id', ('remove' + button_id)).addClass(this.config.remove_Button_Class).appendTo(this.element);

        $(this.element).delegate('button#' + ('save' + button_id), 'click', function (event) {
            event.preventDefault();
            event.stopPropagation();
            widget.saveData(data);
            data = [];
        });

        $(this.element).delegate('button#' + ('remove' + button_id), 'click', function (event) {
            event.preventDefault();
            event.stopPropagation();
            widget.removeData();
        });

        if (this.config.ajax) {
            $('<button/>', {
                text: "Send to server"
            }).prop('id', ('send' + button_id)).addClass(this.config.send_Button_Class).appendTo(this.element);

            $(this.element).delegate('button#' + ('send' + button_id), 'click', function (event) {
                event.preventDefault();
                event.stopPropagation();
                widget.sendData();
            });
        }
    };

    Hotspot.prototype.fetchData = function () {
        var widget = this;

        // Fetch data from a server
        var options = {
            data: {
                HotspotPlugin_mode: "Retrieve"
            }
        };

        $.ajax($.extend({}, this.config.ajaxOptions, options))
            .done(function (data) {
                // Storing in localStorage
                localStorage.setItem(widget.config.LS_Variable, data);
                widget.parseData();                   
            })
            .fail($.noop);                
    };

    Hotspot.prototype.parseData = function () {
        var widget = this;

        var data = this.config.data,
            data_from_storage = localStorage.getItem(this.config.LS_Variable);

        if (data_from_storage && (this.config.mode === 'admin' || !this.config.data.length)) {
            data = JSON.parse(data_from_storage);
        }

        $.each(data, function (index, hotspot) {
        widget.displaySpot(hotspot);

        });
        
    };

    Hotspot.prototype.displaySpot = function (hotspot, unsaved) {
        var widget = this;

        var spot_html = $('<div/>');

        $.each(hotspot, function (index, val) {
            if (typeof val === "string") {
                $('<div/>', {
                    html: val
                }).addClass('Hotspot_' + index).appendTo(spot_html);
            }
        
        });

        var height = $(this.tagElement[0]).height(),
            width = $(this.tagElement[0]).width(),
            offset = this.tagElement.offset(),
            parent_offset = this.element.offset();

        var spot = $('<div/>', {
            html: spot_html
        }).css({
            'top': (hotspot.y * height / 100) + (offset.top - parent_offset.top) + 'px',
            'left': (hotspot.x * width / 100) + (offset.left - parent_offset.left) + 'px'
        }).addClass(this.config.hotspotClass).appendTo(this.element);

        if (unsaved) {
            spot.addClass(this.config.unsavedHotspotClass);
        }

        if (this.config.interactivity === 'hover') {
            return;
        }

        // Overwrite CSS rule for `none` & `click` interactivity
        spot_html.css('display', 'block');

        // Initially keep hidden
        if (this.config.interactivity !== 'none') {
            spot_html.addClass(this.config.hiddenClass);
        }

        if (this.config.interactivity === 'click') {
            spot.on('click', function (event) {
                spot_html.toggleClass(widget.config.hiddenClass);
            });
        } else {
            spot_html.removeClass(this.config.hiddenClass);
        }
    };

    Hotspot.prototype.saveData = function (data) {
        if (!data.length) {
            return;
        }

        // Get previous data
        var raw_data = localStorage.getItem(this.config.LS_Variable);

        var hotspots = [];

        if (raw_data) {
            hotspots = JSON.parse(raw_data);
        }

        // Append to previous data
        $.each(data, function (index, node) {
            hotspots.push(node);
        });

        this.data=data;
        $.ajax({
            type:"POST",
            url:"/store",
            dataType:'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data:{
                Title:$('#Title').val(),
                Message: $('#Message').val(),
                x:$('#relativeX').val(),
                y: $('#relativeY').val(),
            },
            success: function(data){
                console.log(data,d);
            },
            error: function(data)
            {
                console.log(data);
            },
           
        });
        

        localStorage.setItem(this.config.LS_Variable, JSON.stringify(hotspots));

        this.element.trigger('afterSave.hotspot', [null, hotspots]);
    };

    Hotspot.prototype.removeData = function () {
        if (localStorage.getItem(this.config.LS_Variable) === null) {
            return;
        }
        if (!confirm("Are you sure you wanna do everything?")) {
            return;
        }
        localStorage.removeItem(this.config.LS_Variable);
        this.element.trigger('afterRemove.hotspot', [null, 'Removed']);
    };

    Hotspot.prototype.sendData = function () {
        if (localStorage.getItem(this.config.LS_Variable) === null || !this.config.ajax) {
            return;
        }

        var widget = this;

        var options = {
            data: {
                HotspotPlugin_data: localStorage.getItem(this.config.LS_Variable),
                HotspotPlugin_mode: "Store"
            }
        };

        $.ajax($.extend({}, this.config.ajaxOptions, options))
            .done(function () {
                widget.element.trigger('afterSend.hotspot', [null, 'Sent']);
            })
            .fail(function (err) {
                widget.element.trigger('afterSend.hotspot', [err]);
            });
    };

    $.fn.hotspot = function (options) {
        new Hotspot(this, options);
        return this;
    };

}(jQuery));

这是我的路线：

Route::get('hotspots','ImageController@getPin');
Route::post('store','ImageController@storePin')->name('store.storePin');

这是我的ImageController.php：

 public function getPin()
{
    $pin= Pin::select('Title','Message','x','y');
    return hotspot::of($pin)->make(true);
}
public function storePin(Request $request)
{

    $validation = Validator::make($request->all(), [
        'Title' => 'required',
        'Message'  => 'required',
        'x'=>'required',
        'y'=>'required',
     ]);

         if ($request->get('save','button_id') == "insert")
         {
             $pin = new Pin();
             $pin->Title=$request->Title;
             $pin->Message= $request->Message;
             $pin->x = $request->relativeX;
             $pin->y =$request->relativeY;

             $pin->save();
             //return Request::json($request);               
         }
}

这是我的hotspot.blade.php：

<!DOCTYPE html>
<html>
<head>
	<title>Picomment Hotspot</title>
	<link rel="stylesheet" type="text/css" href="{{ asset ('css/bootsrap.min.css') }}">
	<script type="text/javascript" src="{{ asset ('js/jquery.min.js') }}"></script>
	<link rel="stylesheet" type="text/css" href="{{ asset ('css/jquery.hotspot.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ asset ('css/style.css') }}">
	<meta name="csrf-token" content="{{ csrf_token() }}">
	
</head>
<body>

<div class="container">
	<div class="col-md-6" style="margin-top: 40px;">
		<div id="theElement-a">
			<img src="{{ asset('storage/'.$files) }}" alt="" title=""> 
		</div>
	</div>
</div>

<script type="text/javascript" src="{{ asset ('js/jquery.hotspot.js') }}"></script>

<script type="text/javascript">

	$(document).ready(function() {
		$("#theElement-a").hotspot({
			mode: "admin",
			// uncomment
			/*ajax: true,
			ajaxOptions: {
				'url': 'links.to.server'
			},*/
			interactivity: "click",
			LS_Variable: "HotspotPlugin-a",

			afterSave: function(err, data) {
				if (err) {
					console.log('Error occurred', err);
					return;
				}
				
				alert('Saved');
				// `data` in json format can be stored
				//  & passed in `display` mode for the image
			
                localStorage.clear();
				console.log(data);
			},
			afterRemove: function(err, message) {
				if (err) {
					console.log('Error occurred', err);
					return;
				}
				alert(message);
				window.location.reload();
			},
			afterSend: function(err, message) {
				if (err) {
					console.log('Error occurred', err);
					return;
				}
				alert(message);
			}
		});
	});
</script>

</body>
</html>

Answer 1

如果您使用的是外部js，则我们无法直接从外部js访问路由。

在按钮html中传递此内容

data-url =“ {{路由名称}}”]

希望它能正常工作