Node.js / Express Noob更新页面视图，无需重新加载

Question

I am using Node v.0.10.29 on Win XP SP3.

I am new to Node/Express. I am trying to learn Node/Express by duplicating a existing PHP project. http://stevenjsteele.com/database/

The PHP project allows the user to build a list of items from either the materials, tools or equipment tables needed for a project, without a page reload.

What I am having a hard time with (don't understand) is: With the PHP project I can change tables using the select table drop down without a page reload. This is done with a PHP echo and:

xmlHttp.open("POST","getpage.php?tablename="+str,true);

I initialize the app with:

var express  = require('express'),
request    = require('request'),
requirejs  = require('requirejs'),
mysql      = require('mysql'), // node-mysql module
path        = require('path'),
bodyParser = require('body-parser'),   
app = express();

var mh_connection =  mysql.createConnection({
host : 'localhost',
user : 'root',
password: ''
});  

mh_connection.connect(); 

var materialhandler = router.route('/materialhandler');

materialhandler.get(function(req,res){

selecttools = 'tools';
selectelectrical = 'electrical';
selectequipment = 'equipment';   

mh_connection.query('use materialhandler');

var strQuery = 'SELECT * FROM materialhandler.tools ORDER BY item_id';

mh_connection.query( strQuery, function(err, rows){
if(err) {
throw err;
}else{

tablename='Tools';
res.render('materialhandler',{title:"page title",data:rows});            
res.end("");    
        }
    });                         
});

In my node/express template (which is html) I use:

For the select option dropdown inside of a form, I use: onchange="getData()"

<form id="theForm" action="/materialhandler">
<div class="tablepicker two-thirds column">                 
<select id="selectTable" onchange="getData()" class="selectpicker" name="selectpicker">  
<optgroup>
<option name="" value="">Select Table</option>
<option name="tools" value="tools"><%=selecttools%></option>
<option name="electrical" value="electrical"><%=selectelectrical</option>
<option name="equipment" value="equipment"><%=selectequipment%</option>  
</optgroup>
</select>                        
</div>
</form>

function getData() {
//console.log('begin');
var http = new XMLHttpRequest();
var selectedTable = selectTable.options[selectTable.selectedIndex].value;
http.open("POST", 'http://localhost:3000/materialhandler?selectpicker='+selectedTable, true);

http.setRequestHeader("Content-type", "application/x-www-form urlencoded");
http.onreadystatechange = function() {
    console.log('onreadystatechange');
    if (http.readyState == 4 && http.status == 200) {
        //alert(http.responseText);
    }
    else {
        console.log('readyState=' + http.readyState + ', status: ' + http.status);
    }
}

//console.log('sending...')
http.send(selectedTable);
console.log(selectedTable)
//console.log('end'); 
$('#theForm').submit(); 
}

In terminal window console.log shows the selected table.

I am trying to change the tables without a page reload.

As I said at beginning I am just starting to learn this paradigm. Any help or pointing in the right direction is appreciated.

Thanks.

Answer 1

The $('#theForm').submit(); is what's causing your page reload, but instead of doing it that way you can make your post request directly with javascript. jQuery would be a better alternative to XMLHttpRequest.

Instead of your getData() function, you can hook up some javascript to listen for select changes, and post them to your server like so:

$('#selectTable').on('change', function() {
    $.post("materialhandler?selectpicker=" + $(this).val());
}