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 相关文章推荐
jQuery 处理网页内容的实现代码
Feb 15 Javascript
js arguments对象应用介绍
Nov 28 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 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
使用swoole扩展php websocket示例
2014/02/13 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
zend framework重定向方法小结
2016/05/28 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
JavaScript 事件系统
2010/07/22 Javascript
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
详解Document.Cookie
2015/12/25 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
Python中的XML库4Suite Server的介绍
2015/04/14 Python
python中黄金分割法实现方法
2015/05/06 Python
简述Python中的进程、线程、协程
2016/03/18 Python
Python rstrip()方法实例详解
2018/11/11 Python
python模块导入的细节详解
2018/12/10 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
python tornado修改log输出方式
2019/11/18 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
工作作风整顿个人剖析材料
2014/10/11 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
小学大队委竞选口号
2015/12/25 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python