ajax原生写法和jQuery写法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax原生写法和jQuery写法相关的知识，希望对你有一定的参考价值。
一、原生js写ajax请求
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>json实例</title> 6 </head> 7 <body> 8 <input id="btn" value="json" type="button"> 9 <script type="text/javascript"> 10 window.onload = function(){ 11 var btn = document.getElementById(‘btn‘); 12 btn.onclick = function(){ 13 var xhr = null; 14 if(window.XMLHttpRequest){ 15 xhr = new XMLHttpRequest(); 16 }else{ 17 xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘); 18 } 19 xhr.open("post","./jsondemo.php",true); 20 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 21 xhr.onreadystatechange = function(){ 22 if(xhr.readyState == 4){ 23 if(xhr.status == 200){ 24 var data = xhr.responseText; 25 var obj = JSON.parse(data); 26 var obj1 = eval("("+data+")"); 27 console.log(obj.username); 28 console.log(obj.age); 29 console.log(obj1.username); 30 console.log(obj1.age); 31 32 }else{ 33 console.log(‘failure‘); 34 } 35 } 36 } 37 var param = ‘{"username":"zhangsan","age":"12"}‘; 38 xhr.send("user="+param); 39 } 40 } 41 </script> 42 </body> 43 </html>
二、jQuery方式写ajax请求
语法：
1 $.ajax({ 2 url: ‘XX.php‘, 3 type:‘post,‘ 4 data:{username:‘tom‘,password:‘2223‘}, 5 success: function (data){ 6 console.log(data); 7 }, 8 error: function (data){ 9 console.log(error); 10 } 11 })
以上除了URL设置外，其他的参数可选
1 <script type="text/javascript"> 2 $(function(){ 3 $("#btn").click(function(){ 4 $.ajax({ 5 type : "get", 6 url : ‘./05open.php?username=中国&password=123‘, 7 success : function(data){ 8 console.log(data); 9 } 10 }); 11 12 }); 13 }); 14 15 </script>
以上是关于ajax原生写法和jQuery写法的主要内容，如果未能解决你的问题，请参考以下文章