讓Javascript插入我的文本框中的值（AJAX！）

所以我有這個代碼，我試圖用它來更新我的表單文本框，當我選擇不同的下拉用戶。讓Javascript插入我的文本框中的值（AJAX！）

下面的代碼：

<script type="text/javascript"> 
document.getElementById("useruname").onchange = function() { 
var selecteduname = this.value; 
} 

var xmlhttp; 
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?=", true); 
xmlhttp.send(); 
} 

</script> 
<form action="adduser.psp" method="get"> 
<fieldset> 
<label for="uname">Username:</label> 
<select name="uname" id="useruname" onChange="updateAdduser();"> 
<% 
import MySQLdb 

db = MySQLdb.connect("localhost", "login", "password", "somethingelse") 
c = db.cursor() 

c.execute("""SELECT user from employees;""") 

tup = c.fetchall() 

tupstr = str(tup) 

tupstr = tupstr.replace("(", "").replace("'", "").replace(")", "").replace(",,", ",").replace("'", "").replace("' ", "'").replace(", ", ",") 

tupstr = tupstr.rstrip(",") 

numlist = tupstr.split(",") 

optionlist = ['<option value="%s">%s</option>' % (x, x) for x in numlist] 

options = "\n".join(optionlist) 

%> 


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

來源

2011-11-03 Andrew Alexander

......那麼，什麼是它做的，它不應該，或者不這樣做，它應注意什麼？請更準確地說明「更新我的表單文本框」的含義。另外，我假設你在這裏使用某種模板引擎，並且該代碼段中間的Python實際上被執行並且插入了結果？您可能還想提及您的模板引擎。至於實際的AJAX工作，你有沒有考慮過使用像jQuery這樣的庫？ –

它應該用來自服務器的值填充文本框。即他們會預先加載，當您選擇一個選項值與該用戶的信息，然後可以編輯和重新提交。我沒有使用模板引擎，只有mod_python與Python服務器頁面。 –

我會認真考慮遷移到使用客戶端JavaScript庫，例如jQuery。

您的代碼將被簡化爲這樣的事：

<script type="text/javascript"> 
$("#useruname").change = function() { 
    var selecteduname = this.value; 
} 


function updateAdduser() 
{ 
    var fields = null; 
    $.ajax(url: "ajaxuseradd.psp?=", 
      dataType = 'json', 
     success: function(data){ 
      fields = data; 
      Object.keys(fields).forEach(function (name) { 
       var input = $(name); 
       input.value = fields[name]; 
      }); 
     } 
    }); 
}  
</script> 

<form action="adduser.psp" method="get"> 
<fieldset> 
<label for="uname">Username:</label> 
<select name="uname" id="useruname" onChange="updateAdduser();"> 
<% 
import MySQLdb 

db = 
c = db.cursor() 

c.execute("""SELECT user from employees;""") 

tup = c.fetchall() 

tupstr = str(tup) 

tupstr = tupstr.replace("(", "").replace("'", "").replace(")", "").replace(",,", ",").replace("'", "").replace("' ", "'").replace(", ", ",") 

tupstr = tupstr.rstrip(",") 

numlist = tupstr.split(",") 

optionlist = ['<option value="%s">%s</option>' % (x, x) for x in numlist] 

options = "\n".join(optionlist) 

%> 


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

來源

2011-11-03 18:02:10

讓Javascript插入我的文本框中的值（AJAX！）

回答

相關問題