Question

我的代码有些奇怪。老实说，我是从某人那里得到的，我会尝试使其适应我的需求。所以问题是当我单击提取按钮时，数据不显示。这里有人可以告诉我代码有什么问题吗？任何相关的答案将不胜感激。提前致谢。

这是我的代码

<script type="text/javascript">
$(document).ready(function() {
    function myrequest(e) {
        var name = $('.username').val();
        $.ajax({
            method: "GET",
            url: "http://localhost/spdb/debug/autofill.php", /* online, change this to your real url */
            data: {
                username: name
            },
	
            success: function( responseObject ) {
                alert('success');
                $('#posts').val(responseObject.level);
                $('#joindate').val(responseObject.last_login);
                
            },
            failure: function() {
                alert('fail');
            }
        });
    }
    
    $('#fetchFields').click(function(e) {
        e.preventDefault();
        myrequest();
    });
});
</script>

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" type="text/css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
    </head>
    <body>
        <form method="POST" action="?act=proc">
            <fieldset>
                <legend>Form</legend>
                <label for="username">Username: </label>
                <input type="text" name="username" id="username"> 
                <button id="fetchFields">fetch</button>
                <label for="posts">Posts: </label>
                <input type="text" size="20" name="posts" id="posts">
                <label for="joindate">Joindate: </label>
                <input type="text" size="20" name="joindate" id="joindate">
                <p><input type="submit" value="Submit" name="submitBtn"></p>

            </fieldset>
        </form>
    </body>
</html>

这是PHP代码：

$return = mysqli_query($konek, "SELECT * FROM tb_auth WHERE username ='admin' LIMIT 1");
$rows = mysqli_fetch_array($return);
$formattedData = json_encode($rows);
print $formattedData;`

这是PHP代码的结果：

{
    "0":"1",
    "id_auth":"1",
    "1":"TRC-US001",
    "auth_code":"TRC-US001",
    "2":"admin",
    "username":"admin",
    "3":"5f4dcc3b5aa765d61d8327deb882cf99",
    "password":"5f4dcc3b5aa765d61d8327deb882cf99",
    "4":"1",
    "level":"1",
    "5":"2018-07-05 13:55:19.200878",
    "last_login":"2018-07-05 13:55:19.200878",
    "6":"1",
    "status":"1"
}

这是图片： result

Answer 1

希望这可以为您提供帮助

首先，我们需要对html和php代码进行一些修改：

<!-- doctype is mandatory -->
<!DOCTYPE html>
<!-- language en -->
<html lang="en">
    <head>
        <!-- title also is mandatory -->
        <title>tilte of your project</title>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <form method="POST" action="?act=proc">
            <fieldset>
                <legend>Form</legend>
                <label for="username">Username: </label>
                <input type="text" name="username" id="username"> 
                <button id="fetchFields">fetch</button>
                <label for="posts">Posts: </label>
                <input type="text" size="20" name="posts" id="posts">
                <label for="joindate">Joindate: </label>
                <input type="text" size="20" name="joindate" id="joindate">
                <p><input type="submit" value="Submit" name="submitBtn"></p>
            </fieldset>
        </form>
        <!-- put all your javascript before the end of the body -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
        <script>
            $(document).ready(function() {
                function myrequest(e) {
                    // use $('#username') to select by id instead of $('.username') used to select by class
                    var name = $('#username').val();
                    $.ajax({
                        method: "GET",
                        url: "http://localhost/spdb/debug/autofill.php", /* online, change this to your real url */
                        data: {
                            username: name
                        },
                        dataType: 'json', /* this is not mandatory */
                        success: function( responseObject ) {
                            console.log('success');
                            $('#posts').val(responseObject.level);
                            $('#joindate').val(responseObject.last_login);

                        },
                        failure: function() {
                            alert('fail');
                        }
                    });
                }

                $('#fetchFields').click(function(e) {
                    e.preventDefault();
                    myrequest();
                });
            });
        </script>
    </body>
</html>

php代码：

// this line is very important, by using this line
// the browser can recognize that the data sent from
// the server as a json object.
header("Content-type: application/json");

$formattedData  = [];

if (isset($_GET['username'])) {
    $username       = trim($_GET['username']);
    // to be sure that the username is not empty
    if(empty($username)) {
        print json_encode($formattedData);
        exit;
    }
    $konek          = mysqli_connect($sql_db_host, $sql_db_user, $sql_db_pass, $sql_db_name, 3306);
    $return         = mysqli_query($konek, "SELECT * FROM tb_auth WHERE username = '" . $username . "' LIMIT 1");
    // use mysqli_fetch_assoc instead of mysqli_fetch_array
    // $rows           = mysqli_fetch_array($return);
    $rows           = mysqli_fetch_assoc($return);
    $formattedData  = json_encode($rows);
    // very important every connection created need to be closed
    mysqli_close($konek);
}
print $formattedData;

Answer 2

在您的html代码中，有一个ID为username的输入。在Javascript中，搜索此行代码var name = $('.username').val();。将.更改为#。应该是var name = $('#username').val();。

.username适用于所有具有username类的标签。

#username将搜索ID为username的标签。

Answer 3

尝试使用以下方法将responseObject解析为json

responseObject = JSON.parse（responseObject）;

成功功能中的

使用php ajax val（）从数据库填充数据

3 个答案: