在 ajax 中单击图像后，从数据库中检索 html 文件答案

【问题标题】：Retrieve html file from database once image is clicked in ajax在 ajax 中单击图像后，从数据库中检索 html 文件
【发布时间】：2017-02-21 09:55:00
【问题描述】：

我正在使用 laravel 框架，我希望实现一个功能，以便在单击页面上的图像时加载它的源代码并在页面上显示该 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>

【问题讨论】：

“图像...加载它的源代码”？嗯？图片（除非是 SVG）没有“源代码”。
这个问题很模糊。您需要自己进行一些初步研究，然后再进行具体尝试。谁知道呢，也许没有我们你也能成功！
这些都没有任何意义。提供一些 html 结构和更简洁的解释，说明您要对该 html 执行的操作
基本上我有多个 html 文件和每个文件（模板）对应的图像，这两个文件都保存在数据库中。单击图像 1 后，我想显示 html 1，如果单击图像 6，我想显示 html 6。
学习一些ajax教程和javascript事件处理

标签： php jquery mysql ajax laravel

【解决方案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');});
   });
});

【讨论】：

我是否需要包含任何库才能使脚本正常工作，如果我不想被重定向到另一个页面，但是将该源代码插入到同一页面上，比如说
?
RouteCollection.php 第 161 行中的 NotFoundHttpException：这是我得到的，但我想在同一页面上显示它
您显示的网址无效。由您来确保路径正确，并且路线存在满足您的需要
是的，我明白，但是我不想被重定向到另一个页面。我想将该 html 文件注入同一页面而不重新加载。
您不会被重定向。该事件被preventDefault() 取消，除非您没有正确实现脚本或在浏览器控制台中抛出错误