I have an html page and I need to send the contents of a table in a POST. How do I capture the content of the table using jQuery and pass it to the server (which is running node.js and express.js)? This is the example of a table in a page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="scripts/jquery-3.2.1.min.js"></script>
</head>
<body>
<table id=horarios>
<tr>
<td>1 </td>
<td>2 </td>
<td>3 </td>
</tr>
<tr>
<td>4 </td>
<td>5 </td>
<td>6 </td>
</tr>
</table>
<form method=post>
<input type="submit" value="Save">
</form>
</body>
</html>I have an html page and I need to send the contents of a table in a POST. How do I capture the content of the table using jQuery and pass it to the server (which is running node.js and express.js)? This is the example of a table in a page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="scripts/jquery-3.2.1.min.js"></script>
</head>
<body>
<table id=horarios>
<tr>
<td>1 </td>
<td>2 </td>
<td>3 </td>
</tr>
<tr>
<td>4 </td>
<td>5 </td>
<td>6 </td>
</tr>
</table>
<form method=post>
<input type="submit" value="Save">
</form>
</body>
</html>In the server I would capture that POST with something like:
var bodyParser = require('body-parser');
app.use( bodyParser.json() );
app.use( bodyParser.urlencoded({ extended: true }));
app.post('/mypage', function(req, res){
var content = req.body;
res.render('somepage');
});
- Capture what exactly, other than a submit button, your form is empty? – adeneo Commented Sep 22, 2017 at 20:34
3 Answers
Reset to default 2You want to send a POST request with body set to $('#horarios').html()
You can do this with jQuery.post()
$.post(url, data, success, respType)
where data is the html string of your table, success is a callback if the server sends a success response, and resType is the type of data your server should send back (i.e. text, html, xml, json, script)
So for your example, try adding this inside a script tag on your html page:
// bind to form submit
$('form').submit(function(){
// get table html
var table = {html: $('#horarios').html()};
// POST the data
$.post('/mypage', table, function(response, textStatus){
// do anything with the response here ...
})
});
You need to convert your table into a data structure. You can achieve this with:
var tbl = $('#horarios tr').map(function(rowIdx, row) {
var rowObj = $(row).find('td').map(function(cellIdx, cell) {
var retVal = {};
retVal['cell' + cellIdx] = cell.textContent.trim();
return retVal;
}).get();
var retVal = {};
retVal['row' + rowIdx] = rowObj;
return retVal;
}).get();
In this way you will pass the table as an array of rows of cells.
$('input[value="Save"]').on('click', function(e) {
//
// prevent form submit
//
e.preventDefault();
//
// collect table data by row X col
//
var tbl = $('#horarios tr').map(function(rowIdx, row) {
var rowObj = $(row).find('td').map(function(cellIdx, cell) {
var retVal = {};
retVal['cell' + cellIdx] = cell.textContent.trim();
return retVal;
}).get();
var retVal = {};
retVal['row' + rowIdx] = rowObj;
return retVal;
}).get();
console.log('-->' + JSON.stringify({table: tbl}));
$.post('/mypage', {table: tbl}, function(data, textStatus, jqXHR) {
console.log('success');
})
})<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id=horarios>
<tr>
<td>1 </td>
<td>2 </td>
<td>3 </td>
</tr>
<tr>
<td>4 </td>
<td>5 </td>
<td>6 </td>
</tr>
</table>
<form method=post>
<input type="submit" value="Save">
</form>If you want the data to send via post, first you have to extract values from the table and i remend you put it into an array, then send it via ajax post.
$('form').on('submit', function(e) {
e.preventDefault();
var $dataElements = $('#horarios').find('td'),
data = [];
$.each($dataElements, function(i, elem){
data.push($(elem).html());
});
$.ajax({url:'/mypage', method: 'POST', data: {data:JSON.stringify(data)}});
});
In other hand if you only want to send the html just send it using $('#horarios').html() instead of loop through elements and add it to the post data.
I hope it helps...
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745114337a4612039.html
评论列表（0条）