使用AJAX onclick函数返回PHP Mysql查询

Question

So, I've been looking for a variety of sources to answer my question the last few day and thus have found nothing that's worked for me. I'll preface this further by saying that in regards to PHP and Javascript I started learning them like a week ago. I also understand that there will likely be better ways to format/write the code I'm about to post so please bear with me! :)

Essentially, I am trying to use a page name play.php in combination with AJAX to echo MYSQL queries back onto the page inside certain page elements.

So the code for main.js which is linked directly to play.php. I've tried about three different way that I've seen in various answers and have not gotten the information I wanted. I either get no response or I get undefined in all of them.

    function selectChar(uname, cname) 
{   
    var data = {
        username : uname,
        charname : cname
    };
    $.ajax({
        data : data,
        type : 'Get',
        url : 'start.php',
        dataType:"json",
        success : function (result) { 
        var data_character = JSON.parse(result);
        var cnamediv = document.getElementById('charactername');
        cnamediv.innerHTML = "";
        cnamediv.innerHTML = data_character[0].name;
        }
    }); 
}

The one above I see most often and the one below I just found earlier today. I get undefined when I attempt to call the array.

function selectChar(uname, cname) 
{
    $.get("start.php?username="+uname+"&charname="+cname).done(function(data_character){
        var cnamediv = document.getElementById('charactername');
        cnamediv.innerHTML = "";
        cnamediv.innerHTML = data_character[0].name;
    });
}

and finally the PHP code that queries the database and echos the data back.

<?php
    $conn = new mysqli($hostname,$username,$dbpassword, $dbname);

    if(!$conn) {
        die('Could not connect: ' . mysql_error());
    }

    $username = $_GET['username'];
    $charname = $_GET['charname'];

    $sql = "SELECT `id`, `username` FROM `users` WHERE `username` ='$username'";
    $result = mysqli_query($conn,$sql);

    //Send the array back as a JSON object
    echo json_encode($result);
?>

I'm not looking for someone to do work for me but I do require some guidance here. What would be an appropriate way to make this work? Is my code terribly incorrect? Am I missing an aspect of this altogether? Please, I would really seriously appreciate any help someone could give me!

P.S. I did just get done reviewing several other similar questions none of which seemed to help. Either there was never a conclusive outcome as to what worked for them or the solution didn't work when I attempted it.

Answer 1

try this:
php get post and return json_encode

    if(!$conn) {
        die('Could not connect: ' . mysql_error());
    }

    $username = $_POST['username'];
    $charname = $_POST['charname'];

    $sql = "SELECT `id`, `username` FROM `users` WHERE `username` ='$username'";
    $result = mysqli_query($conn,$sql);
    $rows = array();
    while($r = mysqli_fetch_assoc($result)) {
     $rows[] = $r;
     }
    //Send the array back as a JSON object
    echo json_encode($rows);
?>

JS ajax response and request

 $.ajax({
        data : data,
        type : 'POST',
        url : 'start.php',
        dataType:"json",
        success : function (result) { 
        console.log(result);
        document.getElementById('charactername').innerHTML = result[0].username;
        }
    });