jQuery使用$.ajax进行异步刷新的方法(附demo下载)


Posted in Javascript onDecember 04, 2015

本文实例讲述了jQuery使用$.ajax进行异步刷新的方法。分享给大家供大家参考,具体如下:

最近要用到jquery进行异步读取数据的功能,jquery提供了许多内置的异步读取函数,给大家演示下最常用的$.ajax用法

在客户端文本框输入一个内容,然后在服务器端返回时间

在DEMO中要用到ashx文件,用于获取服务器的信息

效果图片

jQuery使用$.ajax进行异步刷新的方法(附demo下载)

escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。

客户端代码

<%@ 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('请输入内容!'); 
    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("获取数据异常"); 
    } 
   }); 
  } 
// --></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="获取数据" onclick="GetData()"/> 
   </div> 
  <div id='divmsg'> 
  </div> 
 </form> 
</body> 
</html>

服务器端代码

<%@ 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; 
 } 
}

完整实例代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
js性能优化技巧
Nov 29 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 #Javascript
写给小白的JavaScript引擎指南
Dec 04 #Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 #Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 #Javascript
jQuery中cookie插件用法实例分析
Dec 04 #Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 #Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 #Javascript
You might like
javascript prototype原型操作笔记
2009/12/07 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
python简单猜数游戏实例
2015/07/09 Python
python中使用序列的方法
2015/08/03 Python
python 队列详解及实例代码
2016/10/18 Python
如何更优雅地写python代码
2019/07/02 Python
python3爬取torrent种子链接实例
2020/01/16 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
50道外企软件测试面试题
2014/08/18 面试题
大学新生军训个人的自我评价
2013/10/03 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
给校长的建议书
2014/03/12 职场文书
档案信息化建设方案
2014/05/16 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
海洋科学专业求职信
2014/08/10 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
歼十出击观后感
2015/06/11 职场文书
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis