Ajax的好处就是可以实现无刷新动态更新。后台配合Mod_python程序，使后台处理变得非常高效简洁。【index.html】

  1. <HTML>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Ajax测试页面</title>
  5.  
  6. <script language="JavaScript">
  7.  
  8. function checkForm(){
  9. 	var messageDiv = document.getElementById("msgDiv");
  10. 	var product = document.getElementById("product");
  11. 	var pvalue = product.options[product.selectedIndex].value;
  12.     var svalue = document.getElementById("sn").value;
  13.  
  14. 	if(svalue == ""){
  15. 		messageDiv.style.color = "Red";
  16. 		messageDiv.innerHTML = "请输入序列号！";
  17. 		return false;
  18. 	}
  19.     //alert(svalue);
  20. 	//var par = "pv=" + pvalue + "&sv=" + svalue
  21. 	var par = "sv=" + svalue
  22.  
  23.     if (pvalue == 0){
  24. 		sendRequest("mypython/pro1", par);
  25. 		return true;
  26.     }else{
  27. 		messageDiv.innerHTML = "抱歉，该产品信息尚未入库！";
  28. 		return false;
  29.     }
  30. }
  31.  
  32. function sendRequest(url, par){
  33. 	//注意，这里定义的是一个局部变量，即每调用一次都创建一个新的XMLHttpRequest对象，即发送一个新的请求
  34. 	var xmlHttp = false;
  35. 	if(window.XMLHttpRequest){ //for mozilla
  36. 		xmlHttp = new XMLHttpRequest();
  37. 	}else if(window.ActiveXObject){//for IE
  38. 		try{
  39. 			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  40. 		}catch(e){
  41. 			try{
  42. 				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  43. 			}catch(e){ }
  44. 		}
  45. 	}
  46. 	xmlHttp.open("POST",url,true);
  47. 	xmlHttp.onreadystatechange = function(){
  48. 	if(xmlHttp.readyState == 4) {
  49. 		if(xmlHttp.status == 200) {
  50. 			//alert("123456");
  51. 			var mdiv = document.getElementById("msgDiv");
  52. 			mdiv.style.color = "Red";
  53. 			mdiv.innerHTML = xmlHttp.responseText;
  54. 		}else
  55. 			alert("Error!" + "\nStatus code is: " + xmlHttp.status + "\nStatus text is: " + xmlHttp.statusText);
  56. 		}
  57. 	}
  58. 	xmlHttp.setRequestHeader("Content-length", par.length);
  59. 	xmlHttp.setRequestHeader("Content-Type","text/xml");
  60. 　　　　//xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  61.         xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=utf-8");
  62. 	xmlHttp.send(par); // 名＝值＆名＝值＆名＝值...
  63. }
  64.  
  65. </script>
  66.  
  67. </head>
  68. <Body style="background-color:#e0f4df">
  69. <br/>
  70. <br/>
  71. <br/>
  72. <br/>
  73. <br/>
  74. <div align="center">
  75.  
  76. <!--为什么不能用Form表单，因为表单必需有返回，会导致当前页面闪烁或是跳转 -->
  77. <!--form name="myform" id="myform" action="" method="POST" onsubmit="return checkForm()"-->
  78. <table border="1px" cellspacing="0px" cellpadding="0px">
  79. <tr><td>请选择产品的型号：</td><td>
  80. <select id="product">
  81.   <option value ="0">3D打印机</option>
  82.   <option value ="1">3D扫描仪</option>
  83. </select>
  84. </td></tr>
  85. <tr><td>请输入产品序列号：</td><td>
  86.   <input id="sn" type="text" size="14" value="" />
  87. </td></tr>
  88. <tr><td colspan="2" align="center">
  89. <button onClick="return checkForm()">点击查询</button>
  90. </table>
  91. <!--/form -->
  92. </div>
  93. <br/>
  94. <div align="center" id="msgDiv"></div>
  95. </Body>
  96. </HTML>

然后就是后台的mod_python程序：【mypython.py】

  1. #!/usr/bin/python
  2. # -*-coding:UTF-8-*-
  3.  
  4. from mod_python import apache, util
  5. from MySQLdb import *
  6.  
  7. def pro1(req, sv):
  8.     svalue = sv
  9.     req.write(svalue)

只要保证前台Ajax所Post的参数名称 与 mod_python 指定的参数名称一致（如“sv”），就可以获取前台传递过来的参数了。

该方法可以在Firefox上完美的工作，但在其它浏览器则返回501：method not implemented 错误信息。

搜索了很久发现是由于Ajax请求发送的标准数据类型：

  1. xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=utf-8")

导致的。好像是mod_python/util.py 无法正确解析，应该是mod_python的一个bug.

最终没有找到好的解决方法，最后只能选择一个替代方案：Form + iFrame 的方式来实现无刷新提交。【index.html】

  1. <HTML>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>iFrame测试页面</title>
  5.  
  6. <script language="JavaScript">
  7.  
  8. function checkForm(){
  9. 	var messageDiv = document.getElementById("msgDiv");
  10. 	var product = document.getElementById("product");
  11. 	var pvalue = product.options[product.selectedIndex].value;
  12.     var svalue = document.getElementById("sn").value;
  13.  
  14. 	if(svalue == ""){
  15. 		messageDiv.style.color = "Red";
  16. 		messageDiv.innerHTML = "请输入序列号！";
  17. 		return false;
  18. 	}
  19.     if (pvalue == 0){ //R2
  20. 		return true;
  21.     }else{
  22. 		messageDiv.innerHTML = "抱歉，该产品信息尚未入库！";
  23. 		return false;
  24.     }
  25. }
  26.  
  27. function callback(msg){
  28.     var mdiv = document.getElementById("msgDiv");
  29.     mdiv.innerHTML = msg;
  30. }
  31.  
  32. </script>
  33.  
  34. </head>
  35. <Body style="background-color:#e0f4df">
  36. <br/>
  37. <br/>
  38. <br/>
  39. <br/>
  40. <br/>
  41. <div align="center">
  42.  
  43. <!--为什么不能用Form表单，因为表单必需有返回，会导致当前页面闪烁或是跳转 -->
  44. <form name="myform" id="myform" action="mypython/pro1" method="POST" target="i_frame" onsubmit="return checkForm()">
  45. <table border="1px" cellspacing="0px" cellpadding="0px">
  46. <tr><td>请选择产品的型号：</td><td>
  47. <select name="pv" id="product">
  48.   <option value ="0">3D打印机</option>
  49.   <option value ="1">3D扫描仪</option>
  50. </select>
  51. </td></tr>
  52. <tr><td>请输入产品序列号：</td><td>
  53.   <input name="sv" id="sn" type="text" size="14" value="" />
  54. </td></tr>
  55. <tr><td colspan="2" align="center">
  56. <input type="submit" value="点击查询"></td></tr>
  57. </table>
  58. </form>
  59. </div>
  60. <br/>
  61. <div align="center" id="msgDiv"></div>
  62. <iframe name="i_frame" width="1px" height="1px" style="display:none" ></iframe>
  63. </Body>
  64. </HTML>

注意，必需定义一个iframe，但width与height不能设置为0px 。然后form里面的target属性必需指定成iframe的name值（如“sv”）。Form里面需要提交到后台的节点需设置name属性。

后台mod_python程序：【mypython.py】

  1. #!/usr/bin/python
  2. # -*-coding:UTF-8-*-
  3.  
  4. from mod_python import apache, util
  5. from MySQLdb import *
  6.  
  7. def pro1(req, sv):
  8.     svalue = str(sv)
  9.     return "<html><body onload=\"javacript: parent.callback('" + svalue + "')\"></body></html>"

必需使用return返回数据前台才能收到。

可以看到返回的是一段简单的HTML代码，该代码会返回到前台的iFrame里面。且一加载就会运行一句javascript代码。该javascript代码会调用前台父页面的callback()函数把返回的信息输出到指定的DIV之中。

该方法可以实现完美的浏览器兼容。

Ajax前台与Mod_python后台应用示例的更多相关文章

  1. ajax前台数据到后台

    var username = $("#id").val(); var user={"userAccount":username,"userPasswo ...

  2. ajax前台传到后台乱码，显示问号的问题

    response.setContentType("text/html;charset=gbk"); response.setHeader("Cache-Control&q ...

  3. 解决Ajax前台中文传到后台出现中文乱码

    遇到的问题是: 前台利用Ajax, get方式向后台发送中文数据出现乱码. 解决办法是前台两次编码, 后台一次解码即可. 前台jsp文件 1 var text = "张三"; 3 ...

  4. JAVA WEB 前台实时监控后台程序运行

    基本思路: 1. 操作状态在类中以静态变量方式(或公共类存储公共变量方式,SESSION方式.COOKIE方式)存在 2. 前台采用AJAX方式激发后台进行业务逻辑操作,并实时更新操作状态信息 3.  ...

  5. aspx前台调用cs后台方法

    随着对于mvc的习惯使用,aspx页面渐渐用的不怎么用了,主要是生命周期感觉上比较慢,要么就用html+handler一般处理程序来装下逼.虽然不用,但还是要给刚工作的人讲下,相信不少人都想过:既然前 ...

  6. ajax传递数组到后台

    //实体类 public class Person { private int ID{get;set;} private string Name{get;set;} private int Age{g ...

  7. ASP.NET前台JS与后台CS函数如何互相调用

    摘要: 在实际的Web开发中,我们可能会常常遇到后台调用前台JS代码或者前台JS调用后台代码的情况.今天就把比较实用的前后台相互调用的方法总结出来和大家分享. 在实际的Web开发中,我们可能会常常遇到 ...

  8. ASP.NET前台代码绑定后台变量方法总结

    经常会碰到在前台代码中要使用(或绑定)后台代码中变量值的问题.一般有<%= str%>和<%# str %>两种方式,这里简单总结一下.如有错误或异议之处,敬请各位指教. 一方 ...

  9. 转：ASP.NET前台代码绑定后台变量方法总结

    经常会碰到在前台代码中要使用(或绑定)后台代码中变量值的问题.一般有<%= str%>和<%# str %>两种方式,这里简单总结一下.如有错误或异议之处,敬请各位指教. 一方 ...

随机推荐

  1. JAVA设计模式之访问者模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述访问者(Visitor)模式的: 访问者模式是对象的行为模式.访问者模式的目的是封装一些施加于某种数据结构元素之上的操作.一旦这些操作需要 ...

  2. 构造方法Constructor

    构造函数的名称与类名相同,没有返回值类型,主要用于在创建对象的时候进行一些初始化操作,如一个类中没有构造方法,java会默认给一个无参的构造方法

  3. 查看/修改 Linux 时间和时区

    查看/修改Linux时区和时间 一.时区      1. 查看当前时区                 date -R      2. 修改设置时区          方法(1)            ...

  4. html-css实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. ffmpeg去logo<转>

    用到 video filter —— delogo 通过周围像素插值去除 logo. 参数介绍: x y (必须)指定 logo 的坐标. w h (必须)指定 logo 的宽和高. band, t ...

  6. android 根据包名打开app程序

    如: 如打开微信: 查看包名的工具app:http://pan.baidu.com/s/1kVK2ER9 效果如下: 查看包名.版本和签名的工具app:http://pan.baidu.com/s/1 ...

  7. JavaWEB域对象

    PageContext: ServletRequest: HttpSession: ServletContext: void setAttribute(String name, Object valu ...

  8. Java NIO教程 Channel

    Channel是一个连接到数据源的通道.程序不能直接用Channel中的数据,必须让Channel与BtyeBuffer交互数据,才能使用Buffer中的数据. 我们用FileChannel作为引子, ...

  9. nginx限制ip连接数和带宽

    今天有个人问我,nginx怎么限制ip连接数,突然想不起来了,年龄大了,脑子不怎么好使了.还要看一下配置才想起了.那个人又问我,你测试过的吗?一下子把我问蒙了,我真没测试过了,也不知道启作用了没有.下 ...

  10. Selenium2+python自动化5-操作浏览器基本方法

    前言 前面已经把环境搭建好了,这从这篇开始,正式学习selenium的webdriver框架.我们平常说的 selenium自动化,其实它并不是类似于QTP之类的有GUI界面的可视化工具,我们要学的是 ...