jquery / ajax使用用户输入作为条件运行php查询,然后显示没有页面刷新的查询结果

时间:2015-11-17 04:29:20

标签: javascript php jquery mysql ajax

我花了最近24小时试图找到答案,虽然有类似的问题,答案似乎要比我的用例更复杂(所以我不明白) ,或者我发现低质量的问题/答案。

我的标题真的说了这一切,除了我的代码,但重申完整的句子:我知道如何用用户输入和ph​​p使用jquery更新mysql数据库字段。另外,我知道如何使用ajax检索php查询结果。我无法弄清楚的是如何同时做这两件事:使用ajax将用户输入设置为php查询的参数,然后拉出该查询的结果。

一旦我把这些事情分开来,我觉得这很简单,但我根本不理解.ajax(),这就是为什么我在这里

这是我的代码:

用户输入页面

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Pull from query</title>

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

 <style>

 #topRow {
     margin-top:40px;
     text-align:center;
 }
 </style>
 </head>
 <body>

 <div class="container contentContainer" id="topContainer">
 <div class="row">

     <div class="col-md-6 col-md-offset-3" id="topRow">
     <textarea class="form-control"></textarea>
     </div>

     <div class="row">
         <div class="col-md-6 col-md-offset-3" id="output" style="border:1px solid #000000;height:40px;margin-top:40px;text-align:center;">
         </div>
     </div>

 </div>
 </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script>

    //  "keyup" RUNS FUNCTION EVERY TIME USER USES KEYBOARD
    $("textarea").keyup(function() {

        $('#output').html("loading...");

        var email = $('textarea').val();

        $.post("5Query.php", {email:$('textarea').val()} );

        // ACCESS QUERY RESULTS (HOPEFULLY!)
        $.ajax({                                      
            url: '5Query.php',
            dataType: 'json',
            success: function(data)
                {
                    var result = data
                    $('#output').html(result);
                }
    });

        })

    </script>
 </body>
</html>

单独文件中的PHP查询

<?php

  // SET DATABASE LINK AS A VARIABLE THAT CAN BE USED WHEN RUNNING QUERIES
  $link = mysqli_connect(...connection stuff...);

  if (mysqli_connect_error()) {
    die("Could not connect");
  }

  // SELECT all fields FROM databasename
  $query = "SELECT * FROM users WHERE email='".mysqli_real_escape_string($link, $_POST['email'])."'";

  // CREATE ARRAY CONTAINING ALL VALUES FOR ROW MATCHING QUERY CRITERIA
  $row = mysqli_fetch_array(mysqli_query($link, $query));
  $name = $row['name'];
  $error = 'I could not find that user name';

  //echo json_encode($row);

  if($row){
  echo json_encode($name);
  } else {
    echo json_encode($error);
  }


?>

正如您所看到的,我尝试使用$ .post()来设置查询参数,因为这是我知道的唯一方法,但确实会返回任何结果。当我将一个值硬编码到我知道的mysql db表中的php查询中,而不是尝试将用户输入发布到查询时,它会正确返回并显示查询结果。

我希望你们中的一些聪明人能够发现一些明显的东西,像我这样的新手看不到......我绝对觉得一切都应该发生在.ajax()中,但我只是我不知道该怎么做,而且在任何地方找到答案都很奇怪。

请让我知道如何改进我的问题,或者我可以在哪里找到答案(尽管请记住我是ajax的超级新手,所以我完全有可能看到我的问题答案,只是不知道我在看什么。)

2 个答案:

答案 0 :(得分:1)

删除$.post,然后像这样更改ajax

$.ajax({
    url: '5Query.php',
    type: 'post',
    dataType: 'json',
    data: {
        email: $('textarea').val()
    },
    success: function(data) {
        var result = data
        $('#output').html(result);
    }
});

在php页面中,您可以像$_POST['email']

那样访问该变量

答案 1 :(得分:1)

您不需要$.post$.ajax。使用其中一个

$.post("5Query.php", {email:$('textarea').val()}, function(result){ $('#output').html(result); }); //added callback function that will handle response

或者您可以使用$.ajax()

        // ACCESS QUERY RESULTS (HOPEFULLY!)
        $.ajax({                                      
            url: '5Query.php',                
            data : { email: $('textarea').val() },
            success: function(data)
                {
                    var result = data
                    $('#output').html(result);
                }
    });

由于您只返回字符串,因此您不需要json_encode(如果您想要返回多条记录,那么您必须使用它,并且您必须相应地更改ajax成功函数。 在PHP代码中更改这些行

if($row){
  echo $name;
  } else {
    echo $error;
  }