Javascript 如何使用jquery从同一页面上的数据库记录填充表单

我在数据库中有一些联系人记录，我查询了数据库并将数据库中的联系人添加到页面的侧栏中。现在，当我单击profile按钮时，我想在主页上的表单中查看联系人的完整详细信息。我发现使用jQuery很难将联系人列表中的值获取到主页上的表单中

我所做的是创建一些隐藏字段来存储每个记录的值，然后使用jQuery将这些值添加到主窗体中

<div class="navbar-default sidebar" role="navigation">
    <div class="sidebar-nav navbar-collapse">
        <ul class="nav" id="side-menu">
            <li class="sidebar-search">
                <div class="input-group custom-search-form">
                    <input type="text" class="form-control"  placeholder="Search...">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>
                    </div>
                    <!-- /input-group -->
                </li>
                <?php 
                    mysql_select_db('****webdb',  mysql_connect('*******','****_is***','****'))or die(mysql_error());

                    $query=mysql_query("SELECT * FROM `w******`");

                    while( $row=mysql_fetch_array($query))
                    {
                        $id=$row['id'];
                        $name= $row['first_name'].' '.$row['last_name'];
                ?>

            <input type="hidden" name="uname1" id="uname1" value="<?php echo $row['username']; ?>" />
            <input type="hidden" name="password1" id="password1" value="<?php echo $row['password']; ?>" />
            <input type="hidden" name="fname1" id="fname1" value="<?php echo $row['first_name']; ?>" />
            <input type="hidden" name="lname1" id="lname1" value="<?php echo $row['last_name']; ?>" />
            <input type="hidden" name="str1" id="str1" value="<?php echo $row['street']; ?>" />
            <input type="hidden" name="city1" id="city1" value="<?php echo $row['city']; ?>" />
            <input type="hidden" name="pcode1" id="pcode1" value="<?php echo $row['post_code']; ?>" />
            <input type="hidden" name="country1" id="country1" value="<?php echo $row['country']; ?>" />
            <input type="hidden" name="tel1" id="tel1" value="<?php echo $row['telephone']; ?>" />
                <input type="hidden" name="email1" id="email1" value="<?php echo $row['email']; ?>" />
                <input type="hidden" name="gsm1" id="gsm1" value="<?php echo $row['gsm']; ?>" />
                <input type="hidden" name="jtitle1" id="jtitle1" value="<?php echo $row['job_title']; ?>" />
                <input type="hidden" name="company1" id="company1" value="<?php echo $row['company']; ?>" />
                <input type="hidden" name="url1" id="url1" value="<?php echo $row['url']; ?>" />
                <input type="hidden" name="msn1" id="msn1" value="<?php echo $row['msn']; ?>" />
                <input type="hidden" name="skype1" id="skype1" value="<?php echo $row['skype']; ?>" /
                      <li class="user<?php echo $id ?>">
                            <a><i class="fa fa-user fa-fw"></i><?php echo $name; ?> &nbsp;&nbsp; <button class="btn btn-info" id="checkClick" onclick="myFunction()">Profile</button></a> 
                        </li>
<?php } ?>
                    </ul>
                </div>
                <!-- /.sidebar-collapse -->
            </div>
            <!-- /.navbar-static-side -->
        </nav>

    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">Dashboard</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="row">
           <form id="signUp" class="form-horizontal cmxform" name="signUp" action="">
            <div class="form-group"><label class="col-sm-2 control-label" for="username">Username<b style="color:red;font-family: serif;">*</b></label>
            <div class="col-sm-10"><input id="username" class="form-control"  name="uname" type="text" /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="password">Password<b style="color:red;font-family: serif;">*</b></label>
            <div class="col-sm-10"><input id="password" class="form-control"  name="password" type="password"  /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="firstname">First Name<b style="color:red;font-family: serif;">*</b></label>
            <div class="col-sm-10"><input id="fname" class="form-control"  name="fname" type="text" /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="lastname">Last Name<b style="color:red;font-family: serif;">*</b></label>
            <div class="col-sm-10"><input id="lname" class="form-control"  name="lname" type="text" /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="street">Street</label>
            <div class="col-sm-10"><input id="str" class="form-control"  name="str" type="text" /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="city">City</label>
            <div class="col-sm-10"><input id="city" class="form-control"  name="city" type="text" /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="postcode">Post Code</label>
            <div class="col-sm-10"><input id="postcode" class="form-control"  name="pcode" type="text"  /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="country">Country<b style="color:red;font-family: serif;">*</b></label>
            <div class="col-sm-10"><select class="form-control"  name="country">
            <option selected="selected" id="country" ></option>
            </select></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="telephone">Telephone<b style="color:red;font-family: serif;">*</b></label>
            <div class="col-sm-10"><input id="tel"  class="form-control"  name="tel" type="tel"  /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="email">Email<b style="color:red;font-family: serif;">*</b></label>
            <div class="col-sm-10"><input id="email" class="form-control"  name="email" type="email"  /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="gsm">GSM</label>
            <div class="col-sm-10"><input id="gsm" class="form-control"  name="gsm" type="tel"  /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="jobtitle">Job Title</label>
            <div class="col-sm-10"><input id="jobtitle" class="form-control"  name="jtitle" type="text"  /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="company">Company</label>
            <div class="col-sm-10"><input id="company" class="form-control"  name="company" type="text" /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="url">URL</label>
            <div class="col-sm-10"><input id="url" class="form-control"  name="url" type="url" /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="msnmessenger">MSN Messenger</label>
            <div class="col-sm-10"><input id="msnmessenger" class="form-control"  name="msn" type="text"  /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="skype">Skype</label>
            <div class="col-sm-10"><input id="skype" class="form-control"  name="skype" type="text" /></div>
            </div>
            </form>

        </div>
        <!-- /.row -->
    </div>
    <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->

<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>

<!-- Morris Charts JavaScript -->
<script src="../bower_components/raphael/raphael-min.js"></script>
<script src="../bower_components/morrisjs/morris.min.js"></script>
<script src="../js/morris-data.js"></script>

<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<script>
function myFunction() {
    var username = ("#uname1").val();
    $("#uname").val(username);
    var lname = ("#lname1").val();
    $("#lname").val(lname);
    var str = ("#str1").val();
    $("#str").val(str);
    var city = ("#city1").val();
    $("#city").val(city);
    var pcode = ("#pcode1").val();
    $("#pcode").val(pcode);
    var country = ("#country1").val();
    $("#country").val(country);
    var tel = ("#tel1").val();
    $("#tel").val(tel);
    var email = ("#email1").val();
    $("#email").val(email);
    var gsm = ("#gsm1").val();
    $("#gsm").val(gsm);
    var jtitle = ("#jtitle1").val();
    $("#jtitle").val(jtitle);
    var company = ("#company1").val();
    $("#company").val(company);
    var url = ("#url").val();
    $("#url").val(url);
    var msn = ("#msn1").val();
    $("#msn").val(msn);
    var skype = ("#skype1").val();
    $("#skype").val(skype); 
  }
</script>

---

第一点需要关注的是，您有隐藏的输入，其中包含敏感信息，这永远都不是好的。我会像你们现在做的一样，用你们最初通话中的信息填充你们的侧边栏。之后，用户单击侧栏上的联系人后，对数据库进行ajax调用，以获取所有联系人信息

这里有几种可能的解决方案

首先，您需要切换到mysqli或PDO而不是mysql。 因为您已经在使用mysql，所以mysqli非常类似，不需要花费太多精力进行更改

其次，如果不了解项目的全部范围，就很难确定您的最佳需求

但是，以下是一些解决方案

您可以使用$\u会话变量并将结果保存在数组中 使用PHP。然后可以循环数组的索引以生成 主页上所需的详细信息

单击某个名称进行收集时，可以再次查询数据库 更详细的信息

您可以使用ajax再次查询数据库并提取数据 异步的。与前面的建议类似

---

您是否尝试过创建一个新的php文件，其中包含查询数据库以选择所需信息的代码，然后使用jquery$.post；或$。获取发送用户id或其他信息。然后在$.get的回调函数中；或$.post；您可以执行$mydiv.loaddata；谢谢我想到了使用ajax。Ajax可能是最好的解决方案。但是，如果它看起来是技术性的，那么每次选择发送一个新的查询不会破坏您的带宽！除非您正在拨号，否则执行ajax调用不是一个挑战，而是如何从ajax调用的结果中检索值。如果我可以从ajax调用的结果中获得值，那么我就可以使用jquery将它们添加到表单字段中。我已经使用ajax从数据库中检索了一个值，但并不是很多值。这就是现在的挑战，cybak.7pz.me/contact_book/pages/index.php我已经完成了ajax调用，并在控制台上输出了所需的消息和警报，我如何分割结果并将它们附加到我的表单元素感谢@Joe，我能够使用ajax调用来完成我想要的事情。