Javascript 基于jqueryphp（ajax？）从数据库获取数据_Javascript_Php_Jquery

Javascript 基于jqueryphp（ajax？）从数据库获取数据

javascript php jquery

Javascript 基于jqueryphp（ajax？）从数据库获取数据,javascript,php,jquery,Javascript,Php,Jquery,我是新手，尝试创建一个网站，一步一步地学习以下是我想做的： 1-用户单击网站创建结果并将其存储在变量中的选项（例如，结果=配备2GB ram、2GB图形卡、i5处理器的笔记本电脑） 2-我有一个900多行的数据库，每行包含笔记本电脑名称、url、img url、规格等（大量数据） 3-处理网站后，它将在javaScript/Jquery脚本中返回以下内容： let ram = '2GB'; let graphCard = '2GB'; let processor = 'i5' 4-转到数据库

我是新手，尝试创建一个网站，一步一步地学习

以下是我想做的：

1-用户单击网站创建结果并将其存储在变量中的选项（例如，结果=配备2GB ram、2GB图形卡、i5处理器的笔记本电脑）
2-我有一个900多行的数据库，每行包含笔记本电脑名称、url、img url、规格等（大量数据）
3-处理网站后，它将在javaScript/Jquery脚本中返回以下内容：

let ram = '2GB';
let graphCard = '2GB';
let processor = 'i5'

4-转到数据库，查找所有符合条件的行，并将这些行的值存储到配置文件中，例如（我想我需要将它们存储在JSON中）：

5-从那里，获取这些值将显示在Jquery/JavaScript将插入的结果页面中，例如：

<p id=result1></p>
<p id=result2></p>
<p id=result2></p>

表格内容如下：

laptop_id - laptop_name - laptop_img  - laptop_url  - laptop_ram
01        - asus-x100   - https://img - https://bla - 2GB

---------------------编辑2------------------------------------------------

所以我实际上让它工作了，下面的例子与上面的例子不同，但核心功能是相同的（基本上是通过按钮获取数据，使用该数据在数据库中过滤并输出）。我没有包括的是.js更改POST值，但这非常简单

index.php：

<?php 
    include 'dbh.php';
?>

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script >GET JQUERY AJAX SRC etc etc</script>

    <script>
        $(document).ready(function() {
            $('#btn').click(function() {
                $('#finalResult').load(data);
            });
        })
    </script>

</head>
<body>

<div id="finalResult">
    <?php

        $sql = 'SELECT * FROM laptops'
        $result = mysqli_query($conn, $sql);    
        }    
    ?>
</div>
<button id="btn">Load Result</button>

</body>
</html>

<!DOCTYPE html>
<html>
<head>  
    <title>TESTING</title>
</head>
<body>
<!-------- this form will be replaced by button which .js will define and adjust the value ---->
   <!---- That value will be used to filter in database--->
<form action="getdata.php" method="POST">
<input type='hidden' name='storrage' value='1GB'/> 
<input type="submit">
</form>
<!--- Before submitting .js will change the values of the inputs--->

</body>
</html>


测试

getdata.php：

<?php
    include_once 'testing/databaseconn.php';

    $ramResult = $_POST['storrage'];
    echo "this is ramResult " . $ramResult . "<br>";
    $sql = "SELECT * FROM laptops WHERE ram= '$ramResult' ;";
    $result = mysqli_query($conn, $sql);

    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            $urlResult = $row['img'];            
        }
    }
?>

<html>
<head>  
    <title>Result page</title>
</head>
<body>
<p>test2</p>
<p>
    <img src="<?php print $urlResult; ?>">
</p>


</body>
</html>


结果页
测试2

">

getdatabaseconn.php：

<?php

$dbServerName = "localhost"; //because of MAMP
$dbUsername = "root";
$dbPassword = "";
$dnName = "sitedatabase";

$conn = mysqli_connect($dbServerName, $dbUsername, $dbPassword, $dnName);

?>

您需要回答的是，您是否同意搜索页面/响应页面方法，或者您是否需要将其全部放在同一页面上？虽然ajax很酷，但作为一名新手，我会暂时让您远离它，直到您获得一些经验。很多（大多数？）零售网站使用搜索/响应页面方法。因此，第一个页面基本上是一个表单，第二个页面将采用提交的GET（不要使用post进行搜索）变量并显示结果。我建议您了解MVC。Laravel框架实现MVC体系结构。您可以用更有条理的方式构建类似的东西。它会像您的步骤一样工作。对于过滤，使用js和php；JavaScript方便用户，使用php确保服务器安全。对于您的问题，部分问题是你不知道你不知道的；）我想我有足够的资源来组合一些东西，为你指明正确的方向。要知道这需要一些时间；我的蜜月清单很大，所以我的时间有限；）根据REST，HTTP方法对应于动词：Post=>Create，Get=>Read，put/Patch=>Update，Delete=>Delete。不幸的是，浏览器默认为GET和POST。因此，经验法则是：读取请求是GET，任何更改数据的操作都是POST。任何时候使用POST时，您都需要在存储/更改数据后立即执行重定向，以便在用户点击后退按钮时不会重新发布。这称为PRG（Post Redirect Get）模式。对我有帮助的是，请尽可能简洁地查看1）步骤1，以及2）您的预期结果页面。您的步骤3和步骤4对我来说意义不大；“在处理网站之后。。。“你的意思是处理用户输入？这将使步骤3和步骤4基本相同。第五步，就这点而言。同时，请查看结构思想和javascript（jquery）概念

laptop_id - laptop_name - laptop_img  - laptop_url  - laptop_ram
01        - asus-x100   - https://img - https://bla - 2GB

<!DOCTYPE html>
<html>
<head>  
    <title>TESTING</title>
</head>
<body>
<!-------- this form will be replaced by button which .js will define and adjust the value ---->
   <!---- That value will be used to filter in database--->
<form action="getdata.php" method="POST">
<input type='hidden' name='storrage' value='1GB'/> 
<input type="submit">
</form>
<!--- Before submitting .js will change the values of the inputs--->

</body>
</html>

<?php
    include_once 'testing/databaseconn.php';

    $ramResult = $_POST['storrage'];
    echo "this is ramResult " . $ramResult . "<br>";
    $sql = "SELECT * FROM laptops WHERE ram= '$ramResult' ;";
    $result = mysqli_query($conn, $sql);

    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            $urlResult = $row['img'];            
        }
    }
?>

<html>
<head>  
    <title>Result page</title>
</head>
<body>
<p>test2</p>
<p>
    <img src="<?php print $urlResult; ?>">
</p>


</body>
</html>

<?php

$dbServerName = "localhost"; //because of MAMP
$dbUsername = "root";
$dbPassword = "";
$dnName = "sitedatabase";

$conn = mysqli_connect($dbServerName, $dbUsername, $dbPassword, $dnName);

?>