Comment jQuery utilise $.ajax pour l'actualisation asynchrone (avec téléchargement de démo)

Comment jQuery utilise $.ajax pour l'actualisation asynchrone (avec téléchargement de démo)_jquery

WBOY

Libérer： 2016-05-16 15:27:32

original

1716 Les gens l'ont consulté

L'exemple de cet article décrit comment jQuery utilise $.ajax pour l'actualisation asynchrone. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

J'ai récemment utilisé jquery pour lire des données de manière asynchrone. jquery fournit de nombreuses fonctions de lecture asynchrone intégrées. Je vais vous montrer l'utilisation de $.ajax la plus couramment utilisée

Entrez un contenu dans la zone de texte côté client, puis renvoyez l'heure côté serveur

Le fichier ashx est utilisé dans DEMO pour obtenir des informations sur le serveur

Images d'effet

La fonction

escape() encode une chaîne afin qu'elle puisse être lue sur tous les ordinateurs.

Code client

<%@ 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&#63;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>

Copier après la connexion

Code côté serveur

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

Copier après la connexion

Cliquez ici pour l'exemple de code completTéléchargez depuis ce site.

J'espère que cet article sera utile à tous ceux qui programment jQuery.