คุณสามารถใช้ jQuery Ajax เพื่อเข้าถึง Github API และเพิ่มส่วนหัวการรับรองความถูกต้องพื้นฐานเพื่อรับรองความถูกต้อง (ดูที่นี่ ) ตัวอย่างที่แสดงด้านล่างนี้จะดึงปัญหาสำหรับ repo ที่ระบุและแสดง 10 รายการแรกในหน้าต่างการแจ้งเตือน
ดูเอกสารเกี่ยวกับปัญหาการดึงที่นี่: https://developer.github.com/v3/issues/เพื่อดูว่าคุณสามารถใช้พารามิเตอร์ใดในการกรองเรียงลำดับ ฯลฯ
ตัวอย่างเช่นคุณสามารถรับปัญหาทั้งหมดที่ระบุว่า 'บั๊ก' โดยใช้:
/issues?labels=bug
ซึ่งอาจรวมถึงป้ายกำกับหลายป้ายเช่น
/issues?labels=enhancement,nicetohave
คุณสามารถปรับเปลี่ยนรายการในตารางได้อย่างง่ายดาย
const username = 'github_username'; // Set your username here
const password = 'github_password'; // Set your password here
const repoPath = "organization/repo" // Set your Repo path e.g. microsoft/typescript here
$(document).ready(function() {
$.ajax({
url: `https://api.github.com/repos/${repoPath}/issues`,
type: "GET",
crossDomain: true,
// Send basic authentication header.
beforeSend: function (xhr) {
xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
},
success: function (response) {
console.log("Response:", response);
alert(`${repoPath} issue list (first 10):\n - ` + response.slice(0,10).map(issue => issue.title).join("\n - "))
},
error: function (xhr, status) {
alert("error: " + JSON.stringify(xhr));
}
});
});
ด้านล่างนี้เป็นปัญหารายชื่อตัวอย่างสำหรับ repo (สาธารณะ) โดยใช้ jQuery และ Github API:
(หมายเหตุเราไม่เพิ่มส่วนหัวการรับรองความถูกต้องที่นี่!)
const repoPath = "leachim6/hello-world" //
$(document).ready(function() {
$.ajax({
url: `https://api.github.com/repos/${repoPath}/issues`,
type: "GET",
crossDomain: true,
success: function (response) {
tbody = "";
response.forEach(issue => {
tbody += `<tr><td>${issue.number}</td><td>${issue.title}</td><td>${issue.created_at}</td><td>${issue.state}</td></tr>`;
});
$('#output-element').html(tbody);
},
error: function (xhr, status) {
alert("error: " + JSON.stringify(xhr));
}
});
});
<head>
<meta charset="utf-8">
<title>Issue Example</title>
<link rel="stylesheet" href="css/styles.css?v=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
</head>
<body style="margin:50px;padding:25px">
<h3>Issues in Repo</h3>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Issue #</th>
<th scope="col">Title</th>
<th scope="col">Created</th>
<th scope="col">State</th>
</tr>
</thead>
<tbody id="output-element">
</tbody>
</table>
</body>
{ "message": "Not Found", "documentation_url": "https://developer.github.com/v3/issues/#list-issues-for-a-repository" }แต่ฉันอ่านและเห็นได้ชัดว่าเป็นการตอบสนองมาตรฐานเมื่อพยายามเข้าถึง repos ส่วนตัวดังนั้นการวิจัยเกี่ยวกับ OAuth ฯลฯ FWIW โดยใช้ JavaScript ภายใต้กรอบ jQuery