Получить HTML-файл из базы данных, когда изображение щелкнуло в AJAX

-1

Я использую laravel framework, и я ищу, чтобы реализовать функцию, чтобы при щелчке изображения на странице он загружал исходный код и отображал этот html файл на странице. Расположение изображения и расположение файла html находятся в одной таблице базы данных. Я очень новичок в ajax, поэтому кто-нибудь может сказать мне, какую функцию использовать/или дать мне пример, чтобы я мог работать над этим. Спасибо.

Так вот как я хочу, чтобы он пошел:

Нажмите на изображение> Запросить html из базы данных> Показать html в "" на той же странице

Посмотреть::

@extends('layouts.master')

@section('title', 'Best programmer ever')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="{{asset('/js/template.js')}}" rel="javascript" type="text/javascript">
@section('content')
@endsection
        @section('template')

        <div class= "template_class">
          <a class="content-link" href="templates/template1.html"> 
        <img id = "image" src="{{ asset($template->image )}}"/>
  </a>
</div>
        @show

JS:

$(function(){
   $('.content-link').click(function(e){
       e.preventDefault();
       $('.content').load(this.href)
                    .fail(function()( alert('Oops...something went wrong')));
   });
});

Таблица БД ::

Schema::create('templates', function (Blueprint $table) {
    $table->increments('id');
    $table->string('image');
    $table->string('file');
    $table->timestamps();
});

Вход в БД ::

DB::table('templates')->insert(['image' => 'img/1.jpg', 'file' => 'templates/template1.html']);

Пример шаблона, который должен отображаться в div ::

<!DOCTYPE html>

<html>
<head>
    <title>Template 1</title>
  <link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="content">Insert your content here</div>


</body>
</html>
  • 0
    "изображение ... загружает его исходный код"? А? изображения (если они не SVG) не имеют «исходного кода».
  • 0
    Этот вопрос настолько неопределенный, насколько это возможно. Вы должны сделать некоторые начальные исследования самостоятельно, а затем вернуться с конкретной попыткой. Кто знает, может быть, вы получите это без нас!
Показать ещё 4 комментария
Теги:

1 ответ

1
Лучший ответ

Оберните изображение в <a> и используйте href для запроса правильного html

<div class = "template_class">
  <a class="content-link" href="/path/to/get/html/{{ asset($template->id )}}"> 
        <img id = "image" src="{{ asset($template->image )}}"/>
  </a>
</div>

Затем в скрипте

$(function(){
   $('.content-link').click(function(e){
       e.preventDefault();
       $('.content').load(this.href)
                    .fail(function(){ alert('Oops...something went wrong');});
   });
});
Поделиться
  • 0
    Нужно ли включать какую-либо библиотеку для работы скрипта и что, если я не хочу, чтобы меня перенаправляли на другую страницу, однако вставьте этот исходный код на ту же страницу, скажем, в <div class = "page">?
  • 0
    да .. включите jquery.js
Показать ещё 29 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню