I often encounter this situation when I as an ASP program:
Column data in the database (such as all employee names) is listed in the list box, and the program requirements select one or more of the submitted to the next page.
But trouble is that if data (such as employees) will bring trouble to customers - to be positioned from a long list. The best solution is that the user performs data positioning in the way before choosing a fuzzy query, accurately identify the employee name, then select, and submit it.
The problem appears in front of our programmer: How to filter data from the database without refreshing the page filtering from the database. There are two kinds of methods:
1. Methods with dual list boxes
2, use
XML method
This article mainly introduces the second method:
XML solution
Programming ideas:
First, the data that needs to be placed in the list box is downloaded from the database to
XML data island;
Use JavaScript to compare each of the query conditions with each item in the data island, in the list box that meets the requirements;
This enables the content that does not refresh the new page filtering the database.
Its disadvantage is not real-time.
achieve:
The following is an example of SQL Server, and the employee name of the Employees table in the Northwind library will be filtered.
Method for new page query </ title> <meta http-equiv = "content-type" content = "text / html; charset = GB2312> </ head> <script language = "JavaScript"> <! Initialization, put the data island in the data island in the list box -> Function loadinsel () {var EmployeeID, EmployeelastName; // Store employee ID and employee name root = document.all.xmlemployees. ChildNodes.Item (0); // Return the first element --employee for (i = 0; i <root.childes.length; i ) {getNode = root.childNodes (i); // Get Empolyee Node Employeeid = root.childNodes (i) .getattribute ("emid"); // Get employee id for (j = 0; j <getnode.childNodes.Length; J ) {EMPLOYEEINF = getnode.childNodes (j) .nodename; if (employeeinf == "lastname") {employeelastname = getnode.childNodes (j) .text; //}} // get the employee name obtained employeeid and select EmployeeLastName written in if (employeeid = "" && employeelastname!! = "") {Option1 = Document.createElement ("option"); option1.text = EmployeelastName; option1.Value = EmployeeID; Employeelist.add (option);}}} <! - Initialization, search data from the data island , Put in the list box -> Function FindemPloyee () {var EmployeelastName, Employee ID; // store employee name and employee id EmployeelastName = ""; EmployeeID = ""; FindText = WINDOW.FINDCONTENT.VALUE; // Get Retrieval Condition // Clear list box EMPLOYEECount = Employeelist.LENGTH for (i = EmployeeCount- 1; I> = 0; i -) {Employeelist.remove (i);} root = window.xmlemployees.childNodes (0); for (i = 0; i <root.childNodes.length; i ) {GetItem = Root.childNodes (i); // Get a child node EmployeeID of Empolyee =</p>
<p>Root.childNodes (i) .GetaTribute ("emid"); // Get employee id for (j = 0; j <gettem.childNodes.Length; j ) {if (GetItem.childNodes (j) .nodeename == "Lastname ") {Employee_temp = GetItem.childNodes (j) .text; if (Employee_Temp.Indexof (Findtext)! = - 1) {// Find Match EmployeelastName = Employee_Temp; / / Find the employee of the name.</p>
<p>} // Write the eligible employee information into select if (EmployeeiD! = "" && employeelastname! = ") {Option1 = Document.createElement (Option1.Value = Employeeid; option1.text = EmployeelastName WINDOW.EMPLOEELIST.ADD (option1); Employeeid = ""; employeelastname = "";}}} </ script> <body bgcolor = # ffffff "text =" # 000000 "οnlοad =" javascript: loadinsel () " > <table width = "80%" border = "1"> <tr> <td> Please enter query conditions: <input type = "text" name = "findcontent"> <input type = "button =" Submit "Value =" Find "οnclick =" JavaScript: FindemPloyee ()> </ td> </ tr> <tr> <td> Query Result: <select name = "employeelist> </ select> </ td> < / tr> </ table> <? XML version = "1.0" encoding = "gb2312"?> <% servername = "wyb" server name user = "sa" 'username PW = "" user password DatabaseName = " Northwind "Database Name SET CONN = Server.createObject (" AdoDb.Connection ") Conn.open" Driver = SQL Server; Server = "& ServerName &"; UID = "& User &"; PWD = "& PW &"; Database = "& DatabaseName SET RS = Server.createObject ("AdoDb.Recordset") SQL = "SELECT EMPLOYEEES ORDER BY EMPLOYEEID" RS.Open SQL, Conn%> <! - put the information in the database into the data island -> <xml id = "XMLEMPLOYEES > <Employee> <</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-15171.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="15171" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.041</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = '_2FX3y8eD7toC6LgWa4hk4Gr_2FN4In_2BW0epqmnu_2Bb21meHuILzkJfPrEypWrFDA1ozyKb2tuFIZTWa8JGbLgNa13A_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
