Nodejs/Express noob update page view no reload

Question

Я использую Node v.0.10.29 на Win XP SP3.

Я новичок в Узел/Экспресс. Я пытаюсь изучить Node/Express, дублируя существующий проект PHP. http://stevenjsteele.com/database/

PHP-проект позволяет пользователю создавать список элементов либо из материалов, инструментов или оборудования таблиц, необходимых для проекта, без перезагрузки страницы.

С чем я затрудняюсь (не понимаю): С проектом PHP я могу менять таблицы, используя таблицу выбора , выпадающую без перезагрузки страницы. Это делается с помощью PHP эхо и:

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

Я инициализировать приложение с:

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("");  
     } 
    });       
}); 

В моем узле/экспресс-шаблон (который является HTML) я использую:

Для выпадающее меню выбора варианта формы, Использую: 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(); 
} 

В окне терминала console.log отображает выбранную таблицу.

Я пытаюсь изменить таблицы без перезагрузки страницы.

Как я уже сказал, я только начинаю изучать эту парадигму. Любая помощь или указание в правильном направлении оценивается.

Спасибо.

Answer 1

$('#theForm').submit(); - это то, что вызывает перезагрузку вашей страницы, но вместо того, чтобы делать это таким образом, вы можете напрямую отправлять свой запрос с помощью javascript. jQuery будет лучшей альтернативой XMLHttpRequest.

Вместо вашего getData() функции, вы можете подключить некоторые JavaScript, чтобы слушать для select изменений, и размещать их на свой сервер следующим образом:

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