常用jQuery AJAX方法精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/oschina_41544814/article/details/84557571

CV大法用习惯了，有时候都忘记基本的写法了，做个记录，方便下次查看

其实jQuery 调用AJAX方法有很多，如下图，不过在项目中常用的也就那么几个，做个小统计：

在这里插入图片描述

最常用的三种：

<script>
    //把所有需要用到的地址归类到一个对象里
    var webUrl = {
        "show1Url": "{{ url('address/list1') }}",
        "show2Url": "{{ url('address/list2') }}",
        "show3Url": "{{ url('address/list3') }}"
    };

    function getData() {
        $.get(webUrl.show1Url,  //获取地址
            function(json){
                console.log(json);
             });
    }


    function postData(v1) {
        $.ajaxSettings.async = true;   //在这里设置同步或异步 默认为true(可不写)  false为同步

        $.post(webUrl.show2Url,   //获取地址
            {
                "id":v1          //需要传输的数据
            },
            function(json){
                console.log(json);
            });
    }

    function fullData(id) {
        $.ajax({              //  AJAX 请求设置。所有选项都是可选的。
            async:false,        //请求是同步或异步    默认为true  为true时不用写
            type: "POST",            //设置类型
            url: webUrl.show3Url,           //数据传输地址
            dataType: "json",               //获取的数据类型
            data: {"id":id},            //传参
            success: function (json) {      //请求成功之后调用
                // console.log(json);
                console.log(json);
            },
            error: function () {        //请求出错时调用
                console.log("请求失败");
            }
        })
    }

最后一种虽然很全，不过如果功能要求不是特别复杂的用前两个就OK

原生ajax

一个完整的AJAX请求包括五个步骤:

1.创建XMLHTTPRequest对象

2.使用open方法创建http请求,并设置请求地址

3.设置发送的数据，开始和服务器端交互

4.注册事件

5.获取响应并更新界面

这里列出get请求和post请求的例子：

<body>
	<h2>ajax请求用户名的校验</h2>
	<p>用户名 : <input type="text" name="username" value="" onblur="f1()" /></p>
	<p>邮箱 : <input type="text" name="email" value="" /></p>
	<div id="result" style="color:green;"></div>
	<!-- <input type="button"  value="提交" onclick="f2()" /> -->

1.get请求

<script type="text/javascript">
	//请求函数
	function f1(){
		console.log('start');
		//1.创建AJAX对象
		var ajax = new XMLHttpRequest();
		
		//4.给AJAX设置事件(这里最多感知4[1-4]个状态)
		ajax.onreadystatechange = function(){
			//5.获取响应
			//responseText		以字符串的形式接收服务器返回的信息
			//console.log(ajax.readyState);
			if(ajax.readyState == 4 && ajax.status == 200){
				var msg = ajax.responseText;
				console.log(msg);
				//alert(msg);
				var divtag = document.getElementById('result');
				divtag.innerHTML = msg;
			}
		}
		
		//2.创建http请求,并设置请求地址
		var username = document.getElementsByTagName('input')[0].value;
		var email = document.getElementsByTagName('input')[1].value;
		username = encodeURIComponent(username);	//对输入的特殊符号(&,=等)进行编码
		email = encodeURIComponent(email);
		ajax.open('get','response.php?username='+username+'&email='+email);
		
		//3.发送请求(get--null    post--数据)
		ajax.send(null);
	}
	
</script>

2.post请求

    <script type="text/javascript">
    	//请求函数
    	function f1(){
    		//console.log('start');
    		//1.创建AJAX对象
    		var ajax = new XMLHttpRequest();
    		
    		//4.给AJAX设置事件(这里最多感知4[1-4]个状态)
    		ajax.onreadystatechange = function(){
    			//5.获取响应
    			//responseText		以字符串的形式接收服务器返回的信息
    			//console.log(ajax.readyState);
    			if(ajax.readyState == 4 && ajax.status == 200){
    				var msg = ajax.responseText;
    				console.log(msg);
    				//alert(msg);
    				var divtag = document.getElementById('result');
    				divtag.innerHTML = msg;
    			}
    		}
		
		//2.创建http请求,并设置请求地址
		ajax.open('post','response.php');
		//post方式传递数据是模仿form表单传递给服务器的,要设置header头协议
		ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
		
		//3.发送请求(get--null    post--数据)
		var username = document.getElementsByTagName('input')[0].value;
		var email = document.getElementsByTagName('input')[1].value;
		username = encodeURIComponent(username);	//对输入的特殊符号(&,=等)进行编码
		email = encodeURIComponent(email);
		var info = 'username='+username+'&email='+email;	//将请求信息组成请求字符串
		ajax.send(info);
	}
	
</script>

ajax(jQuery)

原生ajax