Ajax 데이터 전송 방법 예시에 대한 자세한 설명
이 기사에서는 주로 ajax 데이터 전송 방법을 소개합니다. 이는 ajax 데이터 전송의 원리와 텍스트, xml 및 json 형식 데이터 전송을 위한 구체적인 구현 기술을 요약하기 위해 예제와 함께 제공됩니다. 필요하면 참고하세요
이 글에서는 Ajax 데이터 전송 방법을 예시로 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.
비동기 애플리케이션에서 정보를 보내고 받을 때 데이터 형식으로 일반 텍스트와 XML을 선택하는 것이 일반적입니다("JQuery 연구 노트: 자세한 설명" 참조). Ajax 사용 예"), 이제 더 널리 사용되는 방법인 JSON(JavaScript Object Notation)도 있습니다. 좋습니다. 다음은 ajax에서 이 세 가지 데이터 형식을 비동기적으로 적용한 예입니다.
1. 일반 텍스트 방식
1. 데이터 보내기/받기:
코드가 저렴합니다. AjaxOperations.aspx
// 此函数等价于document.getElementById /document.all function $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } } // 创建 XMLHttpRequest对象,以发送ajax请求 function createXMLHTTP() { var xmlHttp = false; var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]; for (var i = 0; i < arrSignatures.length; i++) { try { xmlHttp = new ActiveXObject(arrSignatures[i]); return xmlHttp; } catch (oError) { xmlHttp = false; //ignore } } // throw new Error("MSXML is not installed on your system."); if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); } return xmlHttp; } var xmlReq = createXMLHTTP(); // 发送ajax处理请求(这里简单验证用户名和密码的有效性,默认正确的输入:用户名和密码都是test) function validatePwd(oTxt) { var url = "/AjaxOperations.aspx"; xmlReq.open("post", url, true); xmlReq.setRequestHeader("Content-Length", oTxt.value.length + $("txtUserName").value.length); xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlReq.onreadystatechange = callBack; xmlReq.send("action=chkPwd&userInfos=" + escape(oTxt.value + "/" + $("txtUserName").value)); // 发送文本 } function callBack() { if (xmlReq.readyState == 4) { if (xmlReq.status == 200) { alert(xmlReq.responseText); // 接收文本 } else if (xmlReq.status == 404) { alert("Requested URL is not found."); } else if (xmlReq.status == 403) { alert("Access denied."); } else alert("status is " + xmlReq.status); } }
2. XML 방법
1. XML 데이터 보내기 testJs.js<html> <head> <title>js test</title> <script src="js/testJs.js" type="text/javascript"></script> </head> <body> <form id="form1"> <p> 用户名:<input id="txtUserName" name="txtUserName" type="text" /> 密码:<input id="txtPwd" name="txtPwd" type="password" onblur="validatePwd(this)" /></p> </form> </body> </html>
using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace WebTest2008 { public partial class AjaxOperations : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!string.IsNullOrEmpty(Request["action"]) && Request["action"] == "chkPwd") { string responseTxt = "用户名和密码不匹配!"; string tempStr = Request["userInfos"]; /* 测试用 实际项目中可以对数据库进行检索等等相关操作,这里简化了 */ if (tempStr.Split(new char[] { '/' }, StringSplitOptions.RemoveEmptyEntries)[0] == "test" && tempStr.Split(new char[] { '/' }, StringSplitOptions.RemoveEmptyEntries)[1] == "test") { responseTxt = "验证通过!"; } Response.Write(responseTxt); } } } }
// 此函数等价于document.getElementById /document.all function $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } } // 创建 XMLHttpRequest对象,以发送ajax请求 function createXMLHTTP() { var xmlHttp = false; var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]; for (var i = 0; i < arrSignatures.length; i++) { try { xmlHttp = new ActiveXObject(arrSignatures[i]); return xmlHttp; } catch (oError) { xmlHttp = false; //ignore } } // throw new Error("MSXML is not installed on your system."); if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); } return xmlHttp; } var xmlReq = createXMLHTTP(); // 发送ajax处理请求(这里简单验证用户名和密码的有效性,默认正确的输入:用户名和密码都是test) function validatePwd(oTxt) { var url = "/AjaxOperations.aspx?action=xmlOp"; var xmlStr = "<profile>" + " <userName>" + escape($("txtUserName").value) + "</userName>" + " <userPwd>" + escape($("txtPwd").value) + "</userPwd>" + "</profile>"; xmlReq.open("post", url, true); // Tell the server you're sending it XML xmlReq.setRequestHeader("Content-Type", "text/xml"); // 这里注意 xmlReq.onreadystatechange = callBack; xmlReq.send(xmlStr); // 发送XML } function callBack() { if (xmlReq.readyState == 4) { if (xmlReq.status == 200) { alert(xmlReq.responseText); // 接收文本 } else if (xmlReq.status == 404) { alert("Requested URL is not found."); } else if (xmlReq.status == 403) { alert("Access denied."); } else alert("status is " + xmlReq.status); } }
using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Xml; namespace WebTest2008 { public partial class AjaxOperations : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!string.IsNullOrEmpty(Request["action"]) && Request["action"] == "xmlOp") // 处理xml { XmlDocument doc = new XmlDocument(); try { doc.Load(Request.InputStream); //获取xml数据(这里需要注意接受xml数据的方法) } catch (Exception ex) { throw ex; } string responseTxt = ""; string tempName = doc.SelectSingleNode("profile/userName").InnerText; string tempPwd = doc.SelectSingleNode("profile/userPwd").InnerText; if (tempName == "test" && tempPwd == "test") { responseTxt = "验证通过!"; } else responseTxt = "验证失败!"; Response.Write(responseTxt); // 写文本 } } } }
3. JSON 방식
json에 대한 사전 지식: json은 간단한 데이터 형식이며 xml보다 가볍습니다. json은 JavaScript의 기본 형식입니다. 즉, JavaScript에서 json 형식의 데이터를 처리하는 데 특별한 API나 툴킷이 필요하지 않습니다. json의 구문 규칙은 실제로 매우 간단합니다. 객체는 "이름/값 쌍"의 정렬되지 않은 모음입니다. 객체는 "{"(왼쪽 대괄호)로 시작하고 "}"(오른쪽 대괄호)로 끝납니다. 각 "이름" 뒤에는 ":"(콜론)이 옵니다. "이름/값" 쌍은 ","(쉼표)로 구분됩니다. 먼저 예를 살펴보겠습니다.// 此函数等价于document.getElementById /document.all function $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } } // 创建 XMLHttpRequest对象,以发送ajax请求 function createXMLHTTP() { var xmlHttp = false; var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]; for (var i = 0; i < arrSignatures.length; i++) { try { xmlHttp = new ActiveXObject(arrSignatures[i]); return xmlHttp; } catch (oError) { xmlHttp = false; //ignore } } // throw new Error("MSXML is not installed on your system."); if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); } return xmlHttp; } var xmlReq = createXMLHTTP(); // 发送ajax处理请求(这里简单验证用户名和密码的有效性,默认正确的输入:用户名和密码都是test) function validatePwd(oTxt) { var url = "/AjaxOperations.aspx?action=xmlOp"; var xmlStr = "<profile>" + " <userName>" + escape($("txtUserName").value) + "</userName>" + " <userPwd>" + escape($("txtPwd").value) + "</userPwd>" + "</profile>"; xmlReq.open("post", url, true); // Tell the server you're sending it XML xmlReq.setRequestHeader("Content-Type", "text/xml"); xmlReq.onreadystatechange = callBack; xmlReq.send(xmlStr); // 发送XML } function callBack() { if (xmlReq.readyState == 4) { if (xmlReq.status == 200) { var xmlDoc = xmlReq.responseXML; // 接收XML // var nodes = xmlDoc.childNodes; // alert("文件根标签的名称: " + xmlDoc.documentElement.tagName); // alert("根元素共有子节点个数: " + xmlDoc.documentElement.childNodes.length); alert(xmlDoc.documentElement.childNodes(0).text); } else if (xmlReq.status == 404) { alert("Requested URL is not found."); } else if (xmlReq.status == 403) { alert("Access denied."); } else alert("status is " + xmlReq.status); } }
using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Xml; namespace WebTest2008 { public partial class AjaxOperations : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!string.IsNullOrEmpty(Request["action"]) && Request["action"] == "xmlOp") // 处理xml { XmlDocument doc = new XmlDocument(); try { doc.Load(Request.InputStream); //获取xml数据 } catch (Exception ex) { throw ex; } string responseXmlTxt = ""; string tempName = doc.SelectSingleNode("profile/userName").InnerText; string tempPwd = doc.SelectSingleNode("profile/userPwd").InnerText; if (tempName == "test" && tempPwd == "test") { responseXmlTxt = "<?xml version=\"1.0\" encoding=\"utf-8\" ?> <msg>验证通过!</msg>"; // 测试用,简单的xml文件 } else responseXmlTxt = "<?xml version=\"1.0\" encoding=\"utf-8\" ?><msg>验证失败!</msg>"; Response.ContentType = ("text/xml;charset=UTF-8"); // 这里必须要设置,否则客户端接收不到这里写好的xml文件 Response.Write(responseXmlTxt); // 写xml Response.End(); } } } }
function testJson() { //定义一个user(json的格式,其实就是定义一个js函数(变量)的方式而已) var user = { "username": "jeff wong", "age": 25, "info": { "tel": "12345678", "cellphone": "13312345678" }, "address": // 数组 [ { "city": "beijing", "postcode": "101110" }, { "city": "ny city", "postcode": "911119" } ] } alert(user.username); alert(user.age); alert(user.info.cellphone); alert(user.address[0].city); alert(user.address[0].postcode); user.username = "xiao wang"; alert(user.username); }
function Car(maker, model, year, color) { this.maker = maker; this.model = model; this.year = year; this.color = color; } function testJson() { var tempCar = new Car("VW", "S", 1999, "yellow"); alert(tempCar.toJSONString()); }
function testJson() { var str = '{ "name": "jeff wong", "age": 25,"address":"beijing"}'; var tempObj = eval('(' + str + ')'); alert(tempObj.toJSONString()); //使用eval方法 var tempObj1 = str.parseJSON(); alert(tempObj1.toJSONString()); // 或者使用parseJSON()方法 }
// 此函数等价于document.getElementById /document.all function $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } } // 创建 XMLHttpRequest对象,以发送ajax请求 function createXMLHTTP() { var xmlHttp = false; var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]; for (var i = 0; i < arrSignatures.length; i++) { try { xmlHttp = new ActiveXObject(arrSignatures[i]); return xmlHttp; } catch (oError) { xmlHttp = false; //ignore } } // throw new Error("MSXML is not installed on your system."); if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); } return xmlHttp; } var xmlReq = createXMLHTTP(); // 发送ajax处理请求(这里简单验证用户名和密码的有效性,默认正确的输入:用户名和密码都是test) function validatePwd(oTxt) { var url = "/AjaxOperations.aspx?action=jsonOp"; // JSON就只是文本,由于不需要特殊编码而且每个服务器端脚本都能处理文本数据,所以可以轻松利用JSON并将其应用到服务器。 var str = '{ "userName":"' + $("txtUserName").value + '", "userPwd": "' + $("txtPwd").value + '"}'; var jsonStr = str.parseJSON().toJSONString(); // you're sending it JSON xmlReq.open("post", url, true); xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlReq.onreadystatechange = callBack; xmlReq.send("sendStr=" + jsonStr); // 发送JSON(在服务器上解释JSON) } function callBack() { if (xmlReq.readyState == 4) { if (xmlReq.status == 200) { var jsonStr = xmlReq.responseText.parseJSON().toJSONString(); //转化为json数据 alert(jsonStr); } else if (xmlReq.status == 404) { alert("Requested URL is not found."); } else if (xmlReq.status == 403) { alert("Access denied."); } else alert("status is " + xmlReq.status); } }
ajax 기반의 간단한 검색 구현 방법
js 및 jQuery로 전송되는 ajax 요청을 종료하는 방법
위 내용은 Ajax 데이터 전송 방법 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











Windows 운영 체제는 세계에서 가장 인기 있는 운영 체제 중 하나이며, 새로운 버전의 Win11이 많은 주목을 받았습니다. Win11 시스템에서 관리자 권한을 얻는 것은 사용자가 시스템에서 더 많은 작업과 설정을 수행할 수 있도록 하는 중요한 작업입니다. 이번 글에서는 Win11 시스템에서 관리자 권한을 얻는 방법과 권한을 효과적으로 관리하는 방법을 자세히 소개하겠습니다. Win11 시스템에서 관리자 권한은 로컬 관리자와 도메인 관리자의 두 가지 유형으로 나뉩니다. 로컬 관리자는 로컬 컴퓨터에 대한 모든 관리 권한을 갖습니다.

OracleSQL의 나눗셈 연산에 대한 자세한 설명 OracleSQL에서 나눗셈 연산은 두 숫자를 나눈 결과를 계산하는 데 사용되는 일반적이고 중요한 수학 연산입니다. 나누기는 데이터베이스 쿼리에 자주 사용되므로 OracleSQL에서 나누기 작업과 사용법을 이해하는 것은 데이터베이스 개발자에게 필수적인 기술 중 하나입니다. 이 기사에서는 OracleSQL의 나누기 작업 관련 지식을 자세히 설명하고 독자가 참고할 수 있는 특정 코드 예제를 제공합니다. 1. OracleSQL의 Division 연산

제목: jQuery AJAX 요청의 403 오류를 해결하는 방법 및 코드 예제 403 오류는 서버가 리소스에 대한 액세스를 금지하는 요청을 의미합니다. 이 오류는 일반적으로 요청에 권한이 없거나 서버에서 거부되기 때문에 발생합니다. jQueryAJAX 요청을 할 때 가끔 이런 상황이 발생합니다. 이 기사에서는 이 문제를 해결하는 방법을 소개하고 코드 예제를 제공합니다. 해결 방법: 권한 확인: 먼저 요청한 URL 주소가 올바른지 확인하고 리소스에 액세스할 수 있는 충분한 권한이 있는지 확인하십시오.

jQuery는 클라이언트 측 개발을 단순화하는 데 사용되는 인기 있는 JavaScript 라이브러리입니다. AJAX는 전체 웹 페이지를 다시 로드하지 않고 비동기 요청을 보내고 서버와 상호 작용하는 기술입니다. 그러나 jQuery를 사용하여 AJAX 요청을 할 때 가끔 403 오류가 발생합니다. 403 오류는 일반적으로 보안 정책이나 권한 문제로 인해 서버 거부 액세스 오류입니다. 이 기사에서는 403 오류가 발생한 jQueryAJAX 요청을 해결하는 방법에 대해 설명합니다.

PHP의 모듈로 연산자(%)는 두 숫자를 나눈 나머지를 구하는 데 사용됩니다. 이 글에서는 모듈로 연산자의 역할과 사용법을 자세히 논의하고 독자의 이해를 돕기 위해 구체적인 코드 예제를 제공합니다. 1. 모듈로 연산자의 역할 수학에서는 정수를 다른 정수로 나누면 몫과 나머지가 나옵니다. 예를 들어 10을 3으로 나누면 몫은 3이고 나머지는 1입니다. 이 나머지를 얻기 위해 모듈로 연산자가 사용됩니다. 2. 모듈러스 연산자의 사용법 PHP에서는 모듈러스를 나타내기 위해 % 기호를 사용합니다.

Linux 시스템 호출 system() 함수에 대한 자세한 설명 시스템 호출은 Linux 운영 체제에서 매우 중요한 부분으로 시스템 커널과 상호 작용하는 방법을 제공합니다. 그 중 system() 함수는 흔히 사용되는 시스템 호출 함수 중 하나이다. 이 기사에서는 system() 함수의 사용법을 자세히 소개하고 해당 코드 예제를 제공합니다. 시스템 호출의 기본 개념 시스템 호출은 사용자 프로그램이 운영 체제 커널과 상호 작용하는 방법입니다. 사용자 프로그램은 시스템 호출 기능을 호출하여 운영 체제를 요청합니다.

많은 친구들이 Apple 휴대폰을 변경할 때 이전 휴대폰의 모든 데이터를 새 휴대폰으로 가져오고 싶어합니다. 이론상으로는 완전히 가능하지만 실제로는 모든 데이터를 "전송"하는 것이 불가능합니다. "데이터의 일부를 전송"하는 여러 가지 방법을 나열하십시오. 1. iTunes는 Apple 휴대폰에 사전 설치된 소프트웨어로 기존 휴대폰의 모든 데이터를 마이그레이션하는 데 사용할 수 있지만 컴퓨터와 함께 사용해야 합니다. 마이그레이션은 컴퓨터에 iTunes를 설치한 다음 데이터 케이블을 통해 휴대폰을 컴퓨터에 연결하고 iTunes를 사용하여 휴대폰의 앱과 데이터를 백업한 다음 마지막으로 백업을 새 Apple 휴대폰에 복원하여 완료할 수 있습니다. 2. iCloudiCloud는 Apple의 독점 "클라우드 공간" 도구입니다. 먼저 기존 휴대폰에 로그인할 수 있습니다.

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 것은 웹 개발의 일반적인 시나리오입니다. Ajax를 통해 데이터를 새로 고치지 않고도 페이지를 동적으로 얻을 수 있습니다. 이 기사에서는 Ajax를 사용하여 PHP 메소드에서 변수를 가져오는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 Ajax 요청을 처리하고 필요한 변수를 반환하기 위해 PHP 파일을 작성해야 합니다. 다음은 간단한 PHP 파일 getData.php에 대한 샘플 코드입니다.
