jQuery implémente l'actualisation asynchrone-js tutoriel-php.cn

jQuery implémente l'actualisation asynchrone

php中世界最好的语言

Libérer： 2018-04-25 14:23:40

original

1897 Les gens l'ont consulté

Cette fois, je vais vous présenter jQuery pour implémenter l'actualisation asynchrone. Quelles sont les précautions pour que jQuery implémente l'actualisation asynchrone. Voici un cas pratique, jetons un coup d'œil.

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

sur le client Saisissez un contenu dans. la zone de texte, puis renvoie l'heure côté serveur

Le fichier ashx est utilisé dans la DEMO pour obtenir les informations du serveur

Images d'effet

Le La fonction

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

Code côté 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 ($(&#39;#Text1&#39;).val() == &#39;&#39;) { 
    alert(&#39;请输入内容!&#39;); 
    return; 
   } 
   $.ajax({ 
    type: "GET", 
    url: "ContentHandler.ashx?name=" + $(&#39;#Text1&#39;).val(), 
    cache: false, 
    data: { sex: "男" }, 
    success: function(output) { 
     if (output == "" || output == undefined) { 
      alert(&#39;返回值为空!&#39;); 
     } 
     else { 
      output = eval("(" + output + ")"); 
      $(&#39;#pmsg&#39;).html("姓名:" + output.name + "----" + "日期:" + output.dt); 
     } 
    }, 
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
     alert("获取数据异常"); 
    } 
   }); 
  } 
// --></mce:script> 
</head> 
<body> 
 <form id="form1" runat="server"> 
 <p> 
  ajax使用demo 
 </p> 
 <p> 
<input id="Text1" 
   type="text" /> 
     <input id="Button1" type="button" value="获取数据" onclick="GetData()"/> 
   </p> 
  <p id=&#39;pmsg&#39;> 
  </p> 
 </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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article Pour plus de passionnant. contenu, veuillez faire attention aux autres sites Web chinois php Articles connexes !

Lecture recommandée :

Quels sont les moyens de mettre fin aux requêtes ajax dans jQuery

Explication détaillée des étapes d'asp traitement des données json

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!