zoukankan      html  css  js  c++  java
  • ajax基本代码

    js写法

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<input type="button" name="">
    </body>
    </html>
    <script>
    	document.querySelector("input").onclick=function(){
    		var xhr =new XMLHttpRequest(); //创建异步对象,这里的()别忘记了
    		xhr.open("post","xxx.php");  //设置请求行:请求的方式(post/get),请求的url   (get:会在网址栏中出现结果,易于测试但安全性不高。post无这种问题)
    		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//请求头,在post请求方式中必须有并且特定这种写法
    		xhr.onreadystatechange=function(){   //回调函数,还有一种onload写法 //xhr.onload=function(){}
    			if(this.readyState==4&&this.status==200){  //状态等于4时响应完成,但页面404时仍可接收到响应,所以这里要status(页面状态)==200,既页面正常才给接收响应
    				console.log(this.readyState);   //值是4
    				console.log(this.responseText);
    			}
    		};
    		xhr.send("name=heihei&skill=haha&age=15&sex=man");  
    		//(请求主体)发送请求,post请求方式的请求信息写在请求主体里,就是这里(这里已经写了)
    		//get请求方式的请求信息写在请求行里,如 xhr.open("get","xxx.php?name=heihei&skill=haha&age=15&sex=man")```
    	}
    </script>
    

    jQuery写法

    $(function(){
    		$("input").on("click",function(){
    		$.ajax({
    				url:"./callback.php",		//请求地址
    				type:"get",			//请求方式
    			data:"name=林子闲&wife=乔韵",			//这里的data:发送给服务器的请求数据
    				success:function(data){  //回调函数:数据请求成功之后调用
    					console.log(data);  				 //这里的data:从服务器发送回来的数据
    				},
    				// dataType:"json",
    				//dataType:"xml"     设置请求回来的数据格式是json还是xml.								
    									//也可以在php文件里设置数据格式    header("content-type:application/json;charset=utf-8");
    			})
    		})
    	})
    
  • 相关阅读:
    使用 Markdown Flow 画流程图
    两串锂电池的电池匹配
    笔记: CC2540 和 CC2541 的区别
    Elasticsearch 5.x 关于term query和match query的认识
    es 批量导入文件
    mac 下搭建Elasticsearch 5.4.3分布式集群
    Elastic Search 5.4.3 java api 入门
    solr java demo 基础入门
    创建索引并进行查询
    RabbitMq 之简单队列
  • 原文地址:https://www.cnblogs.com/huihuihero/p/10801015.html
Copyright © 2011-2022 走看看