zoukankan      html  css  js  c++  java
  • 通过XMLHttpRequest和jQuery两种方式实现ajax

    一、XMLHttpRequest实现获取数据

    不使用jQuery实现页面不刷新获取内容的方式,我们这里采用XMLHttpRequest原生代码实现;js代码如下:

    //1.获取a节点,并为其添加Oncilck响应函数
    document.getElementsByTagName("a")[0].onclick = function(){
       //3、创建一个XMLHttpRequest();
        var request = new XMLHttpRequest();
        
        //4、准备发送请求的数据url
        var url = this.href;
        var method = "GET";
        
        //5、调用XMLHttpRequest对象的open方法
        request.open(method,url);
    
        //6、调用XMLHttpRequest对象的send方法
        request.send(null);
    
        //7、为XMLHttpRequest对象添加onreadystatechange 响应函数
        request.onreadystatechange = function(){
            
            //8、判断响应是否完成:XMLHttpRequest 对象的readystate的属性值为4的时候
            if(request.readyState == 4){
    //9、在判断响应是否可用:XMLHttpRequest 对象status 属性值为200 if(request.status == 200){
    //10、响应结果 alert(request.responseText); } } } //2、取消a节点的额默认行为 return false; }

    插入HTML代码:

    <a href = "hello.txt">点击获取文本内容</a>

     二、jQuery实现ajax获取信息

    这个例子是动态的从后台获取数据来改变下拉按钮的内容;

    js代码如下:

    function bindCarteam0(){
             //通过URL请求数据
             var URL = <select:link page="/xiaoshouwl.do?method=getCarteamList"/>;
                $.ajax({
                    url:URL,
                    type:'GET',
                    dataType: "json",
                    success:function(html){
                        var str="<option value='-1'>全部</option>";
                        for(var i=0;i<html.length;i++){
                            str+="<option value='"+html[i].id+"'>"+html[i].name+"</option>";
                        }
                        $("#carteam_code").empty().html(str);
                    }
                });
         }

    HTML代码如下:

    <select:select property="carteam_code" styleId="carteam_code" style="150px">
                                             <select:option value="-1">全部</select:option>
                                    </select:select>

    其中type类型有get和post两种;

    post 可以传输的数据量比较大,get有字节限制;

  • 相关阅读:
    Windows 8实例教程系列 开篇
    qt 开发发布于 windeploy.exe
    qt qoci 测试验证
    vmware vmx 版本不兼容
    qt oracle
    vc qt dll
    QOCIDriver unable to create environment
    qoci 编译完 放置位置 具体根据情况
    calling 'lastError' with incomplete return type 'QSqlError' qsqlquer
    Hbase 操作工具类
  • 原文地址:https://www.cnblogs.com/sdgf/p/4765151.html
Copyright © 2011-2022 走看看