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 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
javascript preload&amp;lazy load
May 13 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
jquery中键盘事件小结
Feb 24 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
vue-router 中 meta的用法详解
Nov 01 Javascript
JS实现点击掉落特效
Jan 29 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
非常好用的Zend Framework分页类
2014/06/25 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
Add a Table to a Word Document
2007/06/15 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
用python与文件进行交互的方法
2018/03/01 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
python 常见的排序算法实现汇总
2020/08/21 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
介绍一下Ruby的特点
2013/01/20 面试题
酒店前厅员工辞职信
2014/01/08 职场文书
服装创业计划书范文
2014/02/05 职场文书
大学生安全责任书
2014/07/25 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript