Twitter类型使用mysql源码

时间:2015-04-23 20:14:47

标签: php jquery mysql twitter-bootstrap

我正在尝试使用PHP源文件的预先输入函数。

这是我的输入字段:

         <label for="shippingaddress">Shipping Address</label><li>
         <li><select id="shipaddress" name="shippingaddress" dir="ltr" lang="en">
         <option selected="selected">80 Allstate Parkway, Markham, ON, L3R 6H3</option>
         <option>30 High Meadow, Toronto, ON, M6L 2Z5</option>
         <option>4000 Victoria Park Avenue, Toronto, ON, M2H 3P4 </option>
         ...
         </select>

我的PHP来源:

<input type="text" class="form-control typeahead" id="test-field" placeholder="Contact"/>

我的JQuery:

<?php

    require_once dirname(__FILE__) . ("/../db_connection.php");
    global $connection;
    $search = $_POST['query'];
    $get = "SELECT * FROM contacts WHERE contact_fname LIKE '%{$search}%'";
    $query = mysqli_query($connection, $get);

    $json = array();
    while ($rows = mysqli_fetch_assoc($query)) {
      $json[] = $rows;
    }
    $json =  json_encode($json);
    print_r($json);
?>

如果我直接使用:(localhost / X / XX / json_test.php?query = er)访问PHP文件,我能够显示结果 - 仅当我将$ _POST更改为$ _GET时(不知道为什么)。 Typeahead根本不起作用。我遗失的任何事情。 谢谢。

编辑: 这是json返回的:

 <script src="plugins/typeahead/typeahead.bundle.min.js"></script>
  jQuery(document).ready(function() {


      // Init Twitter Typeahead.js
    var substringMatcher = function(strs) {
      return function findMatches(q, cb) {
        var matches, substrRegex;

        matches = [];

        substrRegex = new RegExp(q, 'i');

                $.each(strs, function(i, str) {
          if (substrRegex.test(str)) {
                        matches.push({
              value: str
            });
          }
        });

        cb(matches);
      };
    };


    $('.typeahead').typeahead({
          source: function (query, process) {
            $.ajax({
              url: '../includes/functions/json_test.php',
              type: 'POST',
              dataType: 'JSON',
              data: 'query=' + query,
              success: function(data) {
                //console.log(data);
                process(data);
              }
            });
    }
  });

  });

1 个答案:

答案 0 :(得分:0)

您的代码存在一些问题:

  1. 您只能通过$_GET访问它的原因是因为您正在向服务器发出GET请求。

  2. 在向服务器发出搜索请求时,实际上最好使用GET个请求,因为您尝试获取数据而不是操纵数据。

  3. 直接注入您的搜索字词mysqli_query,直接打开SQL注入漏洞。

  4. 使用print_r不会以可读格式向JavaScript提供数据。

  5. 在没有设置正确标头(application/json)的情况下将数据发送回JavaScript将导致结果不一致。

  6. 我建议做以下

    PHP:     

    require_once dirname(__FILE__) . ("/../db_connection.php");
    
    global $connection;
    
    $search = $_GET['query'];
    
    $query = "SELECT * FROM `contacts` WHERE `contact_fname` LIKE '%?%'";
    
    $results = [];
    
    if ($stmt = mysqli_prepare($connection, $query)) {
    
        mysqli_stmt_bind_param($stmt, "s", $search);
    
        mysqli_stmt_execute($stmt);
    
        $result = mysqli_stmt_get_result($stmt);
    
        while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC) {
            $results[] = $row;
        }
    }
    
    header("Content-type: application/json");
    
    exit(json_encode($results));
    

    JavaScript(HTML内部):

    <script src="plugins/typeahead/typeahead.bundle.min.js"></script>
    <script>
    jQuery(document).ready(function() {
    
    
        // Init Twitter Typeahead.js
        var substringMatcher = function(strs) {
            return function findMatches(q, cb) {
                var matches, substrRegex;
    
                matches = [];
    
                substrRegex = new RegExp(q, 'i');
    
                $.each(strs, function(i, str) {
                    if (substrRegex.test(str)) {
                        matches.push({
                            value: str
                        });
                    }
                });
    
                cb(matches);
            };
        };
    
    
        $('.typeahead').typeahead({
            source: function (query, process) {
                $.getJson('../includes/functions/json_test.php', {
                    'query': query
                }, function(data) {
                    //console.log(data);
                    process(data);
                });
            }
        });
    });
    </script>
    

    我注意到的另一件事是您在脚本标记之外使用了javascript,但在其上方的行上有plugins/typeahead/typeahead.bundle.min.js文件的脚本标记。如果确实存在于JavaScript文件中,则需要将其放在页面上的HTML中,并将JavaScript包装在<script>标记中。还要确保您的路径对JavaScript和PHP文件是正确的,以便正确加载它们。通常最好为您的资产提供相对于根网址的绝对网址,例如/full/path/to/plugins/typeahead/typeahead.bundle.min.js/full/path/to/includes/functions/json_test.php

    我担心的一件事是,您的db_connection.php文件似乎在您的webroot中,这意味着人们可以访问并可能下载您的/includes/db_connection.php文件并获取所有数据库连接凭据。

    如果您需要任何进一步的帮助,请告诉我们!