Попытка автоматически вставить текст в текстовые поля при выборе значения параметра

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я пытаюсь извлечь текст с другой страницы (ajaxuseradd.psp), которая находится в формате JSON. Затем я пытаюсь вставить этот текст в несколько текстовых полей и / или списков выбора. На данный момент я просто пытаюсь сделать текстовые поля.

Вот мой код, большая часть которого была предоставлена мне, потому что я не очень хорошо знаком с 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>
  

Вывод из ajaxuser.psp должен быть следующим или некоторым его вариантом. Это будет отображаться на странице ajaxuser.psp, когда используется аргумент ?uname=neverland, например:

 {"fname" : Neverland, "lname" : Conference Room, "email" : nobody@mediaG.com, "deptid" : deptid, "active" : active, "sentient" : sentient} 
  

Итак, мой код должен выглядеть так?

 <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>
  

РЕДАКТИРОВАТЬ: это все еще не работает — я выбираю раскрывающееся значение и НЕ ИЗМЕНЯЮ ни для одного из полей.

Комментарии:

1. Что происходит? Какие данные возвращаются?

2. Сработало ли мое решение ниже для вас?

Ответ №1:

Первое, что я вижу, это то, что вам нужно обернуть обработчик 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'
            })
        });
});
  

Кроме того, это:

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

Не будет работать так, как вы думаете. Вы получаете обратно ОДИН объект со свойствами, так что больше похоже на это:

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