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来 ...
随机推荐
- [收藏]NET技术+25台服务器怎样支撑世界第54大网站
.NET技术+25台服务器怎样支撑世界第54大网站 英文原文:StackOverflow Update: 560M Pageviews A Month, 25 Servers, And It's ...
- 用户登录验证例题用的ajax
1.登录页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 智能手机,医疗诊断,云会议(gotomeeting/citrix)
在诊断领域已出现很多大有希望的创新,它们可能会起到真正的变革作用. 例如,有一种新技术可以让健康护理工作者用一部智能手机拍摄高质量的视网膜图像.这些数码照片像素很高,足以帮助检测白内障.黄斑退化.糖尿 ...
- 巧用AWK处理二进制数据文件
AWK是Unix下的一款功能强大的文本格式化和抽取工具.利用这个工具,可以对复杂的文本文件进行整理,提取其中的全部或者部分数据,按照需要的格式予以显示.需要说明的是,AWK的强大功能只针对纯文本文件. ...
- 【Java 基础篇】【第七课】组合
我所理解的组合就是在一个类当中又包含了另一个类的对象. 这样的方式就是组合吧: 电池是一个类,有电量 手电筒需要电池 看代码吧: // 电池类 class Battery { // 充电 public ...
- npm的使用
npm的用途: 用官方的包 用其他人的包 传自己的包给别人用 一: 安装 1.用别人的: npm install argv 这样下载好之后,argv包就放在了工程目录下的node_modules目录中 ...
- NodeJS模块的使用
在NodeJS中,每个js文件就是一个模块,而文件路径就是模块名, 在编写每个模块时,都有require.exports.module三个预先定义好的变量可供使用. require函数用于在当前模块中 ...
- 【SQL Server】左联接,右联接,内联接的比较
首先需要解释一下这几个联接的意思: left join(左联接): 返回包括左表中的所有记录和右表中联结字段相等的记录. right join(右联接): 返回包括右表中的所有记录和左表中联结字段相等 ...
- ArcSDE for SQL Server安装及在ArcMap中创建ArcSDE连接
原文:ArcSDE for SQL Server安装及在ArcMap中创建ArcSDE连接 安装ArcSDE for SQL Server,最后一步成功后的界面如下: 在ArcMap中创建ArcSDE ...
- Xcode插件管理
在使用Xcode的时候,公司同事使用/// 和//TODO 就能打出很多注释信息.虽然他们帮忙给我也装了,但是我却不知道怎么弄的.今天在家无聊,过来自己实践了一把. so easy. 1.我使用的是P ...