Javascript 如何使用CraigslistAPI在HTML页面上进行搜索

我有一个简单的html页面，我正在使用CraigslistAPI进行搜索。 如何将查询结果显示回HTML页面

这是查询craigslist的代码

var
  craigslist = require('node-craigslist'),
  client = new craigslist.Client({
    city : 'seattle'
  });

client
  .search('xbox one')
  .then((listings) => {
    // play with listings here...
    listings.forEach((listing) => console.log(listing));
  })
  .catch((err) => {
    console.error(err);
  });

---

你知道我该怎么做吗？

使用expressjs你可以将该响应查询回html页面，例如，你首先在node js中创建你的服务器首先我们按如下方式安装expressjs：

npm install express body-parser --save

<script 

    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>.zui-table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}</style>
<div ng-app="panda">
    <div ng-controller="main">
<h2>Craiglist</h2>        
<form ng-submit="searching()">
<input ng-model="search" type="text"/>    
</form>
<table class="zui-table">
    <thead>
        <th ng-repeat="(key,value) in list[0]">{{key}}</th>
    </thead>
    <tbody>
        <tr ng-repeat="koi in list">
            <td ng-repeat="(key,value) in koi">{{value}}</td>
        </tr>
    </tbody>
</table>


    </div>
</div>

<script>
    var app = angular.module("panda", []);

app.controller("main", function($scope,$http) {
    $scope.list=[]
    $scope.searching=function(text){
        $http.post("/craiglist",{search:$scope.search}).then(data=>{
            console.log(data.data)
            $scope.list=data.data
        })
    }
});

</script>

const express = require('express')
const app = express()
const bodyParser=require('body-parser')
app.get('/',async (req, res) => {
await res.sendFile(__dirname'/index.html')
})

 app.post('/craiglist',bodyParser.json(),async (req, res) => {
 var  craigslist = require('node-craigslist'),
  client = new craigslist.Client({
    city : 'seattle'
  });

const listing=await client.search(req.body.search)
await res.send(listing)
})
app.listen(8080, () => console.log('Example app listening on port 3000!'))

首先创建一个index.html，它可以像这样接收我们的表：

npm install express body-parser --save

<script 

    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>.zui-table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}</style>
<div ng-app="panda">
    <div ng-controller="main">
<h2>Craiglist</h2>        
<form ng-submit="searching()">
<input ng-model="search" type="text"/>    
</form>
<table class="zui-table">
    <thead>
        <th ng-repeat="(key,value) in list[0]">{{key}}</th>
    </thead>
    <tbody>
        <tr ng-repeat="koi in list">
            <td ng-repeat="(key,value) in koi">{{value}}</td>
        </tr>
    </tbody>
</table>


    </div>
</div>

<script>
    var app = angular.module("panda", []);

app.controller("main", function($scope,$http) {
    $scope.list=[]
    $scope.searching=function(text){
        $http.post("/craiglist",{search:$scope.search}).then(data=>{
            console.log(data.data)
            $scope.list=data.data
        })
    }
});

</script>

const express = require('express')
const app = express()
const bodyParser=require('body-parser')
app.get('/',async (req, res) => {
await res.sendFile(__dirname'/index.html')
})

 app.post('/craiglist',bodyParser.json(),async (req, res) => {
 var  craigslist = require('node-craigslist'),
  client = new craigslist.Client({
    city : 'seattle'
  });

const listing=await client.search(req.body.search)
await res.send(listing)
})
app.listen(8080, () => console.log('Example app listening on port 3000!'))

---

不要忘记使用最新的nodejs的代码，所以首先安装最新的nodejs，以便使用async/wait函数

我正在尝试在HTML页面中实现一个搜索框，它将使用CraigslistAPI显示结果。我如何使用上面的方法将结果包含在我的html页面中？如果使用搜索框，您可以尝试在nodejs服务器中创建一个html请求，例如app.get（'/listing'），而不是在您的html中，只需将该列表附加到一些html元素中，您能更详细地解释一下吗？我不知道如何将其放入html中。你能举个例子吗？你知道RESTAPI或ajax吗？我编辑了我的答案，请看一下，如果你有任何问题，请问我