Question

这是我的.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(){});

并在其中编写代码。但似乎没有任何效果。我哪里错了？

Answer 1

这里只是注意，如果您希望从ajax调用中获取json，则应该使用数据类型'JSON'。

预先以html格式填充Ajax中的数据

1 个答案: