AJAX 사용법 상세 분석(코드 붙여넣기)
다음은 제가 정리한 AJAX 사용 방법입니다. 관심 있는 학생들은 한 번 살펴보세요.
HTTPS
"/jsontest/randomdata/" // there was a missing trailing /// i.e. // was going to https://larsendt.com/jsontest/randomdata/?ymax=500&count=32&t=0.96041791105086431234
GET request
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
function checkname(){
//ajax校验用户名
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
document.getElementById('result').innerHTML = xhr.responseText;
}
} //获得输入的用户名，并传递个服务器端
var ming = document.getElementById('username').value; //对ming变量的特殊符号信息进行编码
ming = encodeURIComponent(ming);
xhr.open('get','./04.php?nm='+ming+'&age=23', true); //xhr.open第三个参数默认异步请求为true, 改成同步请求为false;
xhr.send(null);
} </script>
</head>
<body>
<h2>ajax之get形式请求</h2>
<p>用户名：<input type="text" id="username" onblur="checkname()" /></p>
<p>密码：<input type="password" id="userpwd" /></p>
<p id="result"></p>
</body></html>12345678910111213141516171819202122232425262728293031323334353637POST request
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
function checkname(){
//ajax校验用户名
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
document.getElementById('result').innerHTML = xhr.responseText;
}
}
xhr.open('post','./05.php?height=165', true); //默认为true异步请求, false为同步请求
//post请求需要把数据组织为xml格式
//以下方法必须要在"open"方法后进行设置
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); //获得输入的用户名，并传递个服务器端
var ming = document.getElementById('username').value; //对ming变量的特殊符号信息进行编码
ming = encodeURIComponent(ming); //把传递的参数变为"请求字符串"传递给send方法
var info = "nm="+ming+"&age=20";
xhr.send(info);
} </script>
</head>
<body>
<h2>ajax之post形式请求</h2>
<p>用户名：<input type="text" id="username" onblur="checkname()" /></p>
<p>密码：<input type="password" id="userpwd" /></p>
<p id="result"></p>
</body></html>123456789101112131415161718192021222324252627282930313233343536373839404142FormDate는 양식 데이터를 수집합니다
<!DOCTYPE html><html><head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="common.js"></script></head><body>
<form>
<p>用户名：<input type="text" name="user"></p>
<p>密 码：<input type="password" name="pwd"></p>
<p>邮 箱：<input type="text" name="email"></p>
<p>头 像：<input type="file" name="userpic"></p>
<p><input type="button" value="提交" id="btn"></p>
</form>
<script type="text/javascript">
//form表单节点对象
var oForm = document.getElementsByTagName('form')[0]; //按钮
var oBtn = $('btn');
oBtn.onclick = function(){
//先收集输入框的内容
var user = document.getElementsByName('user')[0].value; var pwd = document.getElementsByName('pwd')[0].value; var email = document.getElementsByName('email')[0].value; //通过ajax提交到服务器
var xhr; try{
xhr = new XMLHttpRequest();
}catch(e){
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
xhr.open('POST','upload.php',true); //实例化表单对象，获得表单里面的输入框的内容（主流浏览器支持）
//参数就是表单节点对象
var data = new FormData(oForm);
xhr.send(data);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status==200){
console.log(xhr.responseText);
}
}
} </script></body></html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748AJAX 크로스 도메인
//放在被访问资源上 <?php header('Access-Control-Allow-Origin:http://A.abc.com'); ?> 12
jasonP
//在客户端定义函数,在服务端定义调用函数和传入参数,请求时传入调用参数内容,服务端就用客户端传入的函数名为调用函数名(可变函数); //<script src=xxx.kuaiyu.com/xxx.php></script> https://xxx.cc.com/xx.php?param=xxx&function_name=function_name//百度标准接口 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=法国大选&cb=demo12345
JQUERY AJAX
구문:
$.get(url,data,function(),dataType)
url: 요청한 파일입니다.
데이터: 데이터를 전송합니다.
function(responseText, statusText,xhr): 반환 함수
responseText: 반환된 텍스트.
statusText: 반환된 상태 값입니다.
상태에는 요청의 상태가 포함됩니다.
("성공", "수정되지 않음", "오류", "시간 초과", "파서 오류")
xhr: XMLHttpRequest() 요청 개체.
데이터 유형:
"xml" - XML 문서
"html" - 일반 텍스트인 HTML
"text" - 일반 텍스트 문자열
"script" - 응답을 JavaScript로 실행하고 일반 텍스트로 반환
"json" - JSON으로 응답을 실행하고 JavaScript 개체
"jsonp"로 반환 - JSONP를 사용하여 JSON 청크를 로드하면 콜백
.get()을 지정하기 위해 URL에 "?callback=?"이 추가됩니다. get(),.post() //Post와 get 매개변수는 동일합니다
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JQuery Collapse</title><SCRIPT LANGUAGE="JavaScript" src="jquery-3.1.1.js"></SCRIPT><script type="text/javascript">$(function(){
$('#bt1').click(function(){
var username = $('input[name=username]').val();//获取用户名的值
var pwd = $('input[name=password]').val();//获取密码的值
$.get( 'get.php',//url
{username:username,pwd:pwd},//$_GET['username']:请求的数据
function(res,sta,xhr){//回调函数
//res:返回值
//sta:返回的状态
//xhr:请求的对象XMLHttprequest
// alert('返回值是：'+res);
if(sta == 'success'){
$('span').html(res);
}
}
)
});
});</script>
<style type="text/css"></style>
</head>
<body>用户名：<input type="text" name='username' /><span></span><br>
密码：<input type="password" name='password' /><br>
<input type="button" id="bt1" value="发送请求" />
</body>
</html>1234567891011121314151617181920212223242526272829303132333435363738394041$.ajax()
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JQuery Collapse</title><SCRIPT LANGUAGE="JavaScript" src="jquery-3.1.1.js"></SCRIPT><script type="text/javascript">$(function(){
$('input[name=username]').keyup(function(){
var username = $('input[name=username]').val();//获取用户名的值
var pwd = $('input[name=password]').val();//获取密码的值
$.ajax({
url:'post.php',
data:{username:username,pwd:pwd},
dataType:'html',
type:'post',
success:function(mydata){
$('span').html(mydata);
}
})
});
});</script>
<style type="text/css"></style>
</head>
<body>
用户名：<input type="text" name='username' /><span></span><br>
密码：<input type="password" name='password' /><br>
<input type="button" id="bt1" value="发送请求" />
</body>
</html>위는 제가 모두를 위해 컴파일한 AJAX 사용 방법입니다. 모두에게 도움이 되길 바랍니다. 미래에.
관련 기사:
WCF 서비스를 호출하는 jQuery+ajax 단계에 대한 자세한 설명
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)
뜨거운 주제
7476
15
1377
52
77
11
49
19
19
31
DirectX 복구 도구를 사용하는 방법은 무엇입니까? DirectX 복구 도구의 자세한 사용법
Mar 15, 2024 am 08:31 AM
DirectX 복구 도구는 현재 시스템의 DirectX 상태를 감지하는 전문 시스템 도구로, 이상이 발견되면 직접 복구할 수 있습니다. DirectX 복구 도구를 사용하는 방법을 모르는 사용자가 많을 수 있습니다. 아래의 자세한 튜토리얼을 살펴보겠습니다. 1. 수리 도구 소프트웨어를 사용하여 수리 감지를 수행합니다. 2. 복구가 완료된 후 C++ 구성 요소에 비정상적인 문제가 있다는 메시지가 나타나면 취소 버튼을 클릭한 후 도구 메뉴 표시줄을 클릭하세요. 3. 옵션 버튼을 클릭하고 확장을 선택한 후 확장 시작 버튼을 클릭합니다. 4. 확장이 완료된 후 다시 감지하여 수리합니다. 5. 복구 도구 작업을 완료한 후에도 문제가 여전히 해결되지 않으면 오류를 보고한 프로그램을 제거하고 다시 설치해 볼 수 있습니다.
Oracle 오류 3114에 대한 자세한 설명: 신속하게 해결하는 방법
Mar 08, 2024 pm 02:42 PM
Oracle 오류 3114에 대한 자세한 설명: 이를 신속하게 해결하는 방법, 구체적인 코드 예제가 필요합니다. Oracle 데이터베이스를 개발 및 관리하는 동안 다양한 오류가 발생하는 경우가 많으며 그중 오류 3114는 비교적 일반적인 문제입니다. 오류 3114는 일반적으로 네트워크 오류, 데이터베이스 서비스 중지 또는 잘못된 연결 문자열 설정으로 인해 발생할 수 있는 데이터베이스 연결 문제를 나타냅니다. 이 문서에서는 오류 3114의 원인과 이 문제를 신속하게 해결하는 방법을 자세히 설명하고 특정 코드를 첨부합니다.
바이두 넷디스크 사용법-바이두 넷디스크 사용법
Mar 04, 2024 pm 09:28 PM
아직도 Baidu Netdisk 사용법을 모르는 친구들이 많으므로 아래에서 편집자가 Baidu Netdisk 사용법을 설명해 드리겠습니다. 필요하신 분들은 서둘러서 살펴보시면 도움이 될 것입니다. 1단계: Baidu Netdisk를 설치한 후 직접 로그인합니다(그림 참조). 2단계: 그런 다음 페이지 프롬프트에 따라 "내 공유" 및 "전송 목록"을 선택합니다(그림 참조). 친구 공유"를 사용하면 사진과 파일을 친구들과 직접 공유할 수 있습니다(그림 참조). 4단계: 그런 다음 "공유"를 선택한 다음 컴퓨터 파일이나 네트워크 디스크 파일을 선택합니다(그림 참조). 다섯 번째 1단계: 그런 다음 친구를 찾을 수 있습니다(그림 참조). 6단계: "기능 보물 상자"(그림 참조)에서 필요한 기능을 찾을 수도 있습니다. 위 내용은 편집자의 의견입니다.
KMS 활성화 도구란 무엇입니까? KMS 활성화 도구를 사용하는 방법은 무엇입니까? KMS 활성화 도구를 사용하는 방법은 무엇입니까?
Mar 18, 2024 am 11:07 AM
KMS 정품 인증 도구는 Microsoft Windows 및 Office 제품을 정품 인증하는 데 사용되는 소프트웨어 도구입니다. KMS는 KeyManagementService의 약자로 키 관리 서비스입니다. KMS 정품 인증 도구는 컴퓨터가 가상 KMS 서버에 연결하여 Windows 및 Office 제품을 정품 인증할 수 있도록 KMS 서버의 기능을 시뮬레이션합니다. KMS 활성화 도구는 크기가 작고 기능이 강력합니다. 한 번의 클릭으로 영구적으로 활성화할 수 있으며, 인터넷에 연결하지 않고도 모든 버전의 Windows 시스템과 Office 소프트웨어를 활성화할 수 있습니다. 그리고 자주 업데이트되는 Windows 정품 인증 도구를 소개하겠습니다. KMS 정품 인증 작업을 소개하겠습니다.
Xiaoma win7 활성화 도구 사용 방법 - Xiaoma win7 활성화 도구 사용 방법
Mar 04, 2024 pm 06:16 PM
많은 사용자들이 Xiaoma win7 활성화 도구를 사용하고 있다고 생각합니다. 그런데 Xiaoma win7 활성화 도구를 사용하는 방법을 알고 계시나요? 그렇다면, 이에 관심이 있는 분들을 위해 편집자가 Xiaoma win7 활성화 도구 사용 방법을 알려드릴 것입니다. 다음 기사를 보러 오세요. 첫 번째 단계는 시스템을 재설치한 후 "내 컴퓨터"로 이동하여 상단 메뉴의 "시스템 속성"을 클릭하고 Windows 정품 인증 상태를 확인하는 것입니다. 두 번째 단계에서는 클릭하여 온라인으로 win7 활성화 도구를 다운로드하고 클릭하여 엽니다(어디서나 많은 리소스를 사용할 수 있음). 세 번째 단계는 Xiaoma 활성화 도구를 열고 "Windows 영구 활성화"를 클릭하는 것입니다. 네 번째 단계는 활성화 프로세스가 활성화를 완료할 때까지 기다리는 것입니다. 5단계: Windows 정품 인증 상태를 다시 확인하여 시스템이 정품 인증되었는지 확인합니다.
PHP에서 중간점의 의미와 사용법 분석
Mar 27, 2024 pm 08:57 PM
[PHP 중간점의 의미와 사용법 분석] PHP에서 중간점(.)은 두 개의 문자열이나 객체의 속성이나 메소드를 연결하는 데 사용되는 일반적으로 사용되는 연산자입니다. 이 기사에서는 구체적인 코드 예제를 통해 PHP에서 중간점의 의미와 사용법을 자세히 살펴보겠습니다. 1. 문자열 중간점 연산자 연결 PHP에서 가장 일반적인 사용법은 두 문자열을 연결하는 것입니다. 두 문자열 사이에 .을 배치하면 두 문자열을 이어붙여 새 문자열을 만들 수 있습니다. $string1=&qu
웜홀 NTT 구문 분석: 모든 토큰을 위한 개방형 프레임워크
Mar 05, 2024 pm 12:46 PM
Wormhole은 블록체인 상호 운용성의 선두주자로서 소유권, 통제 및 무허가형 혁신을 우선시하는 탄력적이고 미래 지향적인 분산 시스템을 만드는 데 중점을 두고 있습니다. 이 비전의 기초는 단순성, 명확성 및 광범위한 다중 체인 솔루션 제품군으로 상호 운용성 환경을 재정의하기 위한 기술 전문 지식, 윤리적 원칙 및 커뮤니티 조정에 대한 헌신입니다. 영지식 증명, 확장 솔루션 및 풍부한 기능의 토큰 표준이 등장하면서 블록체인은 더욱 강력해지고 상호 운용성은 점점 더 중요해지고 있습니다. 이 혁신적인 애플리케이션 환경에서 새로운 거버넌스 시스템과 실용적인 기능은 네트워크 전반의 자산에 전례 없는 기회를 제공합니다. 프로토콜 빌더는 이제 이 새로운 멀티체인에서 어떻게 기능할지 고민하고 있습니다.
Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까?
Mar 09, 2024 pm 05:36 PM
Ajax를 사용하여 PHP 메소드에서 변수를 얻는 것은 웹 개발의 일반적인 시나리오입니다. Ajax를 통해 데이터를 새로 고치지 않고도 페이지를 동적으로 얻을 수 있습니다. 이 기사에서는 Ajax를 사용하여 PHP 메소드에서 변수를 가져오는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 Ajax 요청을 처리하고 필요한 변수를 반환하기 위해 PHP 파일을 작성해야 합니다. 다음은 간단한 PHP 파일 getData.php에 대한 샘플 코드입니다.
