집 >웹 프론트엔드 >JS 튜토리얼 >jQuery가 비동기 새로 고침을 위해 $.ajax를 사용하는 방법(데모 다운로드 포함)_jquery

jQuery가 비동기 새로 고침을 위해 $.ajax를 사용하는 방법(데모 다운로드 포함)_jquery

WBOY원래의: 2016-05-16 15:27:321762검색

이 문서의 예에서는 jQuery가 비동기식 새로 고침을 위해 $.ajax를 사용하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

저는 최근에 jquery를 사용하여 데이터를 비동기적으로 읽었습니다. jquery는 다양한 비동기 읽기 기능을 내장하고 있으며 가장 일반적으로 사용되는 $.ajax 사용법을 보여 드리겠습니다.

클라이언트 측 텍스트 상자에 내용을 입력한 후 서버 측에서 시간을 반환합니다

ashx 파일은 DEMO에서 서버 정보를 얻기 위해 사용됩니다

효과 사진

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&#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>

서버측 코드

<%@ 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 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：JavaScript가 input_javascript 스킬에 값을 할당하여 발생하는 기본 유형 값 및 참조 유형 값에 대한 문제다음 기사：JavaScript가 input_javascript 스킬에 값을 할당하여 발생하는 기본 유형 값 및 참조 유형 값에 대한 문제

jQuery가 비동기 새로 고침을 위해 $.ajax를 사용하는 방법(데모 다운로드 포함)_jquery

관련 기사