jquery / ajax使用用戶輸入作為條件來運行php查詢，然后顯示查詢結果而無需刷新頁面

Question

我花了最后24個小時來尋找答案，盡管有類似的問題，但答案似乎比用例更復雜（因此我不理解），或者發現質量很低問題和答案。

除了我的代碼外，我的標題確實說明了所有內容，但要用完整的句子重申：我知道如何使用jquery使用用戶輸入和php更新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的超級新手，所以我很可能看到了答案，只是不知道是什么我在看）。

Answer 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']這樣訪問該變量

Answer 2

您不需要$.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;
  }

jquery / ajax使用用戶輸入作為條件來運行php查詢，然后顯示查詢結果而無需刷新頁面

問題描述

2 個解決方案

解決方案1
1 已采納 2015-11-17 04:33:39

解決方案2
1 2015-11-17 04:45:22

jquery / ajax使用用戶輸入作為條件來運行php查詢，然后顯示查詢結果而無需刷新頁面

問題描述

2 個解決方案

解決方案1 1 已采納 2015-11-17 04:33:39

解決方案2 1 2015-11-17 04:45:22

解決方案1
1 已采納 2015-11-17 04:33:39

解決方案2
1 2015-11-17 04:45:22