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

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

WBOYoriginal: 2016-05-16 15:27:321679parcourir

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>

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

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Problèmes concernant les valeurs de type de base et les valeurs de type de référence causés par l'attribution de valeurs par JavaScript aux compétences input_javascriptArticle suivant：Problèmes concernant les valeurs de type de base et les valeurs de type de référence causés par l'attribution de valeurs par JavaScript aux compétences input_javascript

Articles Liés

Voir plus