jquery ajax執行個體應用使用說明

經常用到jquery+ajax/" target="_blank">jquery ajax，但有時候會忘記怎麼寫，下面做個筆記。 jquery ajax例子：

代碼如下

複製代碼

//post 方式 $.ajax({ url : 'test.php', type : 'post', data : {'act':'addvideo', 'videoname':videoname},//這裡使用json對象 success : function(data){           //code here... }, fail:function(){         //code here... } });   //get 方式 $.get("test.php", { name: "John", time: "2pm" }, function(data){ //code here... });   //get 方式2 $.ajax({ url : 'test.php', data : {'act':'addvideo', 'videoname':videoname},//這裡使用json對象 success : function(data){ //code here... } });   //jquery ajax同步方式 $.ajax({ url : 'test.php', type : 'post', async: false,//使用同步的方式 data : {'act':'addvideo', 'videoname':videoname},//這裡使用json對象 success : function(data){ //code here... }, fail:function(){ //code here... } });

執行個體

jQuery Ajax 無重新整理表單提交執行個體

HTML 程式碼如下，鑒於可移植性，沒有寫全 HTML 的標記。

代碼如下

複製代碼

[html] <?php header(‘Content-Type:text/html;charset=utf-8′); ?> <script type=”text/javascript” src=”http://code.jquery.com/jquery.min.js”></script> <script type=”text/javascript”> $(function() { $(“#subbtn”).click(function() { var params = $(‘input’).serialize(); var url = “你的伺服器端 php”; $.ajax({ type: “post”, url: url, dataType: “json”, data: params, success: function(msg){ var tishi = “您提交的姓名為：” + msg.name + “<br /> 您提交的密碼為：” + msg.password; $(“#tishi”).html(tishi); $(“#tishi”).css({color: “green”}); } }); }); }); </script> <p><label for=”name”>姓名：</label> <input id=”name” name=”name” type=”text” /> </p> <p><label for=”password”>密碼：</label> <input id=”password” name=”password” type=”password” /> </p> <span id=”tishi”></span> <p><input id=”subbtn” type=”button” value=”ajax 測試” /></p> [/html] 伺服器 PHP 代碼如下 [php] <?php echo json_encode($_POST); [/php]

ajax通過json擷取資料例子

代碼如下

複製代碼

<script type=”text/javascript”> $(document).ready(function () { getScatalog(“paidang”, “M06″); }); function getScatalog(selectid,BaseCode) { if (BaseCode != “”) { $.ajax({ url: “ajax/getCatalogByBasecode.aspx”, data: “code=” + encodeURI(BaseCode), cache: false, datatype: “html”, success: function (context) { fillselect(selectid, context); } }); } else { return “Error”; } } function fillselect(selectid, context) { var listitem=new Array(); listitem = eval(context); for (var i = 0; i < listitem.length; i++) { $(“#” + selectid).append(“<option value=’” + listitem[i]["code"] + “‘>” + listitem[i]["name"] + “</option>”);  //為Select追加一個Option(下拉項 ) } } </script> html代碼： <select id=”paidang” name=”paidang”> <option value=”" selected>==請選擇==</option> </select>

Ajax：

建立一個.aspx頁面刪除.aspx頁面裡的html代碼刪除，在.aspx.cs裡添加如下代碼

代碼如下

複製代碼

string rq_basecode=null; rq_basecode = Request.QueryString["code"]; if (string.IsNullOrWhiteSpace(rq_basecode)) { Response.Write(“Error”); Response.End(); } BLLCataLog bll_info = new BLLCataLog(); List<Scatalog> lt_info = new List<Scatalog>(); lt_info = bll_info.GetCatalog(rq_basecode,”"); //Response.Write(rq_basecode); if (lt_info.Count > 0) { Response.Write(JsonHelper.ToJson(lt_info)); } else { Response.Write(“Null”); } BLL層的資料： public List<M2Model.Scatalog> GetCatalog(string code, string refcode) { DALCataLog dalcatalog6 = new M2SharpDAL.DALCataLog(); return dalcatalog6.GetCatalog(code, refcode); }