首页 > 下载 > 下载详文:ASP.NET、JSP、PHP的Jquery提交

ASP.NET、JSP、PHP的Jquery提交

发布时间:2011年07月09日 11时44分56秒   属性:程序Web开发 > Web综合    访问次数:25009
字体: 初始 添加收藏 分享给好友
ASP.NET、JSP、PHP的Jquery post、get提交

Web开发Jquery ajax() post提交是目前应用广泛的方法,在ASP.NET、JSP、PHP三种web语言开发中,ASP.NET有自身的Ajax框架,在.NET FrameWork 3.0提供了Ajax组件(AJAX Control Toolkit应用于服务器控件),Visual studio2010又将Jquery纳入ASP.NET项目,在ASP.NET MVC中目前又增加MicrosoftAjax.js框架,MicrosoftAjax.js系列框架已不比Jquery的功能弱(只是Jquery的突出的html元素样式控制),虽然目前大部分用在ASP.NET MVC项目里,但是同时也能用以其它环境下的web客户端开发,本文将主要介绍Jquery应用在ASP.NET、JSP、PHP中的数据表单提交和传输。本文和前面 ASP.NET、PHP、JSP的POST提交 有相似之处,只是前面的是以传统的 post提交,而本文采用Jquery的post的set方式提交。

ASP.NET Jquery 提交

 ASP.NET 采用Jqurty post 或 get方式提交,在PageGetdata.htm页面中通超链接(id为putLink)提交给ASP.NET的Default.aspx,然后通过div(id为myPass)显示回发数据, 在Default.aspx页面后台输出当前系统时间和提交weisim3Page参数的值。下面是在PageGetdata.htm代码。

HTML 代码  复制
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { //GET提交 $("a#putLink").click(function () { $.get("Default.aspx", { weisim3Page: "www.weisim3.com" }, function (response) { //alert(response); $("#myPass").text(response); }); }); $("a#putLink").click(function () { $.get("Default.aspx", "weisim3Page=www.weisim3.com", function (response) { //alert(response); $("#myPass").text(response); }); }); //POST提交 $("a#putLink").click(function () { $.post("Default.aspx", "weisim3Page=www.weisim3.com", function (response) { alert(response); $("#myPass").text(response); }); }); //POST提交 $("a#putLink").click(function () { $.post("Default.aspx",{ weisim3Page: "www.weisim3.com" }, function (response) { //alert(response); $("#myPass").text(response); }); }); }) </script> </head> <body> <a href="#" id="putLink">Get Server Time</a> <div id="myPass" style=" padding:3px; color:Blue"></div> </body> </html>

上面代码运行结果,在本示例实际文件中是注释其中任意三个按钮方法挨个测试结果

 JSP Jquery 提交

在JSP的Jquery post或get提交提方式中,本示例通过index.html提交,在超链接(id为inServer)触发Click事件,进行Jquery post或get提交给DataSet.jsp,同时在页面加入了input text 用以输入字符提交给JSP,然后依然是div(id为myPass)显示回发数据,在DataSet.jsp输出在index.html的Input text的值。下面是代码。

HTML 代码  复制
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script src="Script/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#inServer").click(function () { $.post("DataSet.jsp", "Name="+$('#name').val(), function (response) { $("#myPass").text(response); }); $("#inServer").click(function () { $.post("DataSet.jsp", {Name:$('#name').val()}, function (response) { $("#myPass").text(response); });/* */ //get 方法 $("#inServer").click(function () { $.get("DataSet.jsp", "Name="+$('#name').val(), function (response) { $("#myPass").text(response); }); }); //get 方法 $("#inServer").click(function () { $.get("DataSet.jsp", {Name:$('#name').val()}, function (response) { $("#myPass").text(response); }); }); }); </script> </head> <body> <input id="name" type="text" /> <a href="#" id="inServer">Get Server</a> <div id="myPass"></div> </body> </html>

JSP Jquery post或get提交,在本示例实际文件项目中注释任意三个Click方法挨个测试结果

PHP Jquery提交

PHP Jquery提交示例中在index.html页面中放入input text(id为name),通过按钮(id为btn_PutIn)的Click触发提交,然后还是用div(id为text)显示回发数据,在Default.php中同样输出input text的值,下面代码。

HTML 代码  复制
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>PHP Jquery</title> <script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"> </script> <script type="text/javascript"> $(document).ready( function () { $('#btn_PutIn').click ( function () { /*$.post("Default.php", {name:$('#name').val()},function (response) { //alert(response); $("#text").text(response); } );*/ $.post("Default.php", "name="+$('#name').val(),function (response) { //alert(response); $("#text").text(response); } ); /* $.get("Default.php", {name:$('#name').val()}, function (response) { //alert(response); window.setTimeout($("#text").text(response),1000) ; });*/ }); }) </script> </head> <body> <div id="text" ></div> <input type="text" id="name" name="name" /> <input type="button" value="提交" id="btn_PutIn"/> </body> </html>

PHP Jquery post 提交效果演示

本文介绍了三种语言平台采用Jquery post或get方式提交,关于Jquery post和get提交更加详细的介绍可以参考官方地址http://api.jquery.com/jQuery.post/http://api.jquery.com/jQuery.get/ (Jquery官方介绍示例展示一般以PHP为主)。

下载文件提示:

  • ASP.NET jquery 提交 ------ JqueryAspNet文件夹(可以直接打开运行)
  • JSP jquery 提交 ------- JqueryJSP文件夹(将自文件夹web拷贝至自己项目即可)
  • PHP jquery提交 ------- JqueryPHP文件夹(将自文件夹拷贝至自己项目即可)
免费
ASP.NET、JSP、PHP的Jquery提交 (10)
本下载连接不支持第三下载工具打开,请直接点击下载即可
遺昕 | Weisim3.com 下载许可条款 ( 您必须接受同意才可下载 ) .