Das Folgende ist die Methode zur Verwendung von AJAX, die ich für Sie zusammengestellt habe. Interessierte Studenten können einen Blick darauf werfen.
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-Anfrage
<!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>12345678910111213141516171819202122232425262728293031323334353637
POST-Anfrage
<!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>123456789101112131415161718192021222324252627282930313233343536373839404142
FormDate sammelt Formulardaten
<!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>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
AJAX domänenübergreifend
//放在被访问资源上 <?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
Syntax :
$.get(url,data,function(),dataType)
url: Angeforderte Datei.
Daten: Daten übertragen.
function(responseText, statusText,xhr): Rückgabefunktion
responseText: Zurückgegebener Text.
statusText: Der zurückgegebene Statuswert.
status enthält den Status der Anfrage
("success", "notmodified", "error", "timeout", "parsererror")
xhr: XMLHttpRequest()-Anfrageobjekt.
Datentyp:
"xml" - ein XML-Dokument
"html" - HTML als einfacher Text
"text" - eine einfache Textzeichenfolge
"script" - Führen Sie die Antwort in JavaScript aus. und gibt
„json“ als Klartext zurück – führt die Antwort als JSON aus und gibt sie als JavaScript-Objekt zurück.
„jsonp“ – lädt einen JSON-Block mit JSONP, der ein „?callback=?“ hinzufügt URL zur Angabe des Rückrufs
.get(),.get(),.post() //post ist dasselbe wie get-Parameter
<!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>
Das Obige habe ich zusammengestellt. Ich hoffe, dass Ihnen alle Tipps zur Verwendung von AJAX in Zukunft hilfreich sein werden.
Verwandte Artikel:
Detaillierte Erläuterung der Schritte für jQuery+ajax zum Aufrufen des WCF-Dienstes
jQuery AJAX-Timeout-Timeout-Notfallbehandlungsmethode
JQuery+AJAX-Implementierungsdatei herunterladen
Das obige ist der detaillierte Inhalt vonDetaillierte Analyse der Verwendung von AJAX (Code eingefügt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!