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 %>两种方式,这里简单总结一下.如有错误或异议之处,敬请各位指教. 一方 ...

随机推荐

django model 中class meta
class Meta: ordering = ['-num', 'length'] verbose_name = 'name' verbose_name_plural = 'names' orderi ...
java日期比较，日期计算
版权声明:本文为楼主原创文章,未经楼主允许不得转载,如要转载请注明来源. 都是常用的日期之间的比较方法,供以后参考. 热身:获取当前时间 SimpleDateFormat df = new Simpl ...
lintcode-【简单题】合并区间
题目: 给出若干闭合区间,合并所有重叠的部分. 样例: 给出的区间列表 => 合并后的区间列表: [ [ [1, 3], [1, 6], [2, 6], => [8, 10], [8, 1 ...
MVC Actionlink 参数说明
Html.ActionLink用于输出链接,以下是带参数的例子: @Html.ActionLink("编辑", "Edit", new {id= "1 ...
【Linux】依赖包检查
参考:http://www.cnblogs.com/zc22/p/3197038.html ldd xx.so
eclipes（小白）快捷键
Ctrl+shift+l :自动列出全部快捷键 alt+/ :内容助理 Ctrl+1. :快速修复 Ctrl+shift+o ...
[cocos2d-js]cc.RenderTexture几种用法(数字图片、刮刮乐效果)
[转]http://blog.csdn.net/realcrazysun1/article/details/42393629 本文基于cocos2d-js 3.0版本引擎开发 RenderTextur ...
C++基于TCP和UDP的socket通信
以下是关于socket编程的一个非常经典的例子: 服务端: #include <stdio.h> #include <Winsock2.h> //windows socket的 ...
Android permission
1. users-permission Users-permission is the permission that this app should acquire, so that the app ...
ios NSThred多线程简单使用
关于NSThred开启多线程的方法 - (void)performSelectorInBackground:(SEL)aSelector withObject:(id)arg [self perfor ...

Ajax前台与Mod_python后台应用示例

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

随机推荐

热门专题