javascript - Receive data in ajax call back from server without reloading and update current page. Express 4 and Node -

i have form

form#form-reflow(action='/', method='post',                      onsubmit="docreflow()")     input#textinp(type="text", name="textinp")     input#submit(type="submit", name="submit")  

that runs following ajax client script send form data express.

function docreflow() {     $('#form-reflow').on('submit', function (evt) {         evt.preventdefault();          $.post($('#form-reflow').attr( 'action' ),             {                   data: $("#textinp").val(),                 headers: {'x-requested-with': 'xmlhttprequest'},                 datatype: 'text',                 accepts: {                             text: 'text/plain'                         },             })             .done(function ondone (data) {                             console.log("returned data is: ");                             var data = json.parse(data).data;                             console.log(data);                             $('#form-reflow').html(data);                         }             )             .fail(function onfail(err) {                 $('#form-reflow').html("<p> there wazza khold dey</p>");             });     }) } 

i want server post method not reload page.

instead want know how can receive data on client html: jade btw.

div#ajaxmsg     p works!     p data "#{data}" 

from controller method while

res.render('afterreload.jade', {some data...}) 

the page should not reload instead on ajax done should include rendered html snippet here:

$('#form-reflow').html(data); 

for eg, consider write ajax api new york times nyt api uses jsonp sendback defined callback , can include data in current page.

lets json rendering only. server send json data

and on success, function append data on client side wish.

how can 'no reload' ajax server client response?

feel free ask me further clarity.

according this

changing evt type change doesn't affect behaviour. still reloads page.

both current , post page controller routes defined '/'

update have removed html5 onsubmit event. no need:

  form#form-reflow(action='/', method='post')     input#textinp(type="text", name="textinp")     input#submit(type="submit", name="submit")   

update #2

this not solve problem

even if add return false; @ end of function call in script,

the controller function:

function ajaxreq(req, res) {              console.log(req.body);              if (req.accepts('text')) {                 //#todo: doc reflow instead page reload                 res.json({data: req.body.textinp});             }         }; 

still reloads page.

i disagree @mccannf pointing out duplicate.

no doesn't solve problem. try implementing express app. render @ '/' form posts ajax server , should render html snippet from, .jade/template file, html chunk successful ajax call , replace current html in place of form.

that core of problem.

update #3

i have been able check this out , rendering not doing partial rendering. knows how use in express 4 without loading whole page , returning value ajax call?

this solves problem , single working page:

script(src="js/scr.js") 

the view , more:

form#form-reflow(action='/scr')     input#textinp(type="text", name="textinp")     input#submit(type="submit", name="submit") 

scr without function wrapper. eg:

$('#form-reflow').submit(function (e) {         e.preventdefault();         var posting = $.post( $('#form-reflow').attr( 'action' ),              {data:$("#textinp").val()             })         posting.done(             function ondone (val) {                 $("#form-reflow").removeattr('action');                 $("#form-reflow")                 .html("<p> hello baby " + val.data + "</p>");                 });         return false;     }); 

the controller :

some_controller = function some_controller(req, res) {               if (req.accepts(['json', 'jsonp'])) {                   res.setheader("content-type", "application/json");                  var json_data = {data: req.body.data,                                 };                 res.jsonp(json_data);              }         }; app.use('/', some_router); some_router.post('/scr',some_controller); 

so works without rendering new page.