zoukankan      html  css  js  c++  java
  • Ajax的使用

    // GET 方式
    function ajax() {
    
        // 提取值
        var keyword = document.getElementById('keyword').value;
        // 实例化
        xhr = new XMLHttpRequest();
        // 发起请求
        xhr.open('get', 'deal.php?keyword='+keyword, true);
        xhr.send(null);
        // 跟踪
        xhr.onreadystatechange = function(){
            if (xhr.status == 200 && xhr.readyState == 4) {
                document.getElementById('result').innerHTML = xhr.responseText;
    
            }
    
        }
    
    }
    
    
    // POST 方式
    function ajax(str) {
    
        // 实例化
        var xhr = new XMLHttpRequest();
        // 发起请求
        xhr.open('post', 'deal.php', true);
        var data = 'keyword='+str;
    
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xhr.send(data);
    
        // 跟踪
        xhr.onreadystatechange = function() {
             if (xhr.status == 200 && xhr.readyState == 4) {
              document.getElementById('result').innerHTML = xhr.responseText;
              
              }
    
        }
    
    }

    jQuery方式

    $.ajax({
        url:'/comm/test1.php',
        type:'POST', //GET
        async:true,    //或false,是否异步
        data:{
            name:'yang',age:25
        },
        timeout:5000,    //超时时间
        dataType:'json',    //返回的数据格式:json/xml/html/script/jsonp/text
        beforeSend:function(xhr){
            console.log(xhr)
            console.log('发送前')
        },
        success:function(data,textStatus,jqXHR){
            console.log(data)
            console.log(textStatus)
            console.log(jqXHR)
        },
        error:function(xhr,textStatus){
            console.log('错误')
            console.log(xhr)
            console.log(textStatus)
        },
        complete:function(){
            console.log('结束')
        }
    })
  • 相关阅读:
    Min25 筛与 Powerful Numbers
    「CF576D」 Flights for Regular Customers
    「CF568C」 New Language
    「CF559E」 Gerald and Path
    「CF555E」 Case of Computer Network
    20210604
    20210603模拟赛总结
    20210602模拟赛总结
    CF603E 整体二分
    20210601模拟赛总结
  • 原文地址:https://www.cnblogs.com/pengyunjing/p/6414550.html
Copyright © 2011-2022 走看看