我正在构建一个web应用程序，该应用程序将在网站上显示各种电影。作为这个项目的一部分，我有一些范围滑块，可以根据你的心情进行移动。如果有人要移动滑块并按下提交，我希望显示一个新的电影列表。
这就是我遇到问题的地方，我可以在页面上显示一定数量的电影，但在移动滑块后单击提交按钮后，无法找到刷新电影的方法。
下方的代码
上传(查看(
<link rel="stylesheet" href="CSS/app.css" type="text/css">
<meta name = "viewport" content="width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com. /lib/w3.css">
<!DOCTYPE html>
<html>
<head>
<title>Moodslider</title>
</head>
<body>
<!-- Sky logo + Sky cinema logo -->
<div class="box">
<td style="text-align:center;color:black;font-size:50px;">
<img src="/images/sky.png" title="Sky" alt="Sky" width="auto" height="125" />
</td>
<td style="text-align: right;position: relative; color:black;font-size:50px;">
<img src="/images/sky_cinema.png" title="sky_cinema" alt="Sky" width="auto" height="125" />
</td>
</div>
<!-- This is the navigation bar for the homepage and the upload content page. -->
<div>
<ul class="w3-navbar w3-black">
<li><a href="/projects/upload">Moodslider Home</a></li>
<li><a href="/projects/create">Upload Content</a></li>
</ul>
</div>
<div class="w3-row-padding">
<div class="w3-panel">
<h1 style="text-align:center;color:black;font-size:50px;">Select a movie based on your mood</h1>
</div>
<form action="/projects/upload" method="post" enctype="multipart/form-data">
{{ @csrf_field() }}
<div class="col-md-12">
<div class="w3-row-padding">
<div class="w3-col m3 w3-center">
<label for="Agitated"><h3>Agitated</h3></label><br><br>
<label for="Happy"><h3>Happy</h3></label><br><br>
<label for="Tired"><h3>Tired</h3></label><br><br>
<label for="Scared"><h3>Scared</h3></label><br><br>
</div>
<div class="w3-col m6 w3-center">
<br>
<form action="/projects/upload" method="post" enctype="multipart/form-data">
{{ @csrf_field() }}
<div></div>
<input type="range" name="mood1" min="0" max="2" value="1" step="1";/><br><br>
<input type=submit value=Submit />
<br>
<br>
<input type="range" name="mood2" min="0" max="2" value="1" step="1" class="slider" id="myRange"><br><br>
<input type="submit" value="Submit">
<br>
<br>
<input type="range" name="mood3" min="0" max="2" value="1" step="1" class="slider" id="myRange"><br><br>
<input type="submit" value="Submit">
<br>
<br>
<input type="range" name="mood4" min="0" max="2" value="1" step="1" class="slider" id="myRange"><br><br>
<input type="submit" value="Submit">
<br>
<br>
</div>
</form>
<div class="w3-col m3 w3-center">
<label for="Calm"><h3>Calm</h3></label><br><br>
<label for="Sad"><h3>Sad</h3></label><br><br>
<label for="WideAwake"><h3>Wide Awake</h3></label><br><br>
<label for="Fearless"><h3>Fearless</h3></label><br><br>
</div>
</div>
</form>
<!-- display the films images -->
<form action="/projects/upload">
<div class="w3-row">
<div type="text" name="lname" class="w3-col w3-container" style="width:20%"><img src=<?$xml=simplexml_load_file("images/database.xml");
echo '../'.$xml->programme[1]->image?> ; alt="" style="width:100%;max-width:150px"></div>
<div class="w3-col w3-container" style="width:20%"><img src=<?$xml=simplexml_load_file("images/database.xml");
echo '../'.$xml->programme[2]->image?> alt="" style="width:100%;max-width:150px"></div>
<div class="w3-col w3-container" style="width:20%"><img src=<?$xml=simplexml_load_file("images/database.xml");
echo '../'.$xml->programme[4]->image?> alt="" style="width:100%;max-width:150px"></div>
<div class="w3-col w3-container" style="width:20%"><img src=<?$xml=simplexml_load_file("images/database.xml");
echo '../'.$xml->programme[6]->image?> alt="" style="width:100%;max-width:150px"></div>
<div class="w3-col w3-container" style="width:20%"><img src=<?$xml=simplexml_load_file("images/database.xml");
echo '../'.$xml->programme[5]->image?> alt="" style="width:100%;max-width:150px"></div><br>
<!-- display the film name and description -->
<? $xml=simplexml_load_file("images/database.xml") or die("Error: Cannot create object");?>
<div class="w3-row"></div>
<div class="w3-row">
<div class="w3-col w3-container" style="width:20%"><h3><?echo $xml->programme[1]->name?></h3></div>
<div class="w3-col w3-container" style="width:20%"><h3><?echo $xml->programme[2]->name?></h3></div>
<div class="w3-col w3-container" style="width:20%"><h3><?echo $xml->programme[4]->name?></h3></div>
<div class="w3-col w3-container" style="width:20%"><h3><?echo $xml->programme[6]->name?></h3></div>
<div class="w3-col w3-container" style="width:20%"><h3><?echo $xml->programme[5]->name?></h3></div>
<div class="w3-row">
<div class="w3-col w3-container" style="width:20%"><p><?echo $xml->programme[1]->description?></p></div>
<div class="w3-col w3-container" style="width:20%"><p><?echo $xml->programme[2]->description?></p></div>
<div class="w3-col w3-container" style="width:20%"><p><?echo $xml->programme[4]->description?></p></div>
<div class="w3-col w3-container" style="width:20%"><p><?echo $xml->programme[6]->description?></p></div>
<div class="w3-col w3-container" style="width:20%"><p><?echo $xml->programme[5]->description?></p></div>
</div>
</form>
<!--
<form action="/projects/upload" method="post" enctype="multipart/form-data">Select image to upload:
{{ @csrf_field() }}
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
-->
</body>
</html>
项目控制器(控制器(
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use OrchestraParserXmlFacade as XmlParser;
interface OutputType
{
public function generate();
}
//project class has been imported
use AppProject;
class ProjectsController extends Controller
{
public function index()
{
//because the class has been imported we can reference it like this rather than 'AppProject::all();'
$projects = Project::all();
//passing the JSON to the view
return view ('projects.index', ['projects'=> $projects]); //can also use 'compact('projects') instead of the ['projects'=> $projects]
}
//new method called create
public function create()
{
return view ('projects.create');
}
//new method called store
public function __construct()
{
$this->xml= new DOMDocument('1.0', 'ISO-8859-15');
}
public function createParent($type)
{
$this->parentElement = $this->xml->createElement($type);
return $this;
}
public function addElement($element, $type)
{
$this->elementGroup = $this->xml->createElement($type, $element);
return $this;
}
public function groupParentAndElements()
{
$this->parentElement->appendChild($this->elementGroup);
return $this;
}
public function generate()
{
$this->xml->appendChild($this->parentElement);
print $xml->saveXML('database.php'); //here I am saving and printing but you can change to suit your needs. It is at this point it is ready to generate the XML
}
public function store()
{
if (isset($_POST['submit'])) {
$xmlType = new XMLType();
$xmlType->createParent('programme')
->addElement('name', $_POST['name'])
->addElement('description', $_POST['description'])
->addElement('mood', $_POST['mood'])
->groupParentAndElements()
->createParent('others')
->addElement('example', 'Form submitted succesfully') //echos response
->groupParentAndElements();
//whenever you wish to output
$xmlType->generate('database.php');
}
return view('projects.upload');
}
//changed this from upload to show
public function upload()
{
return view('projects.upload');
}
//changed this from upload to show
public function show()
{
return view ('projects.upload', compact('user'));
}
public function slider()
{
return view ('projects.upload', compact('user'));
}
}
数据库(XML(
<?xml version="1.0" encoding="UTF-8"?>
<programmeList>
<programme id="1">
<name>School of Rock</name>
<image>images/schoolofrock.jpg</image>
<description>After being kicked out of a rock band, Dewey Finn becomes a substitute teacher </description>
<mood>Agitated</mood>
</programme>
<programme id="2">
<name>Pitch Perfect 2</name>
<image>images/pitchperfect2.jpg</image>
<description>After a humiliating command performance at The Kennedy Center, the Barden Bellas enter an international competition that no American group has ever won in order to regain their status and right to perform. </description>
<mood>Fearless</mood>
</programme>
<programme id="3">
<name>Big</name>
<image>images/big.jpg</image>
<description>When a pre-teen boy wishes to be big at a magic wish machine, he wakes up the next morning and finds himself in an adult body.</description>
<mood>Tired</mood>
</programme>
</programmeList>
您需要POST请求数据(来自用户提交的表单(，并在此基础上显示影片。您需要一些逻辑来确定您在数据库中搜索的心情，并将其设置为您将在项目表中搜索的变量$mood。
在您的控制器中：
public function index(Request $request)
{
// Need logic that checks if there is anything in the request
// If there is nothing in the request, then show all films
// Repeat this for every input slider you have
$mood1 = $request->input('mood1'); // This will return the value of the slider
// You will need some logic which will calculate which mood to search
// your database for, i.e. if $mood1 < 3 && $mood2 > 1 etc.
$mood = /** LOGIC FOR YOUR MOOD **/ ;
$projects = Project::where('mood', $mood);
return view ('projects.index', ['projects'=> $projects]);
}
在您的表格中，您将需要
<form action="/projects/upload" method="POST">
// And importantly, you will need to protect against CSRF when POSTing
{{ csrf_field() }}
您还需要创建一个"POST"路由。
希望这能有所帮助！