使用JQuery表中没有附加PHP数据

时间:2015-08-22 09:18:29

标签: php jquery mysql ajax pdo

我正在使用PDO在PHP中创建一个职位门户。这个项目中有一个职位搜索模块,其中有三个字段用于搜索职位。这些是:

  • keyskills
  • 位置
  • 经验

我的问题是,当我在任何字段中给出值时,结果数据不会附加在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 &copy; 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;

1 个答案:

答案 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);
});