Question

我可以在Google Chrome中的控制台标记中获取我的网址响应。我需要你的帮助才能在界面中显示这些值。下面提供的代码只允许我在网址响应中显示第一个值。

main.js：

 try{
         var getNameOfEmployee = document.getElementById('getNameOfEmployeeID');

       function displayEmployee(){

            if (getNameOfEmployee.value != "") {
                 $("#someform").submit(function (event) {
                 event.preventDefault();
                 });
                 AjaxGet();
            }
            else{
                alert("Please enter any name of employee that you wish to know the extension code of!");
            }
       }

       AjaxGet = function (url, storageLocation, mySuccessCallback) {
             var result = $.ajax({
                 type: "GET",
                 url: 'http://localhost:8080/employee/' +$("#getNameOfEmployeeID").val(),
                 param: '{}',
                 contentType: "application/json",
                 dataType: "json",
                 success: function (data) {
                        storageLocation = data;
                        globalVariable = data;
                       console.log(storageLocation);
                       console.log(storageLocation.empName0.extCode);

                      var length = Object.keys(storageLocation).length;

                    var empArray = new Array(length);                   
                 }
             }).responseText ;
             return result;
             return  storageLocation;
             //console.log(result);
       } ; }

 catch(e){          document.getElementById("demo").innerHTML = e.message; }

我的控制台如下：

empName0
:
{empName: "Aran", extCode: 5500}
empName1
:
{empName: "Bran", extCode: 5900}
empName2
:
{empName: "Cran", extCode: 5750}

请点击提示按钮后，有人帮助我如何将所有这些结果打印在我的索引页面中。刚才我尝试了JSON.stringify（storageLocation）并在警告消息上打印结果。请给我一个答案，显示现在重复的结果。如果您需要我的java文件来检索数据，请遵循：

employeeDAO.java：

@Repository public class EmployeeDAO { private static final Map empMap = new HashMap（）;

static {
    initEmps();
}

private static void initEmps() {

}

public JSONObject getEmployee(String empName){
    Map<String ,Employee> empMap2 = new HashMap<String ,Employee>();
    String filePath="D:\dummy.xls";
    ReadExcelFileAndStore details = new ReadExcelFileAndStore();

    List<Employee> myList= details.getTheFileAsObject(filePath);
    JSONObject emp1 = new JSONObject();
    boolean check=false;

    int j=0;
    for (int i=0; i<myList.size(); i++) {
        if (myList.get(i).getEmpName().toLowerCase().contains(empName.toLowerCase()))

{ emp1.put（＆＃34; empName＆＃34; + J，myList.get（I））; J ++; check = true; }

    }

    if(check == true)
    {
        //System.out.println("yes");
        return emp1;
    }
    else
    {
        return null;
    }
}

public Employee addEmployee(Employee emp) {
    empMap.put(emp.getEmpName(), emp);
    return emp;
}

public Employee updateEmployee(Employee emp) {
    empMap.put(emp.getEmpName(), emp);
    return emp;
}

public void deleteEmployee(String empName) {
    empMap.remove(empName);
}

public List<Employee> getAllEmployees() {
    String filePath="D:/dummy.xls";
    ReadExcelFileAndStore details = new ReadExcelFileAndStore();
    return  details.getTheFileAsObject(filePath);
}

public List<Employee> getAllImportantEmployees() {
    String filePath="D:/dummy.xls";
    ReadImportantExtensionSheet impDetails = new ReadImportantExtensionSheet();
    return  impDetails.getTheFileAsObject(filePath);
} }

Answer 1

您可以在AJAX成功方法中添加一些DOM操作：

success: function (data) {
    storageLocation = data;
    console.log(storageLocation.empName0.extCode);
    $("#someform #someLabel").val(storageLocation.empName0.extCode);
    $("#someform #someOtherLabel").val(storageLocation.empName0.empName);
}

这将等待AJAX完成，然后用结果更新您的页面。

您可以使用jQuery each函数循环结果中的每个元素，并更新页面上的相应元素。

success: function (data) {
    storageLocation = data;
    $.each(storageLocation, function (index, value) {
        console.log(value.extCode);
        $("#someform #someLabel" + index).val(value.extCode);
        $("#someform #someOtherLabel" + index).val(value.empName);
    });
}

Answer 2

在你的HTML中有一个表格
收到UI中的响应填充

这是一个示例代码，根据json结构进行更改

		function load() {
			var resp = '[{"empName":"Aran","extCode":5500},{"empName":"Bran","extCode":5900},{"empName":"Cran","extCode":5750}]';

			var emps = JSON.parse( resp );
			var i;
			for(i=0; i<emps.length; i++) {
				$('#empdata').append('<tr><td>'+emps[i]['empName']+'</td><td>'+emps[i]['extCode']+'</td>...</tr>');
			}
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
	<table id="empdata" style="border: 1px solid;background-color: #eedaff;">
		<th>Name</th><th>Ext</th>
	</table>
	<button onclick="load();">Load</button>
</body>

在前端显示网址响应

2 个答案: