我是MEAN Stack的新手并且真的被这个问题所困扰。我有一个Express服务器，它调用外部API并以JSON格式获取数据。我还有一个MEAN Stack SPA。我想要做的是，如果我去SPA中的某个html页面，然后点击按钮，它将调用我的Express服务器，然后从json中的Express服务器获取API数据到我的html客户端。我编写了以下代码，但它根本不起作用，我在api_data_list.html页面中没有得到任何回复。
我的api_data_list.html页面：
<head>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(function() {
let url = "http://localhost:3000/#!/api_data_list";
$("button").click(function(e){
e.preventDefault();
var data = {
endPoint: url
};
$.ajax({
url: url,
method: 'POST',
data: JSON.stringify(data),
contentType: 'application/json',
success: function(data) {
alert("Data: " + JSON.stringify(data));
//$('#my_paragraph').text(data);
}
});
});
});
</script>
</head>
<h2>List of Guests from GstAPI</h2>
<button>Click here to retrieve data from GstAPI</button>
<p id="my_paragraph"></p>
<table class="table" >
<tr>
<th>SNo.</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Room ID</th>
<th>Actions</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>当我运行服务器（即localhost）时，这是首先出现的index.html页面。我有一个链接，将用户带到api_data_list.html页面。
<h2>List of Guests</h2>
<a ui-sref="api_data_list">Click here for GstAPI Guests data</a>
<table class="table" ng-if="guests.length>0">
<tr>
<th>SNo.</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Room ID</th>
<th>Telephone No.</th>
<th>Actions</th>
</tr>
<tr ng-repeat="guest in guests">
<td>{{$index + 1}}</td>
<td>{{guest.firstname}}</td>
<td>{{guest.lastname}}</td>
<td>{{guest.roomid}}</td>
<td>{{guest.telephoneno}}</td>
<td>
<a ui-sref="edit({id:guest._id})">Edit</a> |
<a href="#" ng-click="deleteGuest(guest._id)">Delete</a>
</td>
</tr>
</table>
<div ng-if="guests.length==0">
No guest found !!
</div>我的server.js代码包含Node和Express服务器：
var express = require('express'),
path = require('path'),
bodyParser = require('body-parser'),
routes = require('./server/routes/web'), //web routes
apiRoutes = require('./server/routes/api'), //api routes
connection = require("./server/config/db"); //mongodb connection
var app = express();
getDataFromGstAPI();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'app')));
app.use(express.static('node_modules'));
app.use('/', routes);
app.use('/api', apiRoutes);
function getDataFromGstAPI(){
var client_key = [key]; //Client key
var client_secret = [secret]; // Client secret
var base64EncodedString = Buffer.from(pcc_client_key + ":" + pcc_client_secret).toString('base64'); // Key and Secret are Base64 encoded for Basic authorization
var request = require("request"); //"request" module is used for making http requests
var token = ''; //to obtain the access token
var guests = {};
getToken(); //connecting to the GstAPI server to get the token
function getToken(){
//making a POST request to server to obtain the access token for oAuth 2.0 (2-legged approach)
var options = {
method: 'POST',
url: 'https://connect.gstapi.com/auth/token',
headers: {
'authorization': 'Basic ' + base64EncodedString,
'content-type': 'application/x-www-form-urlencoded'
},
form: {
grant_type: 'client_credentials'
}
};
app.post('/api_data_list', (req,res) => {
request(options, function(e,r,body) {
if(e) throw new Error(e);
token = JSON.parse(body).access_token;
getGuests(token,res);
});
});
};
function getGuests(token,res){
//making a GET request to get the API using the access token
var optionsForGETGuests = {
method: 'GET',
url: 'https://connect.gstapi.com/api/public/guests',
headers:
{
Authorization: 'Bearer ' + token,
'Content-Type': 'application/json'
}
};
request(optionsForGETGuests, function (e, r, body) {
if (e) throw new Error(e);
//console.log(body);
guests = JSON.parse(body);
res.send(guests);
});
};
}
var port = process.env.port || 3000;
app.listen(port, function() {
console.log("Server is running at : http://localhost:" + port);
});我究竟做错了什么？是因为端点或路由配置不当？或者我的jQuery代码有问题吗？
你可能应该改变
let url = "http://localhost:3000/#!/api_data_list";
至：
let url = "http://localhost:3000/api_data_list";
请注意，第二个示例没有#!