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

2024-08-19 15:15:06

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

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

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

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

效果图片

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程序设计有所帮助。

php+jQuery+Ajax简单实现页面异步刷新

页面显示如下: JQueryAjax.html中的代码如下(用的较为简单的$.post) <html> <head> <meta charset="UTF-8"> <title>JQueryAjax+PHP</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"
ajaxpro.dll 控件实现异步刷新页面

html代码复制代码代码如下: <script type="text/javascript"><!-- function getUserName() { Demo.ajax.GetUserName(document.getElementById("accout").value,getName); } function getName(respone) { document.getElementById("passowrd")
asp.net jquery+ajax异步刷新实现示例

复制代码代码如下: <!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> <title></title
jQuery ajax请求struts action实现异步刷新

这个样例是用JQuery ajax和struts来做的一个小样例,在这个样例中采用两种方式将java Util中的list转换成支json的格式,第一种是用json-lib.jar这个jar包来转换,第二种是采用goole的gson-2.1.jar来转换,大家可以根据需要导入相应的jar包,在这里为了做测试将两种jar包都导入了.下面开始进入正题第一步:导入相关jar包,本样例需导入struts相关jar包,json-lib.jar,gson-2.1.jar可以任意选择,但是这里需要都导入,因
如何手写Ajax实现异步刷新

所谓的异步刷新,就是不刷新整个网页进行更新数据. 只有通过js才能实现Ajax,进而实行异步刷新表单提交数据和Ajax提交数据的区别:表单提交是提交的整个页面中的数据,提交数据之后会抛弃之前的页面(刷新页面):ajax是在当前页面提取某些数据并提交出去,并能接收返回来的数据,处理之后进而显示在当前页面(不刷新页面). [例子]==验证用户名是否重复== 使用Ajax的思路:在要刷新的页面中写js和Ajax代码,把数据提交给另一个页面,在Page_Load中写查询代码并把结果返回到刷新的页面.
ajax异步刷新实现更新数据库

上篇文章都是关于界面的东西,下面写关于如何把无刷新的把数据写入到数据库中. 当我们改变某一个人或某几个人的某项分值实现无刷新写入数据库. 首先,我们需要声明XMLHttpRequest对象复制代码代码如下: //声明XMLHttpRequest对象 var xmlHttp; function createXMLHTTP() { if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); //Mozilla浏览器 } else if
Ajax实现异步刷新验证用户名是否已存在的具体方法

都是简单的实例,所以直接发代码静态页面Ajax.html 复制代码代码如下: <html> <head> <title>Ajax</title> <script type="text/javascript"> function loadXMLDoc() { if (document.getElementById("account
jQuery使用$.ajax进行异步刷新的方法(附demo下载)

本文实例讲述了jQuery使用$.ajax进行异步刷新的方法.分享给大家供大家参考,具体如下: 最近要用到jquery进行异步读取数据的功能,jquery提供了许多内置的异步读取函数,给大家演示下最常用的$.ajax用法在客户端文本框输入一个内容,然后在服务器端返回时间在DEMO中要用到ashx文件,用于获取服务器的信息效果图片 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 客户端代码 <%@ Page Language="C#" Au
使用jQuery和ajax代替iframe的方法(详解)

iframe虽然好用,但是其弊端也很明显,一是它不能使用于响应式布局,iframe的使用必须指定高度,而响应式布局的高度兵分固定的.其次iframe不易被搜索引擎的爬虫解读,特别是iframe中嵌套iframe,这是会被搜索引擎认为是个死网站而被放过. 目前主流的应用都使用了ajax代替了iframe. html: <ul class="nav navbar-nav" id="indexMenu"> <li><a target=&quo
jQuery调用ajax请求的常见方法汇总

本文实例汇总了jQuery调用ajax请求的常见方法.分享给大家供大家参考.具体如下: 示例代码1 $.ajax('/ROUTE', { type: 'GET' data: {param1: 'Hello', param2: 'World'}, dataType: 'json', contentType: 'application/json', timeout: 3000, success: function(response) { // console.log(response.somethi
jQuery prototype冲突的2种解决方法(附demo示例下载)

本文实例分析了jQuery prototype冲突的2种解决方法.分享给大家供大家参考,具体如下: jquery和prototype怎么会冲突,归根到底就是因为他们二个都用到了$,同时用,混淆了.这个问题解决过不下5次,每次解决都要查一下.淡疼,嘿嘿. 方法一.在jquery的核心库文件中加代码. 1.一般是jquery.js,或者jquery.min.js,有的带版本号的.知道是哪个文件就行. })( window ); jQuery.noConflict(); //最后面,加上这一行. 2.
jQuery实现ajax调用WCF服务的方法(附带demo下载)

本文实例讲述了jQuery实现ajax调用WCF服务的方法.分享给大家供大家参考,具体如下: 关于AJAX调用WCF服务分为跨域和不跨域两种方式,今天咱们先介绍下不跨域下的调用方法.DEMO是在VS2008写的. 经过测试与研究,发现AJAX调用WCF服务必须满足以下条件 1.wcf的通讯方式必须使用webHttpBinding 2.必须设置<endpointBehaviors>节点的值 3.服务的实现必须添加标记复制代码代码如下: [AspNetCompatibilityRequirem
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)

本文实例讲述了jQuery自定义图片缩放拖拽插件imageQ实现方法.分享给大家供大家参考,具体如下: 综合网上一些代码自己写的一个图片缩放拖拽的小插件 /** * * <a href="http://lib.csdn.net/base/22" class='replace_word' title="jQuery知识库" target='_blank' style='color:#df3434; font-weight:bold;'>jQuery<
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)

本文实例讲述了jQuery实现滚动鼠标放大缩小图片的方法.分享给大家供大家参考,具体如下: 在项目制作过程中,遇到了这么一个需求,就开发了一个,记录一下. 首先,需要定义html元素和css样式: <div style="position:relative;"> <asp:Image ID="myImg" runat="server" Width="670px" /> <span style=&q
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)

本文实例讲述了jQuery动态添加及删除表单上传元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(d
jQuery打字效果实现方法(附demo源码下载)

本文实例讲述了jQuery打字效果实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 1.前台页面代码: <!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
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)

本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法.分享给大家供大家参考,具体如下: 该插件是文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

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

相关推荐

随机推荐