Javascript 尝试在选择选项值时自动将文本插入文本框

我试图从另一个JSON格式的页面（ajaxuseradd.psp）中提取文本。然后我尝试将此文本插入多个文本框和/或选择列表。就目前而言，我只是在尝试创建文本框

这是我的代码，其中很多代码都是给我的，因为我对jQuery不太熟悉：

<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$('#username').change(function() {
    var userName = $(this).val();
    $.ajax({
        type: 'GET',
        url: 'ajaxuseradd.php',
        data: {
            uname: userName
        },
        success: function(data, status, xhr) {
            $.each(data, function(key, value) {
                $('#' + key).val(value);
            });
        },
        dataType: 'json'
    })
});

</script>
<form action="adduser.psp" method="get">
<fieldset>
    <label for="uname">Username:</label>
    <select name="uname" id="useruname" onchange="updateAdduser();">
<%
Random Python Code That Isn't Important But Generates Option Values
%>


<%= options %>

</select>

</fieldset>
<fieldset>
    <label for="fname">First Name:</label>
    <input type="text" name="fname" />
</fieldset>
<fieldset>
    <label for="lname">Last Name:</label>
    <input type="text" name="lname" />
</fieldset>
<fieldset>
    <label for="email">Email:</label>
    <input type="text" name="email">
</fieldset>

那么我的代码应该是这样的

<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#username').change(function() {
    var userName = $(this).val();
        $.ajax({
            type: 'GET',
            url: 'ajaxuseradd.php',
            data: {
                uname: userName
            },
            success: function(data, status, xhr) {
        $("#fname").val(data.fname);
                });
            },
            dataType: 'json'
            })
        });
});


</script>

$（文档）.ready（函数（）{
$（'#username'）。更改（函数（）{
var userName=$（this.val（）；
$.ajax({
键入：“GET”，
url:'ajaxuseradd.php'，
数据：{
uname:userName
},
成功：功能（数据、状态、xhr）{
$（“#fname”）.val（data.fname）；
});
},
数据类型：“json”
})
});
});

---

编辑：这仍然不起作用-我选择了一个下拉值，并且没有对任何字段进行任何更改。

我看到的第一件事是，您需要将onchange处理程序包装在以下内容中：

$(document).ready(function () {

});

看起来是这样的：

$(document).ready(function () {
    $('#username').change(function() {
    var userName = $(this).val();
        $.ajax({
            type: 'GET',
            url: 'ajaxuseradd.php',
            data: {
                uname: userName
            },
            success: function(data, status, xhr) {
                $.each(data, function(key, value) {
                    $('#' + key).val(value);
                });
            },
            dataType: 'json'
            })
        });
});

success: function(data, status, xhr) {
    $("#fname").val(data.fname);
    ....
},

此外，这：

$.each(data, function(key, value) {
    $('#' + key).val(value);
});

不会像你想的那样工作。返回一个具有属性的对象，因此更像这样：

$(document).ready(function () {
    $('#username').change(function() {
    var userName = $(this).val();
        $.ajax({
            type: 'GET',
            url: 'ajaxuseradd.php',
            data: {
                uname: userName
            },
            success: function(data, status, xhr) {
                $.each(data, function(key, value) {
                    $('#' + key).val(value);
                });
            },
            dataType: 'json'
            })
        });
});

success: function(data, status, xhr) {
    $("#fname").val(data.fname);
    ....
},

---

会发生什么？返回的数据是什么？我下面的解决方案对您有效吗？