摘要:JQery ajax機制--"$.post"
昨天發表 .Net AJAX機制---"CallBack"一文後，裡面有提到ajax的技術尚還有jquery ...等，
，今天會發表這篇是因為有位同事問我一個問題，他提供一個網址問我為何裡面的資料
會每隔一段時間就更新某些區塊，於是乎我檢視原始碼看到那個div區塊其實是空的，但是
有給個id，在上方又載入個jquery.js，於是就猜出是用JQ的ajax技術，在用JS設定多久呼叫
那個執行ajax的funtion，結果被我猜中了，這是題外話，不囉嗦，還是說正題，
就本人而言還是比較偏好JQ的ajax技術，因為上手真的比較簡單(效能還沒去比較過)
，趁著工作空檔，順便寫了一個JQery的ajax機制post的用法，為了讓讀者能夠盡速上手
，我就不用前篇文章貼圖片的方式貼上，直接貼上code方便大家複製修改。
首先我們還是來看看官方文件介紹post這個方法 http://api.jquery.com/jQuery.post/ ，一開始官方就說了，
post方法有四個參數，除第一個一定要帶值外，其他三個可帶可不帶，如下
jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )
參數代表甚麼意思，提供的網址也寫得很清楚了，就不多墜述。
由於這次的範例，本人是要把client的side參數傳到server side，再由service side判斷後傳出，因此我用了官網的這個範例
EXAMPLE
$.post("test.php", { name: "John", time: "2pm" },
function(data) {
alert("Data Loaded: " + data);
});
在client我post給server side一個參數名稱為name，值為"久里"的data
Client Side：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>馬久里的JQuery測試</title>
//載入jquery.js
<script type="text/javascript" src="../Script/jquery.js"></script>
<script type="text/javascript">
function datapost() {
$.post(location.href, {name:"久里"}, function (data) {
alert(data);
})
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div onclick="datapost()">
按我
</div>
</form>
</body>
</html>
在server side收到資料後判斷再將資料寫出
Server Side：
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
If Not String.IsNullOrEmpty(Request("name")) Then
If Request("name").ToString = "久里" Then
'聰明的讀者這時候就知道這段可以去撈DB的資料在write出來交給client顯示
Response.Write("馬久里 & 小布")
'讀者可以是者把response.End拿掉看看
Response.End()
End If
End If
End Sub
瀏覽畫面如下：
好了，如此便完成了AJAX，是不是很簡單呢! ^_^
<pre><code class="language-vbnet"><script src="../Script/jquery.js" type="text/javascript"></script>
</code></pre>
<p>
</p>
<div class="fb-like" data-href="http://www.dotblogs.com.tw/justforgood/" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
<div class="article__tags"><i class='fa fa-tag mr-1'></i><ul><li><a href='/justforgood/Tags?qq=AJAX'>AJAX</a></li></ul></div>
<div class="article__navs">
<ul>
<li><a href="/justforgood">回首頁</a></li>
</ul>
</div>
<ins class="adsbygoogle" style="display: block !important" data-ad-client="ca-pub-5120420174726287" data-ad-slot="1709268749" data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div data-tag data-cid="bfe01015-940f-45df-a780-6082a52b98df" data-bid="185a3b06-06f1-4716-a3f5-65472395b0f0" data-sname="AJAX" data-url="/justforgood/Tags?handler=BlogTagsList" class="article__ralated-posts">
</div>
<div data-serial data-cid="bfe01015-940f-45df-a780-6082a52b98df" data-bid="185a3b06-06f1-4716-a3f5-65472395b0f0" data-sname="JQuery" data-url="/justforgood/Series?handler=BlogSeriesList" class="article__serial-posts">
</div>
</article>
</div>
<div class="sidebar">
<div class="search-block mobi-hide">
<form method="get" action="/justforgood/Search">
<input name="q" placeholder="請用「空白」區分關鍵字" />
<button><i class="fa fa-search"></i></button>
</form>
</div>
<div class="side-sticky">
<ins class="adsbygoogle" style="display: inline-block !important; width: 250px; height: 250px" data-ad-client="ca-pub-5120420174726287" data-ad-slot="8394930749"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
<input id="fnBlogList" name="fnBlogList" type="hidden" value="" />
</div>
<input id="fnBlogDetail" name="fnBlogDetail" type="hidden" value="" />
<input id="fnView" name="fnView" type="hidden" value="/justforgood/2012/04/20/71672?handler=UpdateViewCount" />
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8On1Bak2FYNMqBo2AY7VEawctTeR9kYthaq3JhdRh42NcvvJDeDNjc2Nl_3TLswy95i0HGs3dfMhlXKTRAaKkWbBRyPVH25IGsOIPa2_MZG26bgYqwRc7eO0rXP28KMB-KCmiwwRaS7hsRy0BePhp0o" />
</div>
</div>
</div>
<footer class="page-footer">
<div class="center-container">
<nav class="footer-nav">
<ul>
<li><a data-fancybox data-type="iframe" href="/Policy?i=1">服務規範</a></li>
<li><a href="https://m.me/Dotblogs" target="_blank">聯絡我們</a></li>
</ul>
</nav>
<div class="copyright">© 2025 點部落 Ver. 2022.9.27.1 </div>
<div class="host">
<a href="http://demoshop.tw" target="_blank">電魔小鋪有限公司</a> 製作、維運；<a href="http://www.itop.com.tw" target="_blank">登豐數位科技</a> 提供資安檢測
</div>
</div>
</footer>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js" crossorigin="anonymous" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
</script>
<script>(window.jQuery||document.write("\u003Cscript src=\u0022/lib/jquery/jquery.min.js\u0022 crossorigin=\u0022anonymous\u0022 integrity=\u0022sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV\u002BrXbYlF2cqB8txI/8aZajjp4Bqd\u002BV6D5IgvKT\u0022\u003E\u003C/script\u003E"));</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="/js/powered_by_demoshop.js?v=39Y68HHdNm1y6RipqrL8DxzmLT9RyvUd_DvJnPg6zrQ"></script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-575565756a486ff8"></script>
</body>
</html>