php / jQuery获取所选值

时间:2016-11-25 17:53:20

标签: javascript php jquery mysql ajax

我正在尝试获取表单中所选值的键(主键),因此我可以将键添加到连接表中。我从下拉列表中将表单更改为自动完成。但是不要用jquery做地图。

这是我自动填充的php

<?php
if (isset($_POST['type']) && $_POST['type'] == 'faculty_id') {

    $type = $_POST['type'];
    $name = $_POST['name_startsWith'];
    $nameID = $_POST['nameID'];


    $query = "SELECT FirstName, LastName, FacultyId FROM Test.Faculty where UPPER(FirstName) LIKE '" . strtoupper($name) . "%'";
    $result = mysqli_query($con, $query);
    $data = array();
    while ($row = mysqli_fetch_assoc($result)) {
        $name = $row['FirstName'] . ' ' . $row['LastName'];
        $nameID = $row['FacultyId'];
        array_push($data, $name);
    }
    mysqli_close($con);


    echo json_encode($data);
    exit;
}
?>

这是表单和jQuery页面

<form action="Form.php" method="post">
    <input type='text'  id="faculty_id" placeholder="Instructor" name="faculty_id" value='' />

    <input type="submit" value="submit" name="submit" />
</form>
<script type="text/javascript">

    $('#faculty_id').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: 'Form.php',
                dataType: "json",
                method: 'post',
                data: {
                    name_startsWith: request.term,
                    nameID: request.term,
                    type: 'faculty_id'
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        console.log(item);
                        //var code = item.split("|");
                        return {
                            label: item,
                            value: item,
                            data: item
                        }
                    }));
                }
            });
        },
        autoFocus: true,
        minLength: 1,

    });
</script>

和php插入查询

<?php
if (isset($_POST)) {
    $faculty_id = $_POST['faculty_id'];
    try {
        $stat = $db->prepare("Insert into ATCTest.Schedule
                      (Faculty ) 
                      VALUE (':faculty_id' )");
        $stat->bindParam(":faculty_id", $faculty_id);

        if ($stat->execute()) {
            echo "<h5>Faculty-js: " . $faculty_id . "</h5>";
        } else {
            echo "Problem!!!";
        }
    } catch (PDOException $e) {
        echo $e->getMessage();
    }
}

1 个答案:

答案 0 :(得分:1)

  1. 保持一致。选择PDOMySQLi。不是都。您的自动完成脚本使用MySQLi,但是在插入脚本中,您使用PDO。选择一个并坚持下去。
  2. 我会使用PDO,因为我觉得它比MySQLi更容易使用。

    1. 使用适当的请求方法。如果你得到了什么,请使用GET而不是POST。如果要添加或更新,请使用POST。
    2. 让我们重写您的自动填充脚本以使用PDO:

          if (isset($_GET['type']) && $_GET['type'] == 'faculty_id') {
              // this will hold your response that gets sent back
              $data = null;
              $name = trim($_GET['name']);
      
              try {
                  // because you are passed untrusted data, use prepared statement 
                  $sth = $db->prepare("
                      SELECT FirstName, LastName, FacultyId 
                      FROM Test.Faculty 
                      WHERE UPPER(FirstName) LIKE UPPER(?)
                  ");
                  $sth->execute(array($name . '%'));
                  // set the results (array of objects) as your JSON response
                  $data['faculties'] = $sth->fetchAll(PDO::FETCH_OBJ);
              } catch(PDOException $e){
                  echo $e->getMessage();
              }
              // send the results i.e. response
              header('Content-Type: application/json');
              echo json_encode($data);
              exit;
          }
      
      1. 我之前从未使用过自动完成插件,但我会根据我见过的其他答案对其进行修改。

        $('#faculty_id').autocomplete({
            source: function (request, response) {
                // short syntax for .ajax() using GET method that expects a JSON response
                $.getJSON('Form.php', { type: 'faculty_id', name: request.term }, function (data) {
                    // data.faculties (your AJAX script's response) should now be an array of objects
                    console.log(data.faculties);
                    response($.map(data.faculties, function (faculty) {
                        console.log(faculty);
                        return {
                            label: faculty.FirstName + ' ' + faculty.LastName,
                            value: faculty.FacultyId
                        }
                    }));
                });
            },
            autoFocus: true,
            minLength: 1,
        });
        
      2. 最后,当您插入

        // check if form was POSTed
        if ($_SERVER['REQUEST_METHOD'] === 'POST') {
            $faculty_id = $_POST['faculty_id'];
            try {
                // VALUES not VALUE
                // don't wrap your placeholders with quotes in your prepared statement
                // simplified
                $sth = $db->prepare("INSERT INTO ATCTest.Schedule(Faculty) VALUES(?)");
                // simplified way to bind parameters
                $sth->execute(array($faculty_id));
                // use rowCount() not execute() to determine if the operation was successful or not
                if ($sth->rowCount()){
                    echo "<h5>Faculty-js: $faculty_id</h5>";
                } else {
                    echo "Problem!!!";
                }
            } catch (PDOException $e) {
                echo $e->getMessage();
            }
        }