javascript - 为什么 ajax 不发布 csv 文件并在 html 标记中返回相同的 csv 文件
问题描述
首先感谢这里的所有人,我从这个平台学习了大部分代码。请帮帮我。
作为我的大代码的一部分,这个小练习,如果有人请调查一下。我试图从客户端 HTML 向 NodeJS 进行 ajax 调用,该调用会将 csv 文件发送到 NodeJS 进行处理,但要检查发送/接收功能。我刚开始编写一个代码,在该代码中我的index.html
文件会将 csv 文件发送到server.js
NodeJS 脚本,并且在成功提交后,响应中的 ajax 将在 index.html 中创建一个相同 csv 文件的 csv 链接,其中 html 锚标记在 div 标记内,带有 id linkforoutput
。
请任何人都可以看到这个。
代码index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Podrank</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
.inputdiv {
border-style: solid;
width: 400px;
margin-top: 10%;
}
.multidiv {
border-style: solid;
width: 400px;
margin-top: 10%;
}
</style>
</head>
<body>
<center>
<div class="inputdiv">
<form method="post" enctype="multipart/form-data" action="/getscore">
<p><b>Please enter patent number: </b><input type="text" name="patentNumber" id="patentNumber"></p>
<p>For e.g. US9015616B2 or 9015616</p>
<br>
<input type="submit" style="cursor:pointer;" value="Get score!">
<br><br>
</form>
</div>
<div class="multidiv">
<form method="POST" enctype="multipart/form-data">
<p for="">Please upload csv file (having list of patent numbers):
<br>
<input type="file" style="cursor: pointer;" name="csvfile" id="csvfile" accept=".csv">
</p>
<br><br>
<button type="submit" id="submit_button" style="cursor: pointer;">Submit</button><br><br>
</form>
<div id="linkforoutput"></div>
</div>
</center>
<script>
alert("submit clicked!")
$(function(){
$('#submit_button').click(function(e){
e.preventDefault();
console.log('select_link clicked');
$.ajax({
type: 'POST',
dataType: 'csv',
data: {"csvData":csvfile},
url: 'http://localhost:3000/getscorelist',
success: function(data) {
console.log('success');
var received_data = data
var filename = "output.csv"
const saveData = (function () {
const a = document.createElement("a");
$('#linkforoutput').appendChild(a);
a.style = "display: none";
return function (received_data, fileName) {
const blob = new Blob([received_data], {type: "octet/stream"}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
}());
saveData(received_data, fileName);
}
});
});
});
</script>
</body>
</html>
data.csv
这是具有以下内容的小 csv 文件
patent
9015616
9015617
9015618
9015699
7843093
我的 nodejs 脚本将接收 csv 文件输入,如下所示;
// This is a server file which send/receives request/responses from index.html
/* csv to json */
const express = require("express"),
app = express(),
upload = require("express-fileupload"),
csvtojson = require("csvtojson");
var http = require('http');
var path = require("path");
var bodyParser = require('body-parser');
var helmet = require('helmet');
var rateLimit = require("express-rate-limit");
app.use(upload());
var server = http.createServer(app);
const limiter = rateLimit({
windowMs: 15 * 60 * 1000, // 15 minutes
max: 100 // limit each IP to 100 requests per windowMs
});
app.use(bodyParser.urlencoded({extended: false}));
app.use(helmet());
app.use(limiter);
const port = process.env.PORT || 3000
// Creates a server which runs on port 3000 and
// can be accessed through localhost:3000
app.listen(port, () => {
console.log(`server running on port at ${port}`);
})
app.get('/', function(req, res){
res.sendFile(path.join(__dirname,'index.html'));
});
app.post('/getscore', getscore);
function getscore(req, res){
var spawn = require("child_process").spawn;
var process = spawn('python',["mainfile.py", req.body.patentNumber]);
process.stdout.on('data', function(data) {
var mystr = data.toString();
myjson = JSON.parse(mystr)
res.send("<center><title>Podrank</title><div class='outputdiv' style='border-style: solid; width: 600px;'><div style='text-align: left; padding:10px;'><p>Input patent number: "+req.body.patentNumber+"</p><p>"+myjson.data+"</p></div><p style='text-align: right;'><i>By <b><a href='https://www.copperpodip.com/' target='_blank'>Copperpod IP</a> </b></i> </p><a href='https://www.copperpodip.com/contact-us' target='_blank'>Contact us</a></div></center>");
})
process.stderr.on('data', function(data){
res.send(data.toString());
});
}
// Will remove all falsy values: undefined, null, 0, false, NaN and "" (empty string)
function cleanArray(actual) {
var newArray = new Array();
for (var i = 0; i < actual.length; i++) {
if (actual[i]) {
newArray.push(actual[i]);
}
}
return newArray;
}
function get_array_string(inp){
var str = "";
for (var i = 0; i < inp.length; i++){
str = str + " " + inp[i]
}
return str.trim()
}
app.post('/getscorelist', getscorelist);
function getscorelist(req, res){
csvData = req.files.csvfile.data.toString('utf8');
// filteredArray = cleanArray(csvData.split(/\r?\n/))
// csvData = get_array_string(filteredArray)
// csvData = csvData.trim()
res.send(req.csvData)
}
解决方案
推荐阅读
- reactjs - 在 react web 应用程序中实现指令覆盖(不是 react-native)
- javascript - localStorage.clear 在 Wp 中无法正常工作
- arrays - 从scala中的整数数组缓冲区中删除所有负元素
- python - (Flask API),让firebase上传的图片有唯一的名字
- javascript - 如何打乱用户添加的数组中的项目并显示结果?
- javascript - 如何在 JavaScript 中对 promise 的“then”结果进行单元测试?
- javascript - 如何使用 JavaScript 将表单数据发送到服务器
- random - 栅格堆栈上的随机点和提取值 500 次存储为列表
- java - Vertx hazelcast集群在重新加载更新的fat-jar时不稳定
- jquery - 在 jquery 上添加值时,我得到无穷大的数字