ajax的用法

╰半橙微兮° 2022-12-01 03:52 189阅读 0赞

# 原生JS中-----例子 #

## 1.1 get ##

/* 1 创建xhr*/
    var xhr = new XMLHttpRequest();
    /*2 打开连接 */
    xhr.open("GET", "./dem.text", false);
    /* 3监听状态 */
    xhr.onreadystatechange = function() {
    if (xhr.status == 200 && xhr.readyState == 4) {
    content.innerHTML = xhr.responseText;
    console.log(xhr.responseText)
    }
    }
    
    /* 4. 发送 */
    	xhr.send();

## 1.2 post ##

xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’)，这个的目的是告诉服务器端该请求是一个post请求，防止被服务器认为是get而报错。

var xhr = new XMLHttpRequest();
    			var name = document.getElementById("name").value;
    			var age = document.getElementById("age").value;
    			var xhr = new XMLHttpRequest();
    			xhr.open("post", "http://520mg.com/ajax/echo.php");
    			xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    			xhr.onreadystatechange = function() {
    				if (xhr.status == 200 && xhr.readyState == 4) {
    					content.innerHTML = xhr.responseText;
    					console.log(xhr.responseText)
    				}
    			}
    			xhr.send("name=mumu&age=18");

# jquery中的ajax #

## 2.1 上层ajax ##

### 2.1.1 load() 用于加载html ###

//目标 ： 单击加载be.html    neirong放在con中
    		$(function(){
    			$("#btn1").click(function(){
    				$(".con").load("./be.html ")
    				// $(".con").load("./be.html .content")
    			})
    		})

### 2.1.2 $.getScript() 加载js ###

$(function(){
    			$("#btn2").click(function(){
    				$.getScript("./script.js");//执行script.js的内容
    			})
    		})

### 2.1.3 $.getJSON() 加载json ###

//单击按钮 加载be.json   放入con2中
    		$(function(){
    			$("#btn3").click(function(){
    				$.getJSON("./be.json",function(data,status,xhr){
    					console.log(data,status,xhr);
    					// data be.json  里面的数据
    					// status 状态  success  成功
    					// xhr 封装好的jquery  xhr对象
    					// JSON.stringify  把js对象转换字符串
    					$(".con2").text(JSON.stringify(data));
    				})
    			})
    		})

## 2.2 中层ajax ##

### 2.2.1 $.get() ###

*  done fail always
    
        $(function() {
              $("button").click(function() {
                  $.get("./be.txt").done(res => {
                      $(".con").text(res);
                  }).fail(err => {
                      console.log(err)
                  }).always(xhr => {
                      console.log("成功失败都执行", xhr);
                  })
        
              })
          })
 *  普通方法
    
        $("button").click(function() {
              $.get("./be.txt", function(data, status, xhr) {
                   if (status == "success") {
                      $(".con").text(data);
                  }
              })
           })
 *  then catch
    
        $(function() {
                $("button").click(function() {
                    $.get("./be.txt").then(res => {
                        $(".con").text(res);
                    }).catch(err => {
                        console.log(err)
                    })
        
                })
            })
 *  2.2.2 $.post()

$(function() {
                $("#btn").click(function() {
    
    
                    $.post("https://www.520mg.com/ajax/echo.php", `name=${$("#name").val()}&age=${$("#age").val()}`)
                        .then(res => {
                            $(".con").text(res);
                        }).catch(err => {
    
                            console.log(err);
                        })
                })
    
            })

3.3 底层ajax

mui.ajax('url',{
    		data:{	
    			},
    			dataType:'json',//服务器返回json格式数据
    			type:'post',//HTTP请求类型
    			timeout:10000,//超时时间设置为10秒；
    			success:function(data){
    				
    			},
    			error:function(xhr,type,errorThrown){
    				
    			}
    		});