使用HTML / JavaScript + JQuery的HTTP GET请求
[英]HTTP GET Request using HTML/JavaScript+JQuery
问题描述
I am trying to make a HTTP GET request from my HTML page. 
我正在尝试从HTML页面发出HTTP GET请求。 The backend of the app is designed using PHP and the Laravel 4 framework (for PHP). 该应用程序的后端是使用PHP和Laravel 4框架（适用于PHP）设计的。
The backend of the API is working. API的后端正在运行。 I have tested it using the curl command on my Mac's terminal 我已经在Mac终端上使用curl命令测试了它
curl -v http://localhost:8888/l4/public/api/v1/getLeaderboard
I am now making the front-end using HTML/JavaScript. 我现在使用HTML / JavaScript制作前端。 This is what I have 这就是我所拥有的
<script>
function sampleFunction(){
alert("hello world ");
}
function loadLeaderboard(){
$.get("http://localhost:8888/l4/public/api/v1/getLeaderboard",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
}
</script>
And I am trying to load it as soon as the page is opened: However, nothing happens. 而且，我试图在打开页面后立即加载它：但是，什么也没有发生。 How do I fix this ? 我该如何解决 ？
<body onload=loadLeaderboard()>
EDIT : This is the error message I am seeing in the console: 编辑 ：这是我在控制台中看到的错误消息：
Uncaught ReferenceError: $ is not defined
EDIT 2 : I solved the above problem by providing the full path of the jquery file ie http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js . 编辑2：我通过提供jquery文件的完整路径（即http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js）解决了上述问题。 Initially I was not using http:// 最初我没有使用http：//
The error message I am currently getting is: 我当前收到的错误消息是：
XMLHttpRequest cannot load http://localhost:8888/l4/public/api/v1/getLeaderboard. Origin null is not allowed by Access-Control-Allow-Origin
3 个解决方案
解决方案1
1 已采纳 2013-09-21 23:20:55
This is an issue which was resolved by editing the backend code so that it allows Cross origin requests. 此问题已通过编辑后端代码解决，从而允许跨源请求。 To do this, I opened the routes.php file in the framework and added this line to the top of the page 为此，我在框架中打开routes.php文件，并将此行添加到页面顶部
header('Access-Control-Allow-Origin: *');
解决方案2
0 2013-09-21 01:30:03
It is not clear whether your function is defined before or after the body onload event. 目前尚不清楚您的函数是在body onload事件之前还是之后定义的。 Also, for debugging purposes I would recommend firing this test with a click event on a link. 另外，出于调试目的，我建议通过链接上的click事件触发此测试。 This way you have some time to open up the JavaScript console in your browser so that you can see what is happening at the time the the test is run. 这样，您就有时间在浏览器中打开JavaScript控制台，以便可以在运行测试时查看正在发生的情况。 Give the code below a shot. 在下面给出代码。
On the PHP end, make sure the data you are returning is json encoded. 在PHP端，确保您返回的数据是json编码的。
$(function() {
var loadLeaderboard = function (){
$.get("http://localhost:8888/l4/public/api/v1/getLeaderboard",function(data){
alert("Data: " + data);
});
};
$('body').on('click', '.test-link', function() {
loadLetterboard();
});
});
解决方案3
0 2013-09-21 02:34:53
Origin null is the local file system, so that suggests that you're loading the HTML page that does the load call via a file:/// URL (eg, just double-clicking it in a local file browser or similar). Origin null是本地文件系统，因此建议您正在加载通过file：/// URL进行加载调用的HTML页面（例如，只需在本地文件浏览器或类似文件中双击它）。 Different browsers take different approaches to applying the Same Origin Policy to local files. 不同的浏览器采用不同的方法将“ 相同来源策略”应用于本地文件。
My guess is that you're seeing this using Chrome. 我的猜测是您正在使用Chrome浏览器。 Chrome's rules for applying the SOP to local files are very tight, it disallows even loading files from the same directory as the document. Chrome的SOP应用于本地文件的规则非常严格，甚至不允许从与文档相同的目录中加载文件。 So does Opera. Opera也是如此。 Some other browsers, such as Firefox, allow limited access to local files. 某些其他浏览器（例如Firefox）允许对本地文件的访问受限。 But basically, using ajax with local resources isn't going to work cross-browser. 但基本上，将ajax与本地资源一起使用将无法跨浏览器工作。
If you're just testing something locally that you'll really be deploying to the web, rather than use local files, install a simple web server and test via http:// URLs instead. 如果您只是在本地测试要真正部署到Web的内容，而不是使用本地文件，请安装简单的Web服务器并通过http：// URL进行测试。 That gives you a much more accurate security picture. 这样可以为您提供更加准确的安全信息。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.