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_07_理解instanceof实现原理
Oct 15 Javascript
javascript 节点排序 2
Jan 31 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 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
第五节--克隆
2006/11/16 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
JS 实现完美include载入实现代码
2010/08/05 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
优化Python代码使其加快作用域内的查找
2015/03/30 Python
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
Python实用日期时间处理方法汇总
2015/05/09 Python
Python中有趣在__call__函数
2015/06/21 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
python3 深浅copy对比详解
2019/08/12 Python
python实现低通滤波器代码
2020/02/26 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
python创建文本文件的简单方法
2020/08/30 Python
酒店应聘自荐信
2013/11/09 职场文书
工作疏忽检讨书
2014/01/25 职场文书
机器人瓦力观后感
2015/06/12 职场文书
如何拟写通知正文?
2019/04/02 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
Python中使用ipython的详细教程
2021/06/22 Python
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
python程序的组织结构详解
2021/12/06 Python
keepalived + nginx 实现高可用方案
2022/12/24 Servers