jquery ajax 简单范例(界面+后台)
更新时间:2013年11月19日 16:41:17 作者:
jquery ajax示例包含界面及后台部分,经测试效果还不错,喜欢的朋友可以拿去用,或二次修改
界面:
<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;
}
复制代码 代码如下:
<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;
}
相关文章
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
本篇文章介绍了,jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析。需要的朋友参考下2013-04-04
最新评论