我正在使用PDO在PHP中创建一个职位门户。这个项目中有一个职位搜索模块,其中有三个字段用于搜索职位。这些是:
我的问题是,当我在任何字段中给出值时,结果数据不会附加在html页面中的表格中。 这是页面:
jobs.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Just Job</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/job.css">
</head>
<body>
<div id="wrapper">
<!--nav-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#job-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Just Job</a>
</div>
<div class="collapse navbar-collapse" id="job-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="index.html">Home</a></li>
<li><a class="nav-link" href="jobs.html">Job Search</a></li>
<li class="dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
Recruiter Zone<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Register as Recruiter</a></li>
<li><a href="recruiters.html">All Recruiters</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center">
<form class="form-inline">
<div class="form-group">
<input type="text" id = "keyskills" class="form-control" placeholder="Skills">
</div>
<div class="form-group">
<input type="text" id="location" class="form-control" placeholder="Location">
</div>
<div class="form-group">
<input type="text" id="experience" class="form-control" placeholder="Experience">
</div>
<div class="form-group">
<a href=""><button id="searchBtn" class="btn btn-primary">Submit</button></a>
</div>
</form>
<br><br>
</div>
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">Search Results</h4>
</div>
<div class="panel-body">
<div class="responsive-table">
<table id="jobSearchTable" class="table table-bordered">
<thead>
<th>Id</th>
<th>Job Title</th>
<th>Key Skills</th>
<th>Experience</th>
<th>Salary</th>
<th>Role</th>
<th>Location</th>
<th>Contact Details</th>
<th>Job Description</th>
<th>Company</th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>Copyright © 2015 <a href="http://zorrofoxtech.com/">zorrofox technologies pvt. ltd.</a></p>
</footer>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/job-search.js"></script>
</body>
</html>
现在,有一个JS文件将上述三个字段的数据发送到php文件,并通过ajax的success:function(data)
获取数据。
这是JS文件:
作业-search.js
$(document).ready(function() {
$("#searchBtn").on('click', function(){
var keyskills = $("#keyskills").val();
var location = $("#location").val();
var experience = $("#experience").val();
$.ajax({
url: 'php/job-search.php',
type: 'POST',
data: {'keyskills':keyskills, 'location':location, 'experience':experience},
success:function(data)
{
var result = $.parseJSON(data);
$.each(result, function(key, value) {
$.each(value, function(k, v) {
if(k === "id"){
$("#jobSearchTable >tbody:last").append(
$('<tr>').append(
$('<td>').append(v)
.append(
$('</td>').append(
$('</tr>')
)
)
)
);
}
if(k === "job_title"){
$("#jobSearchTable >tbody >tr:last").append(
$('<td>').append(v)
.append(
$('</td>')
)
);
}
if(k == "keyskills"){
$("#jobSearchTable >tbody >tr:last").append(
$('<td>').append(v)
.append(
$('</td>').append(
$('</tr>')
)
)
);
}
if(k == "required_experience"){
$("#jobSearchTable >tbody >tr:last").append(
$('<td>').append(v)
.append(
$('</td>').append(
$('</tr>')
)
)
);
}
if(k == "salary"){
$("#jobSearchTable >tbody >tr:last").append(
$('<td>').append(v)
.append(
$('</td>').append(
$('</tr>')
)
)
);
}
if(k == "role"){
$("#jobSearchTable >tbody >tr:last").append(
$('<td>').append(v)
.append(
$('</td>').append(
$('</tr>')
)
)
);
}
if(k == "location"){
$("#jobSearchTable >tbody >tr:last").append(
$('<td>').append(v)
.append(
$('</td>').append(
$('</tr>')
)
)
);
}
if(k == "contact_details"){
$("#jobSearchTable >tbody >tr:last").append(
$('<td>').append(v)
.append(
$('</td>').append(
$('</tr>')
)
)
);
}
if(k == "description"){
$("#jobSearchTable >tbody >tr:last").append(
$('<td>').append(v)
.append(
$('</td>').append(
$('</tr>')
)
)
);
}if(k == "company"){
$("#jobSearchTable >tbody >tr:last").append(
$('<td>').append(v)
.append(
$('</td>').append(
$('</tr>')
)
)
);
}if(k == "designation"){
$("#jobSearchTable >tbody >tr:last").append(
$('<td>').append(v)
.append(
$('</td>').append(
$('</tr>')
)
)
);
}
});
});
}
})
});
});
现在,在php文件中,我正在运行一个SQL查询,它查找并回显相关数据。 这是php文件
作业的search.php
<?php
require_once 'database.php';
$keyskills = $_POST['keyskills'];
$location = $_POST['location'];
$experience = $_POST['experience'];
$data = array();
$stmt = $db->query("SELECT * FROM jobs where keyskills like '%$keyskills%' AND location like '%$location%' AND required_experience like '%$experience%' ");
$row = $stmt->fetchall(PDO::FETCH_ASSOC);
foreach($row as $key => $value) {
$data[$key] = $value;
$result = json_encode($data);
}
echo $result;
答案 0 :(得分:0)
而不是放入if子句,你没有进行任何验证,这个脚本可以很容易地将所有内容放在表格中。
var result = $.parseJSON(data);
var tr;
$.each(result, function(key, value) {
tr = $('<tr/>')
$.each(value, function(k, v) {
tr.append('<td>'+v+'</td>')
});
$("#jobSearchTable >tbody').append(tr);
});