使用 jquery ajax 从链接获取数据

Question

我有以下链接；

www.example.com/profile.php?u=aaron

我想使用 ajax 获取 u= 以回显在我的数据库中以名称 aaron 保存的详细信息。但是，当我尝试使用我的 ajax 代码来实现这一点时，我最终会得到一个空白页面。

我的 AJAX 代码；

$(document).ready(function() {
    $.ajax({    
        type: "GET",
        url: "fetch.php",             
        data: "u=":usr,   
        success: function(d) {                    
             $("#detail").html(d); 
        }
    });
});

fetch.php;

<?php  
    // connect to db
    include 'db.php';

    if (isset($_GET['usr'])) {
        $user_query = "SELECT details FROM users_det WHERE name = ?";
        if ($stmt = mysqli_prepare($db_var, $user_query)) {
            mysqli_stmt_bind_param($stmt, "s", $_GET['usr']);
            mysqli_stmt_execute($stmt);
            mysqli_stmt_bind_result($stmt, $details);
            while (mysqli_stmt_fetch($stmt)) {
                // fetch results
            }

            // close statement
            mysqli_stmt_close($stmt);
        }

        // echo user details
        echo $details;
    }
?>

我的 HTML 代码；

<div id="detail"></div>

以及我的 HTML 代码中的以下 PHP 代码；

  <?php 
    $user = preg_replace('#[^a-zA-Z0-9_.]#i','',$_GET['u']); 
    ?>

我想知道为什么 ajax 没有从链接中获取名称。

Answer 1

您的代码中有多个错误

首先你应该使用data: {u: usr}, 而不是data: "u=":usr,

$(document).ready(function() {
    $.ajax({    
        type: "GET",
        url: "fetch.php",             
        data: {u: usr},   
        success: function(d) {                    
             $("#detail").html(d); 
        }
    });
});

在fetch.php 文件中的第二个你应该得到参数$_GET['u'] 而不是$_GET['usr']

<?php  
    // connect to db
    include 'db.php';

    if (isset($_GET['u'])) {
        $user_query = "SELECT details FROM users_det WHERE name = ?";
        if ($stmt = mysqli_prepare($db_var, $user_query)) {
            mysqli_stmt_bind_param($stmt, "s", $_GET['u']); //also change `usr` in this line
            mysqli_stmt_execute($stmt);
            mysqli_stmt_bind_result($stmt, $details);
            while (mysqli_stmt_fetch($stmt)) {
                // fetch results
            }

            // close statement
            mysqli_stmt_close($stmt);
        }

        // echo user details
        echo $details;
    }
?>

为了调试，您可以在 ajax 成功响应中使用 console.log(d)

Answer 2

首先用window.location.href获取完整的url，实例化一个url对象，然后通过javascript中的searchParams获取它的参数。

脚本：

var urlString = window.location.href; //www.example.com/profile.php?u=aaron
var url = new URL(urlString);
var usr = url.searchParams.get("u");

$(document).ready(function() {
    $.ajax({    
        type: "GET",
        url: "fetch.php",             
        data: "u="+usr,   
        success: function(d) {                    
             $("#detail").html(d); 
        }
    });
});

PHP：

<?php  
    // connect to db
    include 'db.php';

    if (isset($_GET['u'])) {
        $user_query = "SELECT details FROM users_det WHERE name = ?";
        if ($stmt = mysqli_prepare($db_var, $user_query)) {
            mysqli_stmt_bind_param($stmt, "s", $_GET['u']);
            mysqli_stmt_execute($stmt);
            mysqli_stmt_bind_result($stmt, $details);
            while (mysqli_stmt_fetch($stmt)) {
                // fetch results
            }

            // close statement
            mysqli_stmt_close($stmt);
        }

        // echo user details
        echo $details;
    }
?>