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来 ...
随机推荐
- sql CRUD 增删改查复习汇总
1.创建数据库create database 数据库名称删除数据库drop database 数据库名称2.创建表create table 表名( 列名 类型(长度) 自增长 主键 非空,)自增 ...
- 深入GetMessage和PeekMessage
http://blog.csdn.net/fireseed/article/details/2176 http://www.cnblogs.com/sadier/articles/100948.htm ...
- Redis-统计活跃用户
Bitmap(即Bitset)Bitmap是一串连续的2进制数字(0或1),每一位所在的位置为偏移(offset),在bitmap上可执行AND,OR,XOR以及其它位操作. package test ...
- Qt自定义model
前面我们说了Qt提供的几个预定义model.但是,面对变化万千的需求,那几个model是远远不能满足我们的需要的.另外,对于Qt这种框架来说,model的选择首先要能满足绝大多数功能的需要,这就是说, ...
- 通过IP获得IP所在地的三个接口
http://ip.qq.com/cgi-bin/searchip?searchip1=180.168.144.211 http://ip.taobao.com/service/getIpInfo.p ...
- .SQL Server中 image类型数据的比较
原文:.SQL Server中 image类型数据的比较 在SQL Server中如果你对text.ntext或者image数据类型的数据进行比较.将会提示:不能比较或排序 text.ntext 和 ...
- magento csv导入
- LightOj1054 - Efficient Pseudo Code ( 求n的m次方的因子和 )
题目链接:http://lightoj.com/volume_showproblem.php?problem=1054 题意:给你两个数n和m, 求n^m的所有因子和,结果对1000000007求余; ...
- asp.net MVC中如何用Membership类和自定义的数据库进行登录验证
asp.net MVC 内置的membershipProvider可以实现用户登陆验证,但是它用的是自动创建的数据库,所以你想用本地数据库数据去验证,是通过不了的. 如果我们想用自己的数据库的话,可以 ...
- I.MX6 WIFI wireless_tools 移植
/******************************************************************************** * I.MX6 WIFI wirel ...