jquery ajax 簡單范例(界面+后臺)
更新時間:2013年11月19日 16:41:17 作者:
jquery ajax示例包含界面及后臺部分,經(jīng)測試效果還不錯,喜歡的朋友可以拿去用,或二次修改
界面:
<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("外部內(nèi)容加載成功!" + xhr);
if (statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});
$(document).ready(function () {
$("#getbutton").click(function () {
$.get("/DownSet/index", function (data, status) {
alert("數(shù)據(jù):" + data + "\n狀態(tài):" + status);
});
});
});
$(document).ready(function () {
$("#postbutton").click(function () {
$.get("/CustomerInformation/getS", { par: "ww" }, function (data, status) {
alert("數(shù)據(jù):" + data + "\n狀態(tài):" + 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;
}
復(fù)制代碼 代碼如下:
<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("外部內(nèi)容加載成功!" + xhr);
if (statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});
$(document).ready(function () {
$("#getbutton").click(function () {
$.get("/DownSet/index", function (data, status) {
alert("數(shù)據(jù):" + data + "\n狀態(tài):" + status);
});
});
});
$(document).ready(function () {
$("#postbutton").click(function () {
$.get("/CustomerInformation/getS", { par: "ww" }, function (data, status) {
alert("數(shù)據(jù):" + data + "\n狀態(tài):" + 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>
后臺:
復(fù)制代碼 代碼如下:
public string getS(string par)
{
string content = "";
if (par.Equals("ww"))
{
content = "cheng gong le";
}
else
{
content = "shi bai le";
}
return content;
}
相關(guān)文章
jQuery基于muipicker實現(xiàn)仿ios時間選擇
本文給大家分享的是把jQuery的muipicker插件修改實現(xiàn)仿IOS時間選擇特效,非常的不錯,有需要的小伙伴可以參考下。2016-02-02JQuery實現(xiàn)鼠標(biāo)移動圖片顯示描述層的方法
這篇文章主要介紹了JQuery實現(xiàn)鼠標(biāo)移動圖片顯示描述層的方法,涉及jQuery鼠標(biāo)事件及動畫效果的使用技巧,需要的朋友可以參考下2015-06-06jQuery 遍歷- 關(guān)于closest() 的方法介紹以及與parents()的方法區(qū)別分析
本篇文章介紹了,jQuery 遍歷- 關(guān)于closest() 的方法介紹以及與parents()的方法區(qū)別分析。需要的朋友參考下2013-04-04jQuery 實現(xiàn)批量提交表格多行數(shù)據(jù)的方法
今天小編就為大家分享一篇jQuery 實現(xiàn)批量提交表格多行數(shù)據(jù)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08