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

【问题标题】：Ajax query return the dom as data and not the data from my databaseAjax 查询将 dom 作为数据返回，而不是我数据库中的数据
【发布时间】：2021-11-12 04:00:21
【问题描述】：

我正在尝试通过使用 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>

【问题讨论】：

  • 添加console.log结果
  • 在成功函数中？我已经添加了，这个值没有定义
  • 在问题中添加`console.log(msg)`的结果
  • 您无法从例如 ../ajax/ajaxSearchByRef.php 获取localhost:8080/home.php（技术上你可以，但结果可能不是你所期望的）。你为什么向上穿越？您的文件夹结构是什么，您的 www-root 是什么？您是否尝试从项目外部加载文件？
  • 您在 sql 查询中有错字，因为您的搜索模式必须用单引号括起来：'%...%'，但您不应该使用字符串插值，您应该使用带有参数化查询的准备好的语句。

标签： javascript php mysql ajax


【解决方案1】：

问题在于请求处理。

  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}

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

【讨论】：

    猜你喜欢
    • 2021-01-20
    • 1970-01-01
    • 1970-01-01
    • 2020-10-31
    • 2013-03-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode