HTML按钮发送发送请求以从表中的.json检索信息

Question

I have a simple html file that has a button called Display Animal. I have a seperate .json file that has various animals stored in some way. What I am trying to do is on click of Display Animal I want to fetch the information from this json file and display it in a table on the screen. I am using Express, Node, jQuery and Javascript. Note that I am running server that displays the simple html file. I am little unsure of the structure of how to do this? Like in my html file do I have my onClick method there or in my server file? Also, how do I fetch this information? I am trying to accomplish this using GET or POST requests.

Answer 1

Are you using a front-end library (like jQuery or Angular) or are you trying to do this natively with JavaScript?

If the former, there are HTTP request APIs built into each (eg jQuery.POST() , or $http ). If the latter, you'll want to look into native XMLHttpRequest .

Not a sophisticated answer, but your question is very broad. I'll leave reading the documentation to you.

Answer 2

Create a get service on your backend, with express it would be something like

var app = express();

app.get ('/animals', function (req, res){ 
// your code to parse and return your list of animals, function (err, data) {
res.end (data) }

That's not 100% working code but gives you an idea how the get will be formatted.

Then you can either use jquery.get () with your button onclick or write out a javascript xmlhttprequest.

Jquery would be easier but for you want to do it yourself there are tons of tutorials on writing a xhr in javascript.

EDIT: I wrote this in response to a get request. If you want to use post it's essentially the same, use jquery.post () as the other answer suggests and instead of app.get it would be app.post.

For data like animals I'd use get, you are only showing information with no need to change it and a unless you are passing sensitive information get will serve your purposes fine.