Question

我创建了一个登录表单。它包括客户名称，用户名，密码。客户名称是不同客户的列表。我必须从数据库更新列表。任何人都可以帮助解决这个问题。谢谢。我登录页面的html代码是，

<div id="divcust" class="form-group">
            <select class="form-control" id="customerlist" placeholder="Customer Name" autofocus required>
                <option value="">Select Customer</option>
            </select>
        </div>
  <div id="divusr" class="form-group has-feedback">
    <input type="text" id="txtUid" name="username" data-validation="alphanumeric" class="form-control" placeholder="UserName" tabindex="1"/>
    <span class="glyphicon glyphicon-user form-control-feedback"></span> </div>
  <div id="divpwd" class="form-group has-feedback">
    <input type="password" id="txtPwd" name="password" data-validation="length" data-validation-length="min5" class="form-control" placeholder="Password" tabindex="2"/>
    <span class="glyphicon glyphicon-lock form-control-feedback"></span> </div>
                <div id="divtc"class="form-group has-feedback" >
                    <input type="checkbox" id="cbtnc" name="check" data-validation="required" data-validation-error-msg="You have to agree to our Terms and Conditions to access" class="minimal" tabindex="3"/>
                    &nbsp;&nbsp;&nbsp; I accept the <a href="#" data-toggle="modal" data-target="#terms-conditions-modal-info">Terms and Conditions</a> of access.
                    <span class="glyphicon form-control-feedback"></span>
                </div>
  <div class="row">

    <div class="col-xs-offset-8 col-xs-4">
                        <button type="button" id="btnLogin" class="btn btn-primary btn-block btn-flat" onclick="verifyLogin();" tabindex="4">Sign In</button>
    </div>

Answer 1

我使用jQuery来使用$.ajax()方法。

我的JSFiddle：https://jsfiddle.net/m6vrfmw1/2/

要在项目中使用jQuery，请添加<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 进入<head>标记。

在$.ajax()方法中，我使用$.each()方法迭代JSON数据并将其附加到<select>标记。

$.ajax({
    url: "https://www.json-generator.com/api/json/get/clwcxTNthK?indent=2", // URL to fetch data from DB
  success: function(data) {
    $.each(data, function(index, item){
      $("#customerlist").append('<option value="[Add Custom Value Here]">' + item.name + '</option>');
    });
  }
});

在登录页面从数据库中检索选择框的值

1 个答案: