Ajax前台与Mod_python后台应用示例
Ajax的好处就是可以实现无刷新动态更新。后台配合Mod_python程序，使后台处理变得非常高效简洁。【index.html】
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax测试页面</title> <script language="JavaScript"> function checkForm(){
var messageDiv = document.getElementById("msgDiv");
var product = document.getElementById("product");
var pvalue = product.options[product.selectedIndex].value;
var svalue = document.getElementById("sn").value; if(svalue == ""){
messageDiv.style.color = "Red";
messageDiv.innerHTML = "请输入序列号！";
return false;
}
//alert(svalue);
//var par = "pv=" + pvalue + "&sv=" + svalue
var par = "sv=" + svalue if (pvalue == 0){
sendRequest("mypython/pro1", par);
return true;
}else{
messageDiv.innerHTML = "抱歉，该产品信息尚未入库！";
return false;
}
} function sendRequest(url, par){
//注意，这里定义的是一个局部变量，即每调用一次都创建一个新的XMLHttpRequest对象，即发送一个新的请求
var xmlHttp = false;
if(window.XMLHttpRequest){ //for mozilla
xmlHttp = new XMLHttpRequest();
}else if(window.ActiveXObject){//for IE
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){ }
}
}
xmlHttp.open("POST",url,true);
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
//alert("123456");
var mdiv = document.getElementById("msgDiv");
mdiv.style.color = "Red";
mdiv.innerHTML = xmlHttp.responseText;
}else
alert("Error!" + "\nStatus code is: " + xmlHttp.status + "\nStatus text is: " + xmlHttp.statusText);
}
}
xmlHttp.setRequestHeader("Content-length", par.length);
xmlHttp.setRequestHeader("Content-Type","text/xml");
//xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=utf-8");
xmlHttp.send(par); // 名＝值＆名＝值＆名＝值...
} </script> </head>
<Body style="background-color:#e0f4df">
<br/>
<br/>
<br/>
<br/>
<br/>
<div align="center"> <!--为什么不能用Form表单，因为表单必需有返回，会导致当前页面闪烁或是跳转 -->
<!--form name="myform" id="myform" action="" method="POST" onsubmit="return checkForm()"-->
<table border="1px" cellspacing="0px" cellpadding="0px">
<tr><td>请选择产品的型号：</td><td>
<select id="product">
<option value ="0">3D打印机</option>
<option value ="1">3D扫描仪</option>
</select>
</td></tr>
<tr><td>请输入产品序列号：</td><td>
<input id="sn" type="text" size="14" value="" />
</td></tr>
<tr><td colspan="2" align="center">
<button onClick="return checkForm()">点击查询</button>
</table>
<!--/form -->
</div>
<br/>
<div align="center" id="msgDiv"></div>
</Body>
</HTML>
然后就是后台的mod_python程序：【mypython.py】
#!/usr/bin/python
# -*-coding:UTF-8-*- from mod_python import apache, util
from MySQLdb import * def pro1(req, sv):
svalue = sv
req.write(svalue)
只要保证前台Ajax所Post的参数名称 与 mod_python 指定的参数名称一致（如“sv”），就可以获取前台传递过来的参数了。
该方法可以在Firefox上完美的工作，但在其它浏览器则返回501：method not implemented 错误信息。
搜索了很久发现是由于Ajax请求发送的标准数据类型：
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=utf-8")
导致的。好像是mod_python/util.py 无法正确解析，应该是mod_python的一个bug.
最终没有找到好的解决方法，最后只能选择一个替代方案：Form + iFrame 的方式来实现无刷新提交。【index.html】
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iFrame测试页面</title> <script language="JavaScript"> function checkForm(){
var messageDiv = document.getElementById("msgDiv");
var product = document.getElementById("product");
var pvalue = product.options[product.selectedIndex].value;
var svalue = document.getElementById("sn").value; if(svalue == ""){
messageDiv.style.color = "Red";
messageDiv.innerHTML = "请输入序列号！";
return false;
}
if (pvalue == 0){ //R2
return true;
}else{
messageDiv.innerHTML = "抱歉，该产品信息尚未入库！";
return false;
}
} function callback(msg){
var mdiv = document.getElementById("msgDiv");
mdiv.innerHTML = msg;
} </script> </head>
<Body style="background-color:#e0f4df">
<br/>
<br/>
<br/>
<br/>
<br/>
<div align="center"> <!--为什么不能用Form表单，因为表单必需有返回，会导致当前页面闪烁或是跳转 -->
<form name="myform" id="myform" action="mypython/pro1" method="POST" target="i_frame" onsubmit="return checkForm()">
<table border="1px" cellspacing="0px" cellpadding="0px">
<tr><td>请选择产品的型号：</td><td>
<select name="pv" id="product">
<option value ="0">3D打印机</option>
<option value ="1">3D扫描仪</option>
</select>
</td></tr>
<tr><td>请输入产品序列号：</td><td>
<input name="sv" id="sn" type="text" size="14" value="" />
</td></tr>
<tr><td colspan="2" align="center">
<input type="submit" value="点击查询"></td></tr>
</table>
</form>
</div>
<br/>
<div align="center" id="msgDiv"></div>
<iframe name="i_frame" width="1px" height="1px" style="display:none" ></iframe>
</Body>
</HTML>
注意，必需定义一个iframe，但width与height不能设置为0px 。然后form里面的target属性必需指定成iframe的name值（如“sv”）。Form里面需要提交到后台的节点需设置name属性。
后台mod_python程序：【mypython.py】
#!/usr/bin/python
# -*-coding:UTF-8-*- from mod_python import apache, util
from MySQLdb import * def pro1(req, sv):
svalue = str(sv)
return "<html><body onload=\"javacript: parent.callback('" + svalue + "')\"></body></html>"
必需使用return返回数据前台才能收到。
可以看到返回的是一段简单的HTML代码，该代码会返回到前台的iFrame里面。且一加载就会运行一句javascript代码。该javascript代码会调用前台父页面的callback()函数把返回的信息输出到指定的DIV之中。
该方法可以实现完美的浏览器兼容。
Ajax前台与Mod_python后台应用示例的更多相关文章
- ajax前台数据到后台
var username = $("#id").val(); var user={"userAccount":username,"userPasswo ...
- ajax前台传到后台乱码，显示问号的问题
response.setContentType("text/html;charset=gbk"); response.setHeader("Cache-Control&q ...
- 解决Ajax前台中文传到后台出现中文乱码
遇到的问题是: 前台利用Ajax, get方式向后台发送中文数据出现乱码. 解决办法是前台两次编码, 后台一次解码即可. 前台jsp文件 1 var text = "张三"; 3 ...
- JAVA WEB 前台实时监控后台程序运行
基本思路: 1. 操作状态在类中以静态变量方式(或公共类存储公共变量方式,SESSION方式.COOKIE方式)存在 2. 前台采用AJAX方式激发后台进行业务逻辑操作,并实时更新操作状态信息 3. ...
- aspx前台调用cs后台方法
随着对于mvc的习惯使用,aspx页面渐渐用的不怎么用了,主要是生命周期感觉上比较慢,要么就用html+handler一般处理程序来装下逼.虽然不用,但还是要给刚工作的人讲下,相信不少人都想过:既然前 ...
- ajax传递数组到后台
//实体类 public class Person { private int ID{get;set;} private string Name{get;set;} private int Age{g ...
- ASP.NET前台JS与后台CS函数如何互相调用
摘要: 在实际的Web开发中,我们可能会常常遇到后台调用前台JS代码或者前台JS调用后台代码的情况.今天就把比较实用的前后台相互调用的方法总结出来和大家分享. 在实际的Web开发中,我们可能会常常遇到 ...
- ASP.NET前台代码绑定后台变量方法总结
经常会碰到在前台代码中要使用(或绑定)后台代码中变量值的问题.一般有<%= str%>和<%# str %>两种方式,这里简单总结一下.如有错误或异议之处,敬请各位指教. 一方 ...
- 转：ASP.NET前台代码绑定后台变量方法总结
经常会碰到在前台代码中要使用(或绑定)后台代码中变量值的问题.一般有<%= str%>和<%# str %>两种方式,这里简单总结一下.如有错误或异议之处,敬请各位指教. 一方 ...
随机推荐
- Java操作SFTP
import java.util.Properties; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import com.jcr ...
- IIS7 rename application or site
rename site 比较容易,在IIS里面就可以直接 rename,也可以用 cmd 的方式 1. 打开 cmd 2. cd C:\Windows\System32\inetsrv 3. appc ...
- loadrunner 功能详解（一） - Run-time Settings
1.General / Run Logic Number of Iterations:说明的是反复循环的次数. 常境的时间中,如果时间设为5分钟,而实际上程序的运行只需要1分钟,而在这项中,选择的是 ...
- scp远程复制
scp 源 目标 -r 复制目录 scp -r root@ip:/XXX/path /XXX 注意:复制目录,包括该目录本身,目的地址无需再加该目录
- service对象
Service 对象 提供用于创建服务程序的一组工具 语法 Shell.Service[.property|method] 属性 Description 服务描述,仅限于 Windows 2000 及 ...
- DataSanp的控制老大-DSServer
DSServer作用:管理DataSnap服务器生命周期.(启动,停止) 一.方法: 1.BroadcastMessage 向所以客户端发送消息,客户端必须已注册通道. 2.BroadcastObje ...
- UITaleView的基础使用及数据展示操作
UITableView表视图,是实用的数据展示的基础控件,是继承于UIScrollView,所以也可以滚动.但不同于UIScrollView,UITableView只可以上下滚动,而不能左右滚动. 因 ...
- 第五百八十三天 how can I 坚持
今天去看了个电影,日本动漫,第一次在电影院看日本动漫,<你的名字>,挺经典的.存在爱情吗?什么是爱情,哎.什么是人. 好像有点感冒了呢,说过自己很久没感冒后,往往就会感冒,这到底是怎么回事 ...
- C++中的左值与右值(二)
以前以为自己把左值和右值已经弄清楚了,果然发现自己还是太年轻了,下面的这些东西是自己通过在网上拾人牙慧,加上自己的理解写的. 1. 2. 怎么区分左值和右值:知乎大神@顾露的回答. 3. 我们不能直接 ...
- 通过反汇编理解函数调用机制（x86和ARM）
如下,一个简单的程序 #include <stdio.h> int add(int a, int b) { return a + b; } void main() { , b = ; in ...