Question

我是第一次使用AJAX用户，我目前正在帮助构建一个包含用户个人资料的目录。特别是在配置文件页面中，我正在努力填充页面，其中JSON数据通过AJAX提取。

我已经成功地在AJAX调用本身中填充了JSON文件中的页面。但是，构建和填充页面的大多数代码都是在AJAX成功调用中编写的。不幸的是，由于每个配置文件的信息量很大，这导致了较长的页面加载时间。

我正在尝试确定调整我的代码的最佳方法，以便只有当前需要的信息（姓名，标题，电子邮件，电话，个人资料图片，教育等）才能更快地显示，并且能够最终访问更多数据繁重的对象（出版物，兴趣，演示文稿等），具有许多数据点，每个数据点有多个键。（例如，出版物将/可能有标题，副标题，日期，出版商等），个人资料有多个出版物。

我试图创建一个全局变量，但事情仍然没有做得很好。这是我访问的JSON数据的一个示例。

＆＃13;

{
  "Error": false,
  "Cached": false,
  "Profile": {
    "FirstName": "John",
    "LastName": "Smith",
    "PreferredName": "",
    "Email": "JohnSmith@example.com",
    "Gender": "",
    "PhoneNumber": "1234567890",
    "Office": "Todd Hall Addition 570B",
    "EndowedPosition": "MAJOR POSITION #1",
    "Biography": "THIS IS A BIOGRAPHY",
    "Appointments": [
      {
        "Title": "Title 1",
        "WorkingTitle": "",
        "Rank": "",
        "Department": "Department1",
        "Start": "2014-01-01",
        "End": ""
      },
      {
        "Title": "",
        "WorkingTitle": "",
        "Rank": "Rank 1",
        "Department": "Department2",
        "Start": "2014-01-01",
        "End": ""
      }
    ],
    "IntellectualContributions": [
      {
        "Type": "Book",
        "TypeOther": "",
        "IncludeProfile": "Yes",
        "Status": "Published",
        "Title": "TitleMain",
        "TitleSecondary": "",
        "FirstName": null,
        "MiddleName": null,
        "LastName": null,
        "Role": null,
        "JournalName": "",
        "Publisher": "",
        "Volume": "",
        "IssueNum": "",
        "PageNum": "",
        "WebAddress": "",
        "CaseNum": "",
        "YearPub": "",
        "Authors": []
      },
      {
        "Type": "Journal Article",
        "TypeOther": "",
        "IncludeProfile": "Yes",
        "Status": "Published",
        "Title": "TitleMain",
        "TitleSecondary": "",
        "FirstName": null,
        "MiddleName": null,
        "LastName": null,
        "Role": null,
        "JournalName": "",
        "Publisher": "",
        "Volume": "",
        "IssueNum": "",
        "PageNum": "",
        "WebAddress": "",
        "CaseNum": "",
        "YearPub": "",
        "Authors": []
      },
      {
        "Type": "Manuscript",
        "TypeOther": "",
        "IncludeProfile": "Yes",
        "Status": "Published",
        "Title": "TITLEMAIN",
        "TitleSecondary": "",
        "FirstName": null,
        "MiddleName": null,
        "LastName": null,
        "Role": null,
        "JournalName": "",
        "Publisher": "",
        "Volume": "",
        "IssueNum": "",
        "PageNum": "",
        "WebAddress": "",
        "CaseNum": "",
        "YearPub": "",
        "Authors": []
      },
      {
        "Type": "Book Review",
        "TypeOther": "",
        "IncludeProfile": "Yes",
        "Status": "Published",
        "Title": "Title",
        "TitleSecondary": "",
        "FirstName": null,
        "MiddleName": null,
        "LastName": null,
        "Role": null,
        "JournalName": "",
        "Publisher": "",
        "Volume": "",
        "IssueNum": "",
        "PageNum": "",
        "WebAddress": "",
        "CaseNum": "",
        "YearPub": "",
        "Authors": ["Author1"]
      },
      {
        "Type": "Newspaper",
        "TypeOther": "",
        "IncludeProfile": "Yes",
        "Status": "Published",
        "Title": "Title",
        "TitleSecondary": "",
        "FirstName": null,
        "MiddleName": null,
        "LastName": null,
        "Role": null,
        "JournalName": "",
        "Publisher": "",
        "Volume": "",
        "IssueNum": "",
        "PageNum": "",
        "WebAddress": "",
        "CaseNum": "",
        "YearPub": "",
        "Authors": [
          "Author 1",
          "Author 2",
          "Author 3",
          "Author 4"
        ]
      }
    ],
    "Education": [
      {
        "DegreeType": "PhD",
        "DegreeOther": "",
        "School": "University",
        "Major": "MAJOR 1",
        "FocusArea": "Focus Area",
        "DissertationTitle": "Dissertation Title",
        "Highest": "Yes"
      },
      {
        "DegreeType": "MBA",
        "DegreeOther": "",
        "School": "University",
        "Major": "MAJOR 1",
        "FocusArea": "",
        "DissertationTitle": "",
        "Highest": ""
      },
      {
        "DegreeType": "BBA",
        "DegreeOther": "",
        "School": "University",
        "Major": "MAJOR 1",
        "FocusArea": "",
        "DissertationTitle": "",
        "Highest": ""
      }
    ],
    "Present": [
      {
        "Title": "Presentation Title1",
        "Type": "Oral Presentation",
        "Name": "NAME",
        "Authors": [
          "Author1",
          "Author2",
          "Author3",
          "Author4"
        ],
        "Date": "2014"
      },
      {
        "Title": "Presentation Title2",
        "Type": "Oral Presentation",
        "Name": "NAME",
        "Authors": [
          "Author1",
          "Author2",
          "Author3"
        ],
        "Date": "2014"
      }
    ],
    "Departments": [
      "Department1",
      "Department2"
    ],
    "Research": [
      "ResearchInterest1",
      "ResearchInterest2",
      "ResearchInterest3",
      "ResearchInterest4",
      "ResearchInterest5"
    ],
    "Teaching": [
      "TeachingInterest1",
      "TeachingInterest2",
      "TeachingInterest3",
      "TeachingInterest4"
    ]
  }
}

＆＃13;

以下是我所获得的JS / jQuery。

＆＃13;

$.PageData = {
    FirstName: '',
    LastName: '',
    PreferredName: '',
    Email: '',
    PhoneNumber: '',
    Office: '',
    EndowedPosition: '',
    Appointments: [],
    IntellectualContributions: [],
    Education: [],
    Publications: [],
    Departments: '',
    ResearchInterests: '',
    TeachingInterests: ''
}

$(window).load(function () {
    var querystring = window.location.search;
    var username = querystring.substring(1, querystring.length).split("=")[1];
    username = username.indexOf("@") == -1 ? username : username.split("@")[0];
    $.ajax({
    	type: 'GET',
    	url: 'SomeURL',
    	data: { id: username},
    	datatype: "json",
    	success: function(response){
    		if (response.Error){
    			alert(response.ErrorMessage);
    		}else{
    			if(response.Profile.length == 0){
    				//No Data in Report
    			}else{

                    $.PageData.FirstName = (response.Profile.FirstName);
                    $.PageData.LastName = (response.Profile.LastName);
                    $.PageData.PreferredName = (response.Profile.PreferredName);

                    $.PageData.Email = (response.Profile.Email);
                    $.PageData.PhoneNumber = (response.Profile.PhoneNumber);

                    $.PageData.Office = (response.Profile.Office);

                    $.PageData.EndowedPosition = (response.Profile.EndowedPosition);

                    $.PageData.Biography = (response.Profile.Biography);
                    $.PageData.Appointments = (response.Profile.Appointments);

                    $.PageData.IntellectualContributions = (response.Profile.IntellectualContributions);

                    $.PageData.Education = (response.Profile.Education);

                    $.PageData.Presentations = (response.Profile.Present);

                    $.PageData.Departments = (response.Profile.Departments);

                    $.PageData.ResearchInterests = (response.Profile.Research);
                    $.PageData.TeachingInterests = (response.Profile.Teaching);
                }
            }
        }
    });
});

if(($.PageData.PreferredName == "") || ($.PageData.PreferredName == null)){
    $("#Name").text($.PageData.FirstName + " " + $.PageData.LastName);
    document.title=($.PageData.FirstName + " " + $.PageData.LastName + " | Profile");
    $("#BioPageTitle").text($.PageData.FirstName + " " + $.PageData.LastName);
}else{
    $("#Name").text($.PageData.PreferredName + " " + $.PageData.LastName);
    document.title=($.PageData.PreferredName + " " + $.PageData.LastName + " | Profile");
    $("#BioPageTitle").text($.PageData.PreferredName + " " + $.PageData.LastName);
}

＆＃13;

非常感谢任何帮助或指示！

提前致谢！

使用Json数据通过ajax调用构建Profile页面。

0 个答案: