javascript - AJAX POST 请求发送 JS 代码，而不是操作

Question

我最近开始使用 JS (JavaScript)，并尝试在我的平台上进行实时搜索。

输入:

<div class="row">
        <div class="col-lg-12">

            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">MarketPlace</h6>
                </div>
                <div class="card-body">
                            <div class="input-group mb-4 p-2">
                                <input type="text" placeholder="Search something..." id="search-box" name="manage_search" aria-describedby="button-addon3" class="form-control border-0" id="search-box">
                            </div>
                </div>
            </div>
        </div>
    </div>

Ajax POST 请求(在输入 HTML 代码下方):

<script type="text/javascript">
// AJAX call for autocomplete 
$(document).ready(function(){
    $("#search-box").keyup(function(){
        $.ajax({
        type: "POST",
        url: "process.php",
        data:'keyword='+$(this).val(),
        success: function(data){
            $("#suggesstion-box").show();
            $("#suggesstion-box").html(data);
            $("#search-box").css("background","#FFF");
            console.log(data);
        }
        });
    });
});
</script>

和process.php:

if(!empty($_POST["keyword"])) 
{
    global $db;
    $query ="SELECT * FROM thbs_marketplace WHERE m_title like '" . $_POST["keyword"] . "%' ORDER BY m_title LIMIT 3";
    $result = mysqli_query($db, $query)
    or die ("SQL error(addon (marketplace)):" .mysqli_error($db));
    if(@mysqli_num_rows($result) > 0) 
    {
        foreach($result as $name) 
        {
            ?>
            <script type="text/javascript">
                document.getElementById('suggestions').innerHTML = `<div class="card-container">
                <div class="card">

                <h2><b><?php echo $name['m_title']; ?></b><span class="badge badge-success"><?php echo $name['m_price']. " ". getWebVar('currency'); ?></span></h2>
                Type: <?php echo $name['m_type']; ?><br>
                Description: <?php echo $name['m_description']; ?><br>
                <img src="<?php echo $name['m_image'];?>" height="200px" width="400px" style="left: 5px;"alt="<?php echo $m_title;?>">
                <br>
                <a class="btn btn-primary" href="client_area?addon_use=MarketPlace&add_cart=<?php echo $name['m_id'];?>">Add to cart</a>
                </div>

                </div>`;

                </script> <?php
         }
    } 
} 
else 
    { 
        ?> <script> document.getElementById('suggestions').innerHTML = ``; </script> 
    <? 
    }
?>

我知道，我知道，不要使用 global $db ，但无论如何，在互联网上搜索但一无所获，有人可以帮助我吗？

浏览器控制台:

<script type="text/javascript">
                document.getElementById('suggestions').innerHTML = `<div class="card-container">
                <div class="card">

                <h2><b>FPings Hosting Theme</b><span class="badge badge-success">0.00 EUR</span></h2>
                Type: Theme<br>
                Description: A simple theme designed for THBS hosting providers.<br>
                <img src="https://bruh-i-do-not-make-advertising.com/content/addons/MarketPlace/market_content/images/1.png" height="200px" width="400px" style="left: 5px;"alt="">
                <br>
                <a class="btn btn-primary" href="client_area?addon_use=MarketPlace&add_cart=1">Add to cart</a>
                </div>

                </div>`;

                </script> 

谢谢大家! ^-^

Answer 1

将 data:'keyword='+$(this).val(), 更改为 data:{keyword: $(this).val()}因为你从 POST 开始，而不是 GET