jQuery使用$.ajax進(jìn)行異步刷新的方法(附demo下載)
本文實(shí)例講述了jQuery使用$.ajax進(jìn)行異步刷新的方法。分享給大家供大家參考,具體如下:
最近要用到j(luò)query進(jìn)行異步讀取數(shù)據(jù)的功能,jquery提供了許多內(nèi)置的異步讀取函數(shù),給大家演示下最常用的$.ajax用法
在客戶(hù)端文本框輸入一個(gè)內(nèi)容,然后在服務(wù)器端返回時(shí)間
在DEMO中要用到ashx文件,用于獲取服務(wù)器的信息
效果圖片
escape() 函數(shù)可對(duì)字符串進(jìn)行編碼,這樣就可以在所有的計(jì)算機(jī)上讀取該字符串。
客戶(hù)端代碼
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default7.aspx.cs" Inherits="Default7" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <mce:script type="text/javascript" src="js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script> <title></title> <mce:script type="text/javascript"><!-- function GetData() { if ($('#Text1').val() == '') { alert('請(qǐng)輸入內(nèi)容!'); return; } $.ajax({ type: "GET", url: "ContentHandler.ashx?name=" + $('#Text1').val(), cache: false, data: { sex: "男" }, success: function(output) { if (output == "" || output == undefined) { alert('返回值為空!'); } else { output = eval("(" + output + ")"); $('#divmsg').html("姓名:" + output.name + "----" + "日期:" + output.dt); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("獲取數(shù)據(jù)異常"); } }); } // --></mce:script> </head> <body> <form id="form1" runat="server"> <div> ajax使用demo </div> <div> <input id="Text1" type="text" /> <input id="Button1" type="button" value="獲取數(shù)據(jù)" onclick="GetData()"/> </div> <div id='divmsg'> </div> </form> </body> </html>
服務(wù)器端代碼
<%@ WebHandler Language="C#" Class="ContentHandler" %> using System; using System.Web; public class ContentHandler : IHttpHandler { public void ProcessRequest (HttpContext context) { string output = ""; string name = context.Request.Params["name"]; output = GetJsonData(name); context.Response.ContentType = "text/plain"; context.Response.Write(output); } public bool IsReusable { get { return false; } } public string GetJsonData(string aa) { string result = "{name:/""+aa+"/",dt:/""+DateTime.Now.ToString()+"/"}"; return result; } }
完整實(shí)例代碼點(diǎn)擊此處本站下載。
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
基于jquery實(shí)現(xiàn)復(fù)選框全選,反選,全不選等功能
本文分享一段基于jQuery實(shí)現(xiàn)的復(fù)選框全選、全不選、反選功能的代碼,有需要的小伙伴可以參考一下2015-10-10使用Javascript實(shí)現(xiàn)選擇下拉菜單互移并排序
本文給大家介紹使用js實(shí)現(xiàn)下拉菜單可選擇互相移動(dòng)并實(shí)現(xiàn)菜單排序,代碼簡(jiǎn)單易懂,具有參考價(jià)值,需要的朋友參考下吧2016-02-02jQuery ctrl+Enter shift+Enter實(shí)現(xiàn)代碼
jQuery中對(duì)鍵盤(pán)事件進(jìn)行了修正 調(diào)用函數(shù)的時(shí)候傳入事件即可。2010-02-02基于jQuery替換table中的內(nèi)容并顯示進(jìn)度條的代碼
這個(gè)例子使我更加明白呈現(xiàn)數(shù)據(jù)是前端工作滴一部分,如何使table中的數(shù)值變?yōu)榍逦貤l狀圖呢?聽(tīng)我細(xì)細(xì)道來(lái)2011-08-08jQuery插件HighCharts實(shí)現(xiàn)的2D面積圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實(shí)現(xiàn)的2D面積圖效果,結(jié)合完整實(shí)例形式分析了jQuery插件HighCharts繪制2D面積圖的相關(guān)步驟與屬性設(shè)置技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03基于jquery實(shí)現(xiàn)人物頭像跟隨鼠標(biāo)轉(zhuǎn)動(dòng)
一款非常乖巧的人物頭像跟隨鼠標(biāo)轉(zhuǎn)動(dòng)效果,在瀏覽器屏幕內(nèi),人物臉龐始終面向鼠標(biāo)轉(zhuǎn)動(dòng),本篇文章給大家介紹基于jquery實(shí)現(xiàn)人物頭像跟隨鼠標(biāo)轉(zhuǎn)動(dòng),有需要的朋友可以參考下2015-08-08jquery+ajax實(shí)現(xiàn)跨域請(qǐng)求的方法
這篇文章主要介紹了jquery+ajax實(shí)現(xiàn)跨域請(qǐng)求的方法,詳細(xì)介紹了前臺(tái)及后臺(tái)的處理方法,是非常實(shí)用的技巧,需要的朋友可以參考下2015-01-01jquery實(shí)現(xiàn)員工信息添加與刪除功能
這篇文章主要為大家詳細(xì)介紹了利用jquery制作簡(jiǎn)易的員工信息添加與刪除,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09