文章/答案/技术大牛

发布

社区首页 >问答首页 >Ajax查询将dom作为数据返回，而不是数据库中的数据

问Ajax查询将dom作为数据返回，而不是数据库中的数据
EN

Stack Overflow用户

提问于 2021-09-17 09:00:28

回答 1查看 29关注 0票数 0

我试图通过使用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>

ajax

javascript

php

mysql

回答 1

Stack Overflow用户

发布于 2021-09-17 09:41:30

问题出在请求处理上。

确保您的php代码位于不同的文件中。
即使您正在对同一页执行请求，也要确保正确处理它。

例如,

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
}
?>

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

Conclusion:-

不要弄乱一个文件Ajax请求的前端和后端{php，html}。
尝试尽可能整洁地处理请求，将减少不同请求之间的冲突。

例如：-

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}

对于任何问题，请在下面进行评论。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69220630

复制

相似问题

问Ajax查询将dom作为数据返回，而不是数据库中的数据
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Ajax查询将dom作为数据返回，而不是数据库中的数据EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Ajax查询将dom作为数据返回，而不是数据库中的数据
EN