jquery ajax 简单范例(界面+后台)


Posted in Javascript onNovember 19, 2013

界面:

<script> 
$(document).ready(function () { 
$("#b01").click(function () { 
htmlobj = $.ajax({ url: "/Content/upFile/测试.txt", async: false }); 
$("#div01").html(htmlobj.responseText); 
}); 
}); $(document).ready(function () { 
$("#test").load("/Content/upFile/测试2.txt #p1", function (responseTxt, statusTxt, xhr) { 
if (statusTxt == "success") 
alert("外部内容加载成功!" + xhr); 
if (statusTxt == "error") 
alert("Error: " + xhr.status + ": " + xhr.statusText); 
}); 
}); 
$(document).ready(function () { 
$("#getbutton").click(function () { 
$.get("/DownSet/index", function (data, status) { 
alert("数据:" + data + "\n状态:" + status); 
}); 
}); 
}); 
$(document).ready(function () { 
$("#postbutton").click(function () { 
$.get("/CustomerInformation/getS", { par: "ww" }, function (data, status) { 
alert("数据:" + data + "\n状态:" + status); 
$("#postText").html(data); 
}); 
}); 
}); 
</script> 
<div id="div04"> 
<h2 id="postText">post方法加载文本后 会在这里显示</h2> 
<input type="button" value="post方法获取" id="postbutton" /> 
</div> 
<div id="div03"> 
<h2 id="getText">get方法加载文本后 会在这里显示</h2> 
<input type="button" value="get方法获取" id="getbutton" /> 
</div> 
<div id="div02"> 
<h2>jquery load方法加载的显示在这里</h2> 
<h2 id="test">加载文本后 会在这里显示</h2> 
</div> 
<div id="div01"> 
<h2>加载文本后 会在这里显示</h2> 
</div> 
<p> 
<input type="button" value="加载文本" id="b01"/> 
</p>

后台:
public string getS(string par) 
{ 
string content = ""; 
if (par.Equals("ww")) 
{ 
content = "cheng gong le"; 
} 
else 
{ 
content = "shi bai le"; 
} 
return content; 
}
Javascript 相关文章推荐
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
JavaScript实现经典排序算法之插入排序
Dec 28 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
JavaScript中的Proxy对象
Nov 27 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 #Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 #Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 #Javascript
JS简单实现登陆验证附效果图
Nov 19 #Javascript
JS随机漂浮广告代码具体实例
Nov 19 #Javascript
JS简单实现元素复制示例附图
Nov 19 #Javascript
js获取当月最后一天实例代码
Nov 19 #Javascript
You might like
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
php 中英文语言转换类
2011/09/07 PHP
php常用字符函数实例小结
2016/12/29 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
nodejs文件夹深层复制功能
2019/09/03 NodeJs
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
Python解决鸡兔同笼问题的方法
2014/12/20 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
python tkinter组件摆放方式详解
2019/09/16 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
项目经理任命书
2014/06/04 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
导游词之无锡唐城
2019/12/12 职场文书