时间戳

首页 > 解决方案 > Ajax 查询将 dom 作为数据返回，而不是我数据库中的数据

javascript - Ajax 查询将 dom 作为数据返回，而不是我数据库中的数据

问题描述

我正在尝试使用 JS 和 PHP 通过 Ajax 查询从我的数据库中获取数据，但是当我“console.log”时，它给了我 DOM 作为响应，而不是我正在等待的 Json。

JS：

`

$('#ref').on('input', function() {
  let value = $('#ref').val()

  $.ajax({
    type : "POST",
    url : '../ajax/ajaxSearchByRef.php',
    data : { 
      value : value
    }, 
    success:function(msg) {
      console.log(msg)
    }

  })
})

`

PHP：

<?php 



require './functions/functions.php';
try {
    $pdo = new PDO($dsn, $user, $password);

} catch (PDOException $e) {
    echo $e->getMessage();
}

$value = $_POST['value']; 
$result = $pdo->query("SELECT a.id, a.article, a.designation_en, a.description_en, a.designation_fr, a.description_fr, b.id as group_id, b.name 
FROM products as a INNER JOIN fct_group as b ON b.id = a.fct_group_id AND a.fct_group_id = b.id WHERE a.article LIKE %".$value."%"); 

$list = $result->fetchAll();

echo json_encode($list);

console.log 的结果：

<pre class='xdebug-var-dump' dir='ltr'>
<small>C:\wamp64\www\pocSom\pages\home.php:18:</small><small>float</small> <font color='#f57900'>1382</font>
</pre> 

<!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.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Document</title>
</head>
<body>
<div class="float-right mr-2" > <a href="/uploadpage"> upload a file </a> </div> 
    <div class="container text-center"> 
    
        <h2> ALE Service offer Manager </h2>
        
    </div> 
    
    <div class="container">
      <div class='text-center'>
      <input id='ref' type='text' name='reference' placeholder="search by reference" /> 
      </div>
      <p> The catalogue contains 27638 products </p>  
    <table class="table table-hover table-dark">
  <thead>
    <tr>
     
      <th scope="col">Article reference</th>
      <th scope="col"> English designation</th>
      <th scope="col"> English description </th>
      <th scope="col"> French designation </th>
      <th scope="col"> French description </th>
      <th scope="col"> Functional Group </th> 
    </tr>
  </thead>
  <tbody>
       
    <tr>
        <td> HAW-AP1101-RW</td>
        <td> NaaS Stellar HAW-AP1101-RW Hardware </td>
        <td> NaaS Stellar AP1101. Dual radio 2x2 802.11a/b/g/n/ac AP, integrated antenna, 1 x 10/100/1000Base-T RJ-45) w/802.3af POE, 1x48V DC power interface, Console port. Unrestricted Regulatory Domain. MUST NOT be used for US, Japan or Israel.  LAW-AP1101 needed## </td>
        <td> NaaS Stellar HAW-AP1101-RW Hardware </td>
        <td> NaaS Stellar AP1101. Dual radio 2x2 802.11a/b/g/n/ac AP, integrated antenna, 1 x 10/100/1000Base-T RJ-45) w/802.3af POE, 1x48V DC power interface, Console port. Unrestricted Regulatory Domain. MUST NOT be used for US, Japan or Israel.  LAW-AP1101 needed## </td>
        <td> X3I </td>
     
    </tr>
     
       
    <tr>
        <td> HAW-AP1101-US</td>
        <td> NaaS Stellar HAW-AP1101-US Hardware </td>
        <td> NaaS Stellar AP1101. Dual radio 2x2 802.11a/b/g/n/ac AP, integrated antenna, 1 x 10/100/1000Base-T RJ-45) w/802.3af POE, 1x48V DC power interface, Console port. Regulatory Domain United States. LAW-AP1101 needed## </td>
        <td> NaaS Stellar HAW-AP1101-US Hardware </td>
        <td> NaaS Stellar AP1101. Dual radio 2x2 802.11a/b/g/n/ac AP, integrated antenna, 1 x 10/100/1000Base-T RJ-45) w/802.3af POE, 1x48V DC power interface, Console port. Regulatory Domain United States. LAW-AP1101 needed## </td>
        <td> X3I </td>
     
    </tr>
     
       
    <tr>
        <td> 300790730</td>
        <td> VQIP Classic-Active Conversion Fee </td>
        <td> VQIP, Classic-Active Conversion Fee# </td>
        <td> VQIP Classic-Active Conversion Fee </td>
        <td> VQIP, Classic-Active Conversion Fee# </td>
        <td> YB </td>
     
    </tr>
     
       
    <tr>
        <td> 300955838</td>
        <td> VQIP CLASSIC 5K TO 10K PER IP ADDRESS </td>
        <td> VQIP Classic licensing RTU, Up to 9,999 IP Addresses Supported, per IP#address# </td>
        <td> VQIP CLASSIC 5K TO 10K PER IP ADDRESS </td>
        <td> VQIP Classic licensing RTU, Up to 9,999 IP Addresses Supported, per IP#address# </td>
        <td> YB </td>
     
    </tr>
     
       
    <tr>
        <td> 300955846</td>
        <td> VQIP CLASSIC 10K TO 25K PER IP ADDRESS </td>
        <td> VQIP Classic licensing RTU, 10,000 - 24,999 IP Addresses Supported, per#IP address# </td>
        <td> VQIP CLASSIC 10K TO 25K PER IP ADDRESS </td>
        <td> VQIP Classic licensing RTU, 10,000 - 24,999 IP Addresses Supported, per#IP address# </td>
        <td> YB </td>
     
    </tr>
     
       
    <tr>
        <td> 300955853</td>
        <td> VQIP CLASSIC 25K TO 50K PER IP ADDRESS </td>
        <td> VQIP Classic licensing RTU, 25,000 - 49,999 IP Addresses Supported, per#IP address# </td>
        <td> VQIP CLASSIC 25K TO 50K PER IP ADDRESS </td>
        <td> VQIP Classic licensing RTU, 25,000 - 49,999 IP Addresses Supported, per#IP address# </td>
        <td> YB </td>
     
    </tr>
     
       
    <tr>
        <td> 300955861</td>
        <td> VQIP CLASSIC 50K TO 100K PER IP ADDRESS </td>
        <td> VQIP Classic licensing RTU, 50,000 - 99,999 IP Addresses Supported, per#IP address# </td>
        <td> VQIP CLASSIC 50K TO 100K PER IP ADDRESS </td>
        <td> VQIP Classic licensing RTU, 50,000 - 99,999 IP Addresses Supported, per#IP address# </td>
        <td> YB </td>
     
    </tr>
     
       
    <tr>
        <td> 300955879</td>
        <td> VQIP CLASSIC 100K TO 250K PER IP ADDRESS </td>
        <td> VQIP Classic licensing RTU, 100,000 to 249,999 IP Addresses Supported,#per IP address# </td>
        <td> VQIP CLASSIC 100K TO 250K PER IP ADDRESS </td>
        <td> VQIP Classic licensing RTU, 100,000 to 249,999 IP Addresses Supported,#per IP address# </td>
        <td> YB </td>
     
    </tr>
     
       
    <tr>
        <td> 300955887</td>
        <td> VQIP CLASSIC 500K TO 750K PER IP ADDRESS </td>
        <td> VQIP Classic licensing RTU, 500,000 to 749,999 IP Addresses Supported,#per IP address# </td>
        <td> VQIP CLASSIC 500K TO 750K PER IP ADDRESS </td>
        <td> VQIP Classic licensing RTU, 500,000 to 749,999 IP Addresses Supported,#per IP address# </td>
        <td> YB </td>
     
    </tr>
     
       
    <tr>
        <td> 300955895</td>
        <td> VQIP CLASSIC 1M+ IP ADDRESS PER IP ADDR </td>
        <td> VQIP Classic licensing RTU, 1M+ IP Addresses Supported, per IP address# </td>
        <td> VQIP CLASSIC 1M+ IP ADDRESS PER IP ADDR </td>
        <td> VQIP Classic licensing RTU, 1M+ IP Addresses Supported, per IP address# </td>
        <td> YB </td>
     
    </tr>
     
       
    <tr>
        <td> 300955994</td>
        <td> VQIP ACTIVE 5K TO 10K PER IP ADDRESS </td>
        <td> VQIP Active licensing RTU, Up to 9,999 IP Addresses Supported, per IP#address# </td>
        <td> VQIP ACTIVE 5K TO 10K PER IP ADDRESS </td>
        <td> VQIP Active licensing RTU, Up to 9,999 IP Addresses Supported, per IP#address# </td>
        <td> YB </td>
     
    </tr>
     
       
    <tr>
        <td> 300956000</td>
        <td> VQIP ACTIVE 10K TO 25K PER IP ADDRESS </td>
        <td> VQIP Active licensing RTU, 10,000 - 24,999 IP Addresses Supported, per#IP address# </td>
        <td> VQIP ACTIVE 10K TO 25K PER IP ADDRESS </td>
        <td> VQIP Active licensing RTU, 10,000 - 24,999 IP Addresses Supported, per#IP address# </td>
        <td> YB </td>
     
    </tr>
     
       
    <tr>
        <td> 300956018</td>
        <td> VQIP ACTIVE 25K TO 50K PER IP ADDRESS </td>
        <td> VQIP Active licensing RTU, 25,000 - 49,999 IP Addresses Supported, per#IP address# </td>
        <td> VQIP ACTIVE 25K TO 50K PER IP ADDRESS </td>
        <td> VQIP Active licensing RTU, 25,000 - 49,999 IP Addresses Supported, per#IP address# </td>
        <td> YB </td>
     
    </tr>
     
       
    <tr>
        <td> 300956026</td>
        <td> VQIP ACTIVE 50K TO 100K PER IP ADDRESS </td>
        <td> VQIP Active licensing RTU, 50,000 - 99,999 IP Addresses Supported, per#IP address# </td>
        <td> VQIP ACTIVE 50K TO 100K PER IP ADDRESS </td>
        <td> VQIP Active licensing RTU, 50,000 - 99,999 IP Addresses Supported, per#IP address# </td>
        <td> YB </td>
     
    </tr>
     
       
    <tr>
        <td> 300956034</td>
        <td> VQIP ACTIVE 250K TO 500K PER IP ADDRESS </td>
        <td> VQIP Active licensing RTU, 250,000-499,999 IP Addresses Supported, per#IP address# </td>
        <td> VQIP ACTIVE 250K TO 500K PER IP ADDRESS </td>
        <td> VQIP Active licensing RTU, 250,000-499,999 IP Addresses Supported, per#IP address# </td>
        <td> YB </td>
     
    </tr>
     
       
    <tr>
        <td> 300956208</td>
        <td> VQIP ENUM MGR RTU,1K TO 4,999 SUB </td>
        <td> VQIP ENUM Manager RTU, 1,000 to 4,999 Subscribers Supported, per subscriber## </td>
        <td> VQIP ENUM MGR RTU,1K TO 4,999 SUB </td>
        <td> VQIP ENUM Manager RTU, 1,000 to 4,999 Subscribers Supported, per subscriber## </td>
        <td> YB </td>
     
    </tr>
     
       
    <tr>
        <td> 300956216</td>
        <td> VQIP ENUM MGR RTU,5K TO 9,999 SUB </td>
        <td> VQIP ENUM Manager RTU, 5,000 to 9,999 Subscribers Supported, per subscriber## </td>
        <td> VQIP ENUM MGR RTU,5K TO 9,999 SUB </td>
        <td> VQIP ENUM Manager RTU, 5,000 to 9,999 Subscribers Supported, per subscriber## </td>
        <td> YB </td>
     
    </tr>
     
       
    <tr>
        <td> 300956224</td>
        <td> VQIP ENUM MGR 10K TO 25K PER IP ADDR </td>
        <td> VQIP ENUM Manager RTU, 10,000 - 24,999 Subscribers Supported, per#subscriber# </td>
        <td> VQIP ENUM MGR 10K TO 25K PER IP ADDR </td>
        <td> VQIP ENUM Manager RTU, 10,000 - 24,999 Subscribers Supported, per#subscriber# </td>
        <td> YB </td>
     
    </tr>
     
       
    <tr>
        <td> 300956232</td>
        <td> VQIP ENUM MGR 25K TO 50K PER IP ADDR </td>
        <td> VQIP ENUM Manager RTU, 25,000 - 49,999 Subscribers Supported, per#subscriber# </td>
        <td> VQIP ENUM MGR 25K TO 50K PER IP ADDR </td>
        <td> VQIP ENUM Manager RTU, 25,000 - 49,999 Subscribers Supported, per#subscriber# </td>
        <td> YB </td>
     
    </tr>
     
       
    <tr>
        <td> 300956240</td>
        <td> VQIP ENUM MGR 50K TO 100K PER IP ADDR </td>
        <td> VQIP ENUM Manager RTU, 50,000 - 99,999 Subscribers Supported, per#subscriber# </td>
        <td> VQIP ENUM MGR 50K TO 100K PER IP ADDR </td>
        <td> VQIP ENUM Manager RTU, 50,000 - 99,999 Subscribers Supported, per#subscriber# </td>
        <td> YB </td>
     
    </tr>
     
       
    <tr>
        <td> 300956257</td>
        <td> VQIP ENUM MGR 100K TO 250K PER IP ADDR </td>
        <td> VQIP ENUM Manager RTU, 100,000-249,999 Subscribers Supported, per#subscriber# </td>
        <td> VQIP ENUM MGR 100K TO 250K PER IP ADDR </td>
        <td> VQIP ENUM Manager RTU, 100,000-249,999 Subscribers Supported, per#subscriber# </td>
        <td> YB </td>
     
    </tr>
     
       

  </tbody>
</table>

    </div>


</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>

$('#ref').on('input', function() {
  let value = $('#ref').val()

  $.ajax({
    type : "POST",
    url : '../ajax/ajaxSearchByRef.php',
    data : { 
      value : value
    }, 
    success:function(msg) {
      console.log(msg)
    }

  })
})

</script>

</html>

标签： javascriptphpmysqlajax

解决方案

问题在于请求处理。

  1. 确保您的php代码在不同的文件中，它似乎不是。
  2. 即使您正在向同一页面发出请求，请确保正确处理它。

例如，

不同文件中的 HTML、JS、CSS 和不同文件中的 php，然后

<?php 
require './functions/functions.php';
try {
    $pdo = new PDO($dsn, $user, $password);

} catch (PDOException $e) {
    echo $e->getMessage();
}

if(isset($_POST['value'])){//Work on request accurately
    $value = $_POST['value'];
    $result = $pdo->query("SELECT a.id, a.article, a.designation_en, a.description_en, a.designation_fr, a.description_fr, b.id as group_id, b.name 
FROM products as a INNER JOIN fct_group as b ON b.id = a.fct_group_id AND a.fct_group_id = b.id WHERE a.article LIKE %".$value."%"); 

    $list = $result->fetchAll();
    echo json_encode($list);
}

HTML、JS 和 php 都在一个页面中，并且向同一页面发出请求{不推荐}

<?php 
require './functions/functions.php';
try {
    $pdo = new PDO($dsn, $user, $password);

} catch (PDOException $e) {
    echo $e->getMessage();
}

if(isset($_POST['value'])){//Work on request accurately
    $value = $_POST['value'];
    $result = $pdo->query("SELECT a.id, a.article, a.designation_en, a.description_en, a.designation_fr, a.description_fr, b.id as group_id, b.name 
FROM products as a INNER JOIN fct_group as b ON b.id = a.fct_group_id AND a.fct_group_id = b.id WHERE a.article LIKE %".$value."%"); 

    $list = $result->fetchAll();
    echo json_encode($list);
}
else{?>
<!-- Here the HTML part with javascript css whatever -->
<?php
}
?>

正确处理请求后，您将获得特定请求所需的确切内容。

结论：-

  1. 不要混淆前端和后端 {php, html} 的文件 Ajax 请求。
  2. 尽量整齐地处理请求，将减少不同请求之间的冲突。

例如：-

if($_POST['action']== 'hello') echo "handling request for hello";
else if($_POST['action']== 'bye' echo "handling request for bye";
.
.
.
else { //some error code or some defaults}

如有任何疑问，请在下方评论。

推荐阅读