通过php查询链接到弹出视图

时间:2015-03-19 10:11:35

标签: javascript php html

您好我的index.php页面中有一个搜索功能。当用户输入字段并输入“搜索”字样时它转到jobsearch.php并从mysqli数据库打印出作业摘要。

我已经在结果的末尾创建了链接。 因此,当用户看到作业摘要时,用户点击链接(单击此处),然后它会将用户定向到弹出视图,该视图显示有关作业的更多信息(作业_说明)。是否有这样做的方式?我不想为每个作业创建一个 html页面,因为数据库中可能有100个作业。

我希望点击此处链接获取所需作业的ID,并在弹出页面上打印出作业说明。

看起来像这样:

enter image description here

这是jobs.php,它打印出一份工作清单..

<?php
$servername = "*****";
$username = "root";
$password = "*****";
$dbname = "jobslist";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
     die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, job_title, job_description, job_location, job_category  FROM jobs_list";
$result = $conn->query($sql);

//display table
echo "<table border='1'>
<!--<tr>
<th>ID</th>
<th>Title</th>
<th>Description</th>
<th>Location</th>
<th>Category</th>
</tr>-->";

if ($result->num_rows > 0) {
     // output data of each row

     while($row = $result->fetch_assoc()) {

 echo "<tr>";
       echo "<td min-height:'200' ><h2>". $row["id"] ."</h2></td>";
       echo "<td>". $row["job_title"] . "</td>";
       echo "<td min-width:'700' >". $row["job_description"] . "</td> " ;
       echo "<td>". $row["job_location"] . "</td>";
       echo "<td>". $row["job_category"] . "</td> " ;

//this prints out a clickable link for every job

echo "<td><a href='" . $row['id'] .  "'>Click Here</a></td>";



       echo "</tr>";
    }

}
 else {
     echo "0 results";
}

echo "</table>";
$conn->close();
?>

5 个答案:

答案 0 :(得分:3)

您无需为每个作业生成页面。您可以生成一个获取作业ID作为GET参数的php(getJob.php?id = 5),从该数据库中获取该ID并将数据作为HTML页面返回。

答案 1 :(得分:3)

更改

//this prints out a clickable link for every job

echo "<td><a href='" . $row['id'] .  "'>Click Here</a></td>";

echo "<td><a target='jobdescriptionwindow' href='jobdescription.php?id=" . $row['id'] .  "'>Click Here</a></td>";

当您点击将点击的作业ID传递给jobdescription.php的链接时,这将打开一个新窗口(称为“jobdescriptionwindow”)。您还必须确保浏览器没有停止打开此窗口。

创建一个名为jobdescription.php的新PHP文档,其中包含以下内容:

<?php

if (isset($_GET['id'])) { // Check ID is is present in parameters

    $servername = "*****"; // <-- Enter your details
    $username = "root";
    $password = "*****"; // <-- Enter your details
    $dbname = "jobslist";

    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);

    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    // I do: (int)$_GET['id'] to type cast the value of $_GET['id'] to protect against injection. http://php.net/manual/en/language.types.type-juggling.php

    $sql = "SELECT id, job_title, job_description, job_location, job_category FROM jobs_list WHERE id = ".(int)$_GET['id'];

    $result = $conn->query($sql); // <-- Added new line
    $row = $result->fetch_assoc();


    echo $row['job_title'] . '<br />';
    echo $row['job_description']; //<-- Does now show your description?

    var_dump($result); // Lay out this data as required
    // Outputs object(mysqli_result)#2 (5) { ["current_field"]=> int(0) ["field_count"]=> int(5) ["lengths"]=> array(5) { [0]=> int(1) [1]=> int(23) [2]=> int(102) [3]=> int(4) [4]=> int(2) } ["num_rows"]=> int(1) ["type"]=> int(0) } 



} else {

  echo "No ID provided";

}

这将获取GET参数中发送的作业ID的详细信息。

答案 2 :(得分:1)

除了asalex的代码,您还可以使用fancybox通过ajax而不是新窗口加载弹出窗口中的内容。 看这个页面: http://fancyapps.com/fancybox/

专门看一下ajax的例子。 搜索&#39; ajax&#39;在这个页面上。这正是你所需要的。

答案 3 :(得分:0)

jobs.php href - &gt;

echo "<td><a href='something.php?id=".$row['id']. "'>Click Here</a></td>";

Something.php:

if(isset($GET_['id'])){
  $getid = $_GET['id'];

  $sql = "SELECT job_title, job_description, job_location, job_category  FROM jobs_list WHERE id = '".$getid."'";

  $result = $conn->query(sql);

  while($row = $result->fetch_assoc()){

     echo $row['job_title'].'<br />';
     echo $row['job_description'].'<br />;
     echo $row['job_location'].'<br />;
     echo $row['job_category'];
  }
}

但是这段代码可以通过SQL注入攻击!你需要转义$ _GET参数,或者你需要学习/使用PDO。

答案 4 :(得分:0)

包含jQuery,Bootstrap和显示模态弹出窗口的信息。模式窗口将在作业标题链接上单击。

 <?php
    $servername = "*****";
    $username = "root";
    $password = "*****";
    $dbname = "jobslist";

    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
         die("Connection failed: " . $conn->connect_error);
    }
    $sql = "SELECT id, job_title, job_description, job_location, job_category  FROM jobs_list";
    $result = $conn->query($sql);
    $tbdata = "";
    $modals = "";
    if ($result->num_rows > 0) {
    // display table if results exist
    echo "<table class=\"table table-striped\"><tr><th>Job Title</th><th>Location</th><th>Category</th></tr>";

     while($row = $result->fetch_assoc()) {
     $tbdata.="<tr><td><a href=\"#\" data-toggle=\"modal\" data-target=\"#jbinfo_". $row["id"] . "\">". $row["job_title"] . "</a></td><td>". $row["job_location"] . "</td><td>". $row["job_category"] . "</td></tr>";
     $modals.="<div class=\"modal fade\" id=\"#jbinfo_". $row["id"] . "\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"jbLabel". $row["id"] . "\" aria-hidden=\"true\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><h4 class=\"modal-title\" id=\"jbLabel". $row["id"] . "\">". $row["job_title"] . "</h4></div><div class=\"modal-body\">". $row["job_description"] . "</div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button></div></div></div></div>";
     }
    echo $tbdata;
    echo "</table>";
    echo $modals;
    } else {
         echo "No results";
    }

    $conn->close();
    ?>  

在结束身体标记之前,请输入以下内容:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>