Question

所以这是我的代码，我想知道为什么changeUp没有向我发送警报或设置变量值：

var selecteduname;
var xmlhttp;
function changeUp()
{
document.getElementById("useruname").onChange = function() {
    selecteduname = this.value;
    alert(selecteduname);
updateAdduser();
}


function loadXMLDoc()
{

if (window.XMLHttpRequest)
  {
 xmlhttp=new XMLHttpRequest();
}
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
}

function updateAdduser()
{loadXMLDoc();
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    var json = xmlhttp.responseText;
    var fields = JSON.parse(json);
    Object.keys(fields).forEach(function (name) {
  var input = document.getElementsByName(name);
  input.value = fields[name];
});
}
}
xmlhttp.open("GET", "ajaxuseradd.psp?uname="+selecteduname, true);
xmlhttp.send();
}

</script>

和

<form action="adduser.psp" method="get">
<fieldset>
    <label for="uname">Username:</label>
    <select name="uname" id="useruname" onChange="changeUp();">
<%
Blah blah blah Python Code to generate option values
%>


<%= options %> //More Python code, this actually puts them into the select box

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

Answer 1

如上所述，属性名称是“onchange”，而不是“onChange”。 Javascript区分大小写，所以这两者肯定是不同的。

此外，您发布的代码看起来在某个地方缺少}。事实上，changeUp函数中的所有内容都是如此。巧合的是，在结束脚本标记之前永远不会关闭。

然而，这里还有其他事情发生。标记中的这一行：

<select name="uname" id="useruname" onChange="changeUp();">

在代码中被此行彻底清除：

document.getElementById("useruname").onChange = function() {

以下是我如何修复它。首先，javascript：

function createAjax() {
    if(window.XMLHttpRequest)
        return new XMLHttpRequest();
    else
        return new ActiveXObject("Microsoft.XMLHTTP");
}


function updateAddUser(username) {
    var ajax = createAjax();
    ajax.onreadystatechange = function() {
        if(ajax.readyState == 4 && ajax.status == 200) {
            var json = ajax.responseText;
            var fields = JSON.parse(json);
            Object.keys(fields).forEach(function (name) {
                var input = document.getElementsByName(name);
                input.value = fields[name];
            });
        }
    }
    ajax.open("GET", "ajaxuseradd.psp?uname=" + username, true);
    ajax.send();
}

然后，您只需将HTML select标记更改为：

即可

<select name="uname" id="useruname" onchange="updateAddUser(this.value)">

说了这么多，我强烈建议你尝试jQuery之类的东西。它会使javascript代码变得如此简单：

$('#username').change(function(){
    $.get('ajaxuseradd.php', {uname:$(this).val()}, function(data, status, xhr) {
        $.each(data, function(key,value) {
            $('#'+key).val(value);
        });
    }, 'json');
});

是的，我知道这真的很简洁。更具说服力的是，可以这样写：

$('#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'
    })
});

Answer 2

你错过了一个大括号。尝试在代码上运行jslint。

其次，您正在尝试为方法changeUp中的onChange事件分配一个函数。而changeUp再次与首先调用的方法相同。可能会导致递归。

谢谢， RR

为什么Javascript不能用onChange更改变量？

2 个答案: