尝试将SQL结果分隔开来，以便按百分比更改价格。开发者社区

相关文章推荐

大鼻子的盒饭 · 风神奕炫 - 知乎· 1 年前 ·

玩足球的杯子 · 小鹏接盘滴滴“造车”_财经_中国网· 1 年前 ·

憨厚的香烟 · 乐高DC沙赞：魔法与怪物_百度百科· 1 年前 ·

魁梧的打火机 · 宝马集团2022一季度中国区销量：交付208 ...· 1 年前 ·

绅士的剪刀 · 华人运通旗下高合汽车展示“中国实力”_手机凤凰网· 1 年前 ·

腾讯云

开发者社区

文档意见反馈控制台

首页 TVP

文章/答案/技术大牛

发布

<!DOCTYPE html>
    <meta charset="utf-8">
    <link   href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>
<style>
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
.dropdown {
  position: relative;
  display: inline-block;
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
    <title>AJAX Search Example</title>
    <script>
    function fetch() {
      // (A) GET SEARCH TERM
      var data = new FormData();
      data.append('search', document.getElementById("search").value);
      data.append('ajax', 1);
      // (B) AJAX SEARCH REQUEST
      var xhr = new XMLHttpRequest();
      xhr.open('POST', "2-search.php");
      xhr.onload = function () {
        var results = JSON.parse(this.response),
            wrapper = document.getElementById("results");
        if (results.length > 0) {
          wrapper.innerHTML = "";
          for (let res of results) {
            let line = document.createElement("div");
            line.innerHTML = `Category:${res['category']} - OEM #:${res['oemnumber']} - Price:$${res['price']}`;
            wrapper.appendChild(line);
        } else { wrapper.innerHTML = "No results found"; }
      xhr.send(data);
      return false;
    </script>
  </head>
    <!-- (A) SEARCH FORM -->
    <form onsubmit="return fetch();">
      <h1>SEARCH FOR CATALYTIC CONVERTER</h1>
      <input type="text" id="search" required/>
      <input type="submit" value="Search"/>
    </form>
    <!-- (B) SEARCH RESULTS -->
    <div id="results"></div>
<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#70">%70</a>
    <a href="#60">%60</a>
    <a href="#50">%50</a>
<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
</script>
  </body>
</html>

<?php
// (A) DATABASE CONFIG - CHANGE TO YOUR OWN!
define('DB_HOST', '');
define('DB_NAME', '');
define('DB_CHARSET', 'utf8');
define('DB_USER', '');
define('DB_PASSWORD', '');
// (B) CONNECT TO DATABASE
try {
  $pdo = new PDO(
    "mysql:host=".DB_HOST.";charset=".DB_CHARSET.";dbname=".DB_NAME,
    DB_USER, DB_PASSWORD, [
      PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
      PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
} catch (Exception $ex) { exit($ex->getMessage()); }
// (C) SEARCH
$stmt = $pdo->prepare("SELECT * FROM `converter_prices` WHERE `category` LIKE ? OR `oemnumber` LIKE ? OR `price`  LIKE ?");
$stmt->execute(["%".$_POST['search']."%", "%".$_POST['search']."%", "%".$_POST['search']."%"]);
$results = $stmt->fetchAll();
if (isset($_POST['ajax'])) { echo json_encode($results); }

<table>
    $sql=$db->prepare('SELECT * FROM `converter_prices` WHERE `category` LIKE ? OR `oemnumber` LIKE ? OR `price`  LIKE ?);
    $sql->execute(array(':category'=>$_REQUEST[searchcategory]));
    while ($row=$sql->fetch())
       echo "<tr><td>$row[category]</td><td>$row[oemnumber]</td><td>$row[price]</td></tr>";
</table>

const data = [["apple","2.30"],["apple","4.5"]];
    links = document.querySelectorAll('a');
for (i = 0; i <  links.length; i++) {
 links[i].addEventListener("click", function() {
percentage = event.target.innerText.match(/\d+/)[0]/100;
datanew =[];
for (i = 0; i < data.length; i++) {
datanew.push(data[i][0]);
datanew.push((data[i][1]*percentage).toFixed(2));
console.log(datanew)
}

<div class="dropdown">
  <div id="myDropdown" class="dropdown-content">
    <a href="#70">%70</a>
    <a href="#60">%60</a>
    <a href="#50">%50</a>
  </div>

//this dummy data
const data = [["apple","2.30"],["orange","4.5"]];
  //this where dummy data is displayed
  wrapper = document.getElementById("results");
  //loop over data to inject html
         for (i = 0; i <  data.length; i++) {
            let line = document.createElement("div");
              //it is just as simple to create id only it must start with alaphabet not number 
            line.id=`res${[i]}`;
//we created span tag to display price and this is what we will change. on that span we will create a data-price attribute which will hold orginial price and we will run claulcations using that number 
            line.innerHTML = `Category:${data[i][0]}
            -  Price:$<span data-price='${data[i][1]}'>${data[i][1]}</span>
            select discount >>   
            <a href="#70">%70</a>
    <a href="#60">%60</a>
    <a href="#50">%50</a> <a href="#50">100%</a>`; 
            wrapper.appendChild(line);
 //get all the links and apply event listner through loop   
    links = document.querySelectorAll('a');
for (i = 0; i <  links.length; i++) {
 links[i].addEventListener("click", function() {
 //capture link value and get number to be converted to percetnage  
percentage = event.target.innerText.match(/\d+/)[0]/100;
 //capture the data-price which is within same div as anchor link
pricetarget = event.target.parentElement.querySelector('[data-price]');
 //get value of data-price
 actualprice=  pricetarget.dataset.price;
 //run math and chnage the value on display
pricetarget.innerHTML=(actualprice*percentage).toFixed(2);
}

<div id="results">
</div>

<!DOCTYPE html>
    <meta charset="utf-8">
    <link   href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>
    <title>AJAX Search Example</title>
    <script>
    function fetch() {
      // (A) GET SEARCH TERM
      var data = new FormData();
      data.append('search', document.getElementById("search").value);
      data.append('ajax', 1);
      // (B) AJAX SEARCH REQUEST
      var xhr = new XMLHttpRequest();
      // (CHANGE1) USING ONREADYSTATECHNAGE INSTEAD OF ONLOAD
    xmlhttp.onreadystatechange =  function () {
        // (CHANGE2) we will check if ajax process has completed or not it goes from 1,2,3,4 means end. 
if(this.readyState == 4){
// (CHANGE2) when ready state comes to 4 we then check what response status was it if it is 200 good else error. 
if(this.status == 200){
    // (CHANGE3) MOVED ALL YIUR CODE HEREE 
// (CHANGE4) we need to use responseText instead of response becuase JSON comes as string that is why we are parsing it to be converted into array
var results = JSON.parse(this.responseText);
    //I have added just a meassure to check what thte out put is you can remove it latter. open dev console to get the result.
    console.log(results);
wrapper = document.getElementById("results");
    if (results.length > 0) {
          wrapper.innerHTML = "";
// (CHANGE5) UPDATED data ref with results 
for (i = 0; i <  results.length; i++) {
            let line = document.createElement("div");
              //it is just as simple to create id only it must start with alaphabet not number 
line.id=`res${[i]}`;
//we created span tag to display price and this is what we will change. on that span we will create a data-price attribute which will hold orginial price and we will run claulcations using that number 
//BIG CHANGE
//BIG CHANGE
//since after parsing invidual record will be in Js object so we dont need to access them like array  results[i]['item']
//we access them with dot notation results[i].item
line.innerHTML = `Category:${results[i].category} - OEM #:${results[i].oemnumber} - Price:$<span data-price='${results[i].price}'>${results[i].price}</span>
            select discount >>   
            <a href="#70">%70</a>
    <a href="#60">%60</a>
    <a href="#50">%50</a> <a href="#50">100%</a>`; 
            wrapper.appendChild(line);
 // (CHANGE6) We moved event listeners here so any newly added elements will be updated. 
 //get all the links and apply event listener through loop   
    var links = document.querySelectorAll('a');
      for ( ii = 0; ii <  links.length; ii++) {
         links[ii].addEventListener("click", function() {
       //capture link value and get number to be converted to percentage  
       var percentage = event.target.innerText.match(/\d+/)[0]/100;
 //capture the data-price which is within same div as anchor link
 var pricetarget = event.target.parentElement.querySelector('[data-price]');
 //get value of data-price
 var actualprice=  pricetarget.dataset.price;
 //run math and chnage the value on display
 pricetarget.innerHTML=(actualprice*percentage).toFixed(2);
        } else { wrapper.innerHTML = "No results found"; }
 } else {
 //if reponse code is other ethan 200 
alert('INTERNET  DEAD OR AJAX FAILED ');
// (CHANGE7) We moved open event to end so everything is ready before it fires.
xhr.open('POST', "2-search.php");
      xhr.send(data);
      return false;
    </script>
  </head>
    <!-- (A) SEARCH FORM -->
    <form ID='myForm' onsubmit="return fetch();">
      <h1>SEARCH FOR CATALYTIC CONVERTER</h1>
      <input type="text" id="search" required/>
      <input type="submit" value="Search"/>
    </form>

回答 1

Stack Overflow用户