这是我的 .html 文件
<!DOCTYPE html>
<html>
<head>
<link href="css/metro-bootstrap.css" rel="stylesheet">
<link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
<link href="css/iconFont.css" rel="stylesheet">
<link href="css/docs.css" rel="stylesheet">
<script type= "text/javascript" src= "js/updateAgentForm.js"></script>
<title>Separate Product</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript">
var a_id;
var uname;
var pwd;
var name;
var address;
var email;
var dob;
if (location.search) {
a_id = location.search.substring(1);
document.write(a_id);
}
$.ajax({
type:'GET',
url: "http://192.168.1.5:8080/SurveyApp3/getSingleAgent?a_id="+a_id,
dataType: 'html',
success:function(data, status){
var newData= JSON.parse(data);
uname= newData.username;
this.pwd= newData.pwd;
this.name= newData.name;
this.address= newData.address;
email= newData.emailId;
this.dob= newData.dob;
console.log(data);
console.log(uname);
console.log(this.pwd);
console.log(this.name);
console.log(this.address);
console.log(email);
console.log(this.dob);
},
error:function(xhr, status, errorThrown){
console.log(xhr);
console.log(status);
console.log(errorThrown);
}
});
</script>
</head>
<body class="metro">
<header class="bg-dark" data-load="header.html"></header>
<div class="container">
<h2>
AGENT UPDATE FORM
</h2>
<br><br>
<div>
<form>
<label>Name*</label>
<div class="input-control text" data-role="input-control">
<input id="name" type="text" placeholder="Enter name" value= "" required>
</div>
<label>10 digit Mobile number(To be used as Username)*</label>
<div class="input-control text" data-role="input-control">
<input id= "uname" type="text" placeholder="Enter username(mobile number)" value= "" autofocus required>
</div>
<label>Choose Password*</label>
<div class="input-control text" data-role="input-control">
<input id= "pwd1" type="password" placeholder="Enter password" value= "" required>
</div>
<label>Retype Password*</label>
<div class="input-control text" data-role="input-control">
<input id= "pwd2" type="password" placeholder="Retype password" value= "" required>
</div>
<label>Email Id*</label>
<div class="input-control text" data-role="input-control">
<input id= "email" type="text" placeholder="Enter email" value= "" required>
</div>
<label>Date of Birth(Enter as yyyy-mm-dd)*</label>
<div class="input-control text" data-role="input-control">
<input id= "dob" type="text" placeholder="Enter Dob" value= "" required>
</div>
<label>Permanent Address*</label>
<div class="input-control text" data-role="input-control">
<input id= "addr" type="text" placeholder="Enter Address" value= "" required>
</div>
<br>
<br>
<br>
<button class="button large primary" type="submit">Submit</button>
</form>
</div>
<div>
<p id="invalid"></p>
</div>
</div>
<script type= "text/javascript">
$("#name").val(this.name);
$("#uname").val(uname);
$("#pwd1").val(pwd);
$("#pwd2").val(pwd);
$("#email").val(this.email);
$("#dob").val(this.dob);
$("#addr").val(address);
</script>
</body>
</html>
我需要使用从 ajax 请求中提取的值预先填充表单。 console.log 正在打印所有变量的正确值。我无法弄清楚的问题是预填充过程失败。表格内没有任何内容被填写。
我也尝试过使用
$( document ).on("pageload", function(){});
并在其中编写代码。但似乎没有任何作用。 我哪里出错了？
最佳答案
这里请注意，如果您希望从 ajax 调用中获取 json，则应该使用数据类型“JSON”。
关于javascript - 以 html 形式预先填充来自 Ajax 的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25144306/