Question

因此，我无法在代码中搜索特定结果，但是当我单击搜索按钮时，Web服务会显示所有结果。例如，当我在区域表单字段上输入london时，它不会显示london，而是将所有结果加载到数据库中。结果并非特定于我搜索的内容，我感到困惑，因为我认为它是正确的。如果我想要特定结果，则该特定结果将不会加载。我也显示了我的代码，任何人都可以找出错误的地方>

                        window.onload = function() {



      init();
     };

                      function init() {

                 document.querySelector("#Submit").addEventListener("click", 
       sendAjax);
    console.log("function init is running");
 };

function sendAjax() {

  var region = document.querySelector("#region").value;
  var type = document.querySelector("#type").value;   
console.log("type is: " + type);
console.log("region is: " + region);



  var ajaxConnection = new XMLHttpRequest();
   console.log("ajaxConnection is: " + ajaxConnection);


  ajaxConnection.addEventListener("load", e=>{
  console.log("AJAX connected.");

  var output = "";
  var poiResults = JSON.parse(e.target.responseText);

  //Loop through each.
  poiResults.forEach (poiResponse=>{
      //Results of the query output in variable "output".
      output = output + `<br>
                         Name: ${poiResponse.name} <br>
                         Type: ${poiResponse.type} <br>
                         Country: ${poiResponse.country} <br>
                         Region: ${poiResponse.region} 
                         Longtitude: ${poiResponse.Longtitude}
                         Lattitude: ${poiResponse.Lattitude}
                         Description: ${poiResponse.description}<br><br>`;
  });

         //Output in div with ID of "response".
         var response = document.querySelector("#response");
       response.innerHTML = output;
      });

   //Open the connection to a remote URL.
  //Use backticks for easier variable integration.
  ajaxConnection.open("GET", 
`https://user.user.ac.uk/~user/webservice.php? 
 type=${type}&Region=${region}`);

  //Send the request.
 ajaxConnection.send();
 };

这是html

     <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <script src="script.js" charset="utf-8"></script>
 <title>POI test</title>
</head>
       <body>
 <article role="article">
   <section>
   <h1>HT Tracks</h1>
  <input type="text" name="region" id="region" placeholder="region">
     <input type="text" name="type"  id="type" placeholder="Type">

  <input type="button" id="Submit" value="Submit">
   <div id="response"></div>
     </section>
       </article>

        </body>
           </html>

    And here is my webservice 

       <?php


        header("Content-type: application/json");


      $region= $_GET["region"];
      $conn = new PDO("mysql:host=localhost;dbname=user;", 
   "user","user");
 $results = $conn->query("SELECT*FROM pointsofinterest 
                     WHERE region LIKE '%$r%' AND type LIKE '%$t%'");

 $resultsAsAssocArray = $results->fetchAll(PDO::FETCH_ASSOC);

 echo json_encode($resultsAsAssocArray) ;


  ?>

Answer 1

因此，在没有看到数据库架构或其他内容的情况下，我无法确切告诉您如何格式化PHP代码/ SQL查询，但是它看起来像以下内容（如果您也发布数据库架构，这也会有所帮助：））：

$region= $_GET["region"];
$conn = new PDO("mysql:host=localhost;dbname=user;","user","user");
$stmt = $conn->prepare("SELECT * FROM pointsofinterest WHERE region=?");
$results = $stmt->execute([$region]);

$resultsAsAssocArray = $results->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($resultsAsAssocArray);

您在这里所做的是参数化查询。为了防止SQL注入，您需要在查询中放置一个占位符（？），以防止$ _GET ['region']中潜在不安全的数据自动传递到SQL查询中并创建SQL注入漏洞。然后，PDO“准备”该语句，并替换“？”与您在execute（）函数调用中传递的内容（作为数组）（在本例中，我们传递了$ region变量）。

但是，该SQL可能对您不起作用，因为我不知道该“区域”列中的内容，因此只能猜测上下文。如果您发布完整的架构，我可以为您提供更可靠的答案。

无法在ajax中搜索特定结果

1 个答案: