ajax测试异步提交
今天测试了$.ajax()方法:
$("a").click(function(){
$.ajax({
url:"MyJsp.jsp",
type:"GET",
success:function(msg){
$("body").append(msg);
}
参数url是目标地址源,type:是请求提交类型,success:function是回调函数,这个方法可以把jsp页面或者html页面直接当做msg传过来添加到body标签之后!
还有个
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
和
$.post("test.cgi", { name: "John", time: "2pm" },
发送请求地址。
function(data){
alert("Data Loaded: " + data);
});
方法,这里除了提交方式不一样,其他都一样:
url:为
data (可选):待发送 Key/value 参数。
callback (可选):发送成功时回调函数。
type (可选):返回内容格式,xml, html, script, json, text, _default。
如:$.get("index.jsp", { name: "John",age:"22" },
function(data){
alert( data);
});
还有个jQuery.getJSON(url, [data], [callback])方法
测试方法是从json里面读取各个省份和省份下的城市加载到两个select标签里
citys.json文件里的数据为:
[{"name":"北京","cities":["西城","东城","崇文","宣武","朝阳","海淀","丰台","石景山","门头沟","房山","通州","顺义","大兴","昌平","平谷","怀柔","密云","延庆"]},{"name":"天津","cities":["青羊","河东","河西","南开","河北","红桥","塘沽","汉沽","大港","东丽","西青","北辰","津南","武清","宝坻","静海","宁河","蓟县","开发区"]},{"name":"河北","cities":["石家庄","秦皇岛","廊坊","保定","邯郸","唐山","邢台","衡水","张家口","承德","沧州","衡水"]},{"name":"山西","cities":["太原","大同","长治","晋中","阳泉","朔州","运城","临汾"]},{"name":"内蒙古","cities":["呼和浩特","赤峰","通辽","锡林郭勒","兴安"]},{"name":"辽宁","cities":["大连","沈阳","鞍山","抚顺","营口","锦州","丹东","朝阳","辽阳","阜新","铁岭","盘锦","本溪","葫芦岛"]},{"name":"吉林","cities":["长春","吉林","四平","辽源","通化","延吉","白城","辽源","松原","临江","珲春"]},{"name":"黑龙江","cities":["哈尔滨","齐齐哈尔","大庆","牡丹江","鹤岗","佳木斯","绥化"]},{"name":"上海","cities":["浦东","杨浦","徐汇","静安","卢湾","黄浦","普陀","闸北","虹口","长宁","宝山","闵行","嘉定","金山","松江","青浦","崇明","奉贤","南汇"]},{"name":"江苏","cities":["南京","苏州","无锡","常州","扬州","徐州","南通","镇江","泰州","淮安","连云港","宿迁","盐城","淮阴","沐阳","张家港"]},{"name":"浙江","cities":["杭州","金华","宁波","温州","嘉兴","绍兴","丽水","湖州","台州","舟山","衢州"]},{"name":"安徽","cities":["合肥","马鞍山","蚌埠","黄山","芜湖","淮南","铜陵","阜阳","宣城","安庆"]},{"name":"福建","cities":["福州","厦门","泉州","漳州","南平","龙岩","莆田","三明","宁德"]},{"name":"江西","cities":["南昌","景德镇","上饶","萍乡","九江","吉安","宜春","鹰潭","新余","赣州"]},{"name":"山东","cities":["青岛","济南","淄博","烟台","泰安","临沂","日照","德州","威海","东营","荷泽","济宁","潍坊","枣庄","聊城"]},{"name":"河南","cities":["郑州","洛阳","开封","平顶山","濮阳","安阳","许昌","南阳","信阳","周口","新乡","焦作","三门峡","商丘"]},{"name":"湖北","cities":["武汉","襄樊","孝感","十堰","荆州","黄石","宜昌","黄冈","恩施","鄂州","江汉","随枣","荆沙","咸宁"]},{"name":"湖南","cities":["长沙","湘潭","岳阳","株洲","怀化","永州","益阳","张家界","常德","衡阳","湘西","邵阳","娄底","郴州"]},{"name":"广东","cities":["广州","深圳","东莞","佛山","珠海","汕头","韶关","江门","梅州","揭阳","中山","河源","惠州","茂名","湛江","阳江","潮州","云浮","汕尾","潮阳","肇庆","顺德","清远"]},{"name":"广西","cities":["南宁","桂林","柳州","梧州","来宾","贵港","玉林","贺州"]},{"name":"海南","cities":["海口","三亚"]},{"name":"重庆","cities":["渝中","大渡口","江北","沙坪坝","九龙坡","南岸","北碚","万盛","双桥","渝北","巴南","万州","涪陵","黔江","长寿"]},{"name":"四川","cities":["成都","达州","南充","乐山","绵阳","德阳","内江","遂宁","宜宾","巴中","自贡","康定","攀枝花"]},{"name":"贵州","cities":["贵阳","遵义","安顺","黔西南","都匀"]},{"name":"云南","cities":["昆明","丽江","昭通","玉溪","临沧","文山","红河","楚雄","大理"]},{"name":"西藏","cities":["拉萨","林芝","日喀则","昌都"]},{"name":"陕西","cities":["西安","咸阳","延安","汉中","榆林","商南","略阳","宜君","麟游","白河"]},{"name":"甘肃","cities":["兰州","金昌","天水","武威","张掖","平凉","酒泉"]},{"name":"青海","cities":["黄南","海南","西宁","海东","海西","海北","果洛","玉树"]},{"name":"宁夏","cities":["银川","吴忠"]},{"name":"新疆","cities":["乌鲁木齐","哈密","喀什","巴音郭楞","昌吉","伊犁","阿勒泰","克拉玛依","博尔塔拉"]},{"name":"香港","cities":["中西区","湾仔区","东区","南区","九龙-油尖旺区","九龙-深水埗区","九龙-九龙城区","九龙-黄大仙区","九龙-观塘区","新界-北区","新界-大埔区","新界-沙田区","新界-西贡区","新界-荃湾区","新界-屯门区","新界-元朗区","新界-葵青区","新界-离岛区"]},{"name":"澳门","cities":["花地玛堂区","圣安多尼堂区","大堂区","望德堂区","风顺堂区","嘉模堂区","圣方济各堂区","路氹城"]}]
其中每个大括号可以看作一个对象,每个:前边是属性名,后边是值,每个[]看成一个数组。
测试js代码为:
var data;
$(function(){
$.getJSON("citys.json",function(msg){
data=msg;
$.each(data,function(){
$("select[name=province]").append("<option>"+this.name+"</option>");
});
$.each(data[0].cities,function(){
$("select[name=city]").append("<option>"+this+"</option>");
})
})
$("select[name=province]").change(function(){
$.each(data,function(){
if(this.name==$("option:selected").val()){
$("select[name=city]").empty();
$.each(this.cities,function(){
$("select[name=city]").append("<option>"+this+"</option>");
})
}
})
})
});
html里的body里为:
<select name="province">
</select>
<br/>
<select name="city">
</select>
还有个方法:jQueryload(url, [data], [callback])
url String
待装入 HTML 网页网址。
data (可选)Map,String
发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
callback (可选)Callback
载入成功时回调函数。
$(function(){
$("a").click(function(){
$("div").load("top.jsp");
});
})
这里的.load(“”)里面可以放整个页面也可以用过滤选择器 只选择加载其中一个选择器比如
$("div").load("top.jsp .myclass");只加载了其中top.jsp里面的一个类标签!
ajax测试异步提交的更多相关文章
- 表单(同步提交)和AJAX(异步提交)示范
表单提交(同步提交) HTML文件: PHP文件: 这样就能接收到HTML里输入的内容,注意: FORM表头method为POST,PHP文件获取的方法就是$_POST,method为GET,PHP的 ...
- 原生AJAX如何异步提交数据?
AJAX概述 AJAX:Asynchronous Javascript And XML,异步的JS和XML.2001,Google为了改进搜索的用户体验,提出了GoogleSugguest效果,正式提 ...
- 使用ajaxfileupload插件进行Ajax Post 异步提交多个文件
前台代码: <div> <div> <img src="images/pro_upload.png" onclick="javascript ...
- ajax.BeginForm异步提交表单并显示更新数据
view代码: <!--基本信息模块--> 2 <div class="profile_box" id="basicInfo"> 3 & ...
- TP 框架 ajax[利用异步提交表单]
//[] $(function () { $("#send-btn" ).click(function (){ //接受表单的值 var username=$('input[nam ...
- 使用jQuery.form插件,实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
- ajax实现异步前后台交互,模拟百度搜索框智能提示
1.什么是异步?在传统的网站项目中,填写一堆数据,最后点击提交,在点击提交的这一刻才实现数据提交,前后台交互.在你点击提交之前数据是没有提交到后台的.这样就会造成很大的不便.比如,我填了一大堆数据,结 ...
- Ajax.BeginForm的异步提交数据 简介
Html.BeginForm与Ajax.BeginForm都是MVC架构中的表单元素,它们从字面上可以看到区别,即Html.BeginForm是普通的表单提交,而Ajax.BeginForm是支持异步 ...
- jQuery选取所有复选框被选中的值并用Ajax异步提交数据
昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...
随机推荐
- HTML5 本地存储 LocalStorage
说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个co ...
- MvcPager分页控件的使用
1.引入MvcPager.dll(MvcPager分页控件:http://www.webdiyer.com/mvcpager/) 2.后台C# Controller: //Ddemo使用Webdiye ...
- Arcgis for JS之Cluster聚类分析的实现
原文:Arcgis for JS之Cluster聚类分析的实现 在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来 的,包含XY坐标信息的,通过graphic和graphicla ...
- 一些html页面资料
一下没有什么重要的,只是我平时积累的一些页面,紧急时或许会有用,相信过一段时间去东宇(公司分公司)了,这些资料页带不走,还不如留在博客里,趁组长级别们开会去了,他们已经开了一个点啦!我的组长去东宇查看 ...
- 【python PIL学习】给照片打水印
不知道别人是怎么做的,闲着无聊就根据前几天看到的一些PIL里面的函数,写了这个小程序,经过测试,基本可以给所有像宽400以上的图片打上从左下到右上的看上去质量尚可的水印,更小的图片水印偏下.写完觉得很 ...
- The Best Path---hdu5883(欧拉路径)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5883 题意:n 个点 m 条无向边的图,找一个欧拉通路/回路使得这个路径所有结点的异或值最大. 先判断 ...
- Selenium2学习-029-WebUI自动化实战实例-027-判断元素是否存在
非常简单的源码,敬请各位小主参阅.若有不足之处,敬请大神指正,不胜感激! /** * Verify the element exist or not * * @author Aaron.ffp * @ ...
- Spring AOP 实现原理与 CGLIB 应用
https://www.ibm.com/developerworks/cn/java/j-lo-springaopcglib/ AOP(Aspect Orient Programming),也就是面向 ...
- TermServDevices报错导致服务器死机(远程服务使用者必读)
事件类型: 错误 事件来源: TermServDevices 事件 ID: 1111 描述:打印机 !!192.168.99.6!HP LaserJet 3050 Series PCL 5e 所需的驱 ...
- MySQL主从配置问题整理
前段时间线下数据库需要搭建主从库.由于不想备份数据库,打算直接克隆数据库虚拟机到新的一台,然后配置主从同步.以前没这么干过,所以也没有遇到过什么问题,今天把遇到的问题整理了一下. 192.168.3. ...