suchen

Heim >Web-Frontend >js-Tutorial >Wie jQuery $.ajax für die asynchrone Aktualisierung verwendet (mit Demo-Download)_jquery

Wie jQuery $.ajax für die asynchrone Aktualisierung verwendet (mit Demo-Download)_jquery

WBOY
WBOYOriginal
2016-05-16 15:27:321768Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jQuery $.ajax für die asynchrone Aktualisierung verwendet. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Ich habe jquery kürzlich zum asynchronen Lesen von Daten verwendet. Jquery bietet viele integrierte asynchrone Lesefunktionen. Ich zeige Ihnen die am häufigsten verwendete Verwendung von $.ajax

Geben Sie auf der Clientseite einen Inhalt in das Textfeld ein und geben Sie dann auf der Serverseite die Uhrzeit zurück

Die ashx-Datei wird in DEMO verwendet, um Serverinformationen abzurufen

Effektbilder

Die Funktion

escape() kodiert einen String, sodass dieser auf allen Computern gelesen werden kann.

Kundencode

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

Serverseitiger Code

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

Klicken Sie hier für den vollständigen BeispielcodeDownload von dieser Website.

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Probleme mit grundlegenden Typwerten und Referenztypwerten, die durch die Zuweisung von Werten zu input_javascript-Fähigkeiten durch JavaScript verursacht werdenNächster Artikel：Probleme mit grundlegenden Typwerten und Referenztypwerten, die durch die Zuweisung von Werten zu input_javascript-Fähigkeiten durch JavaScript verursacht werden

In Verbindung stehende Artikel

Mehr sehen