zoukankan      html  css  js  c++  java
  • 以前写过的ajax基础案例(王欢huanhuan)

    //load方法的使用
      $('#loadBtn').click(function(){
       //responseTxt 包含来自请求的结果数据
    //statusTxt 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")
    //xhr 包含 XMLHttpRequest 对象
    //如果想要调用txt中的其他的一个标签里边的内容,那么就直接这样写 js/demo_ajax_load.txt h2
    $('.ajaxDiv').load('js/demo_ajax_load.txt',function(responseTxt,statusTxt,xhr){
    if(statusTxt=='success'){
    alert('异步加载成功')
    }
    if(statusTxt=='error'){
    alert('出错:'+xhr.status+':'+xhr.statusTxt)
    }
    });
      });
      
      
      
      //get方法调用xml方法的基础使用
      $('#clickXML').click(function(){
       $.get('js/demo.xml',function(data){
    $('#showXml').empty();
    $(data).find('entry').each(function(){
    var $entry = $(this);
    var html = '<div class="entry"></div>';
    html += '<h3 class="term">'+$entry.attr('term')+'</h3>';
    html += '<div class="part">'+$entry.attr('part')+'</div>';
    html += '<div class="definition">';
    html += $entry.find('definition').text();
    var $quote = $entry.find('quote');
    if($quote.length){
    html += '<div class="quote">';
    $quote.find('line').each(function(){
    html += '<div class="quote-line">' +$(this).text()+ '</div>';
    });
    if($quote.attr('author')){
    html += '<div class="quote-author">' +$quote.attr('author')+ '</div>';
    }
    html += '</div>';
    }
     
    html += '</div>';
    html += '</div>';
    $('#showXml').append($(html));
    });
    });
    return false;
    });
     
     
      //getJSON的基础使用方法
      $('#clickJSON').click(function(){
       $.getJSON('js/text.json',function(data){
    alert('成功了吗?');
    $('#dictionary').empty();
    $.each(data,function(entryIndex,entry){
    var html = '<div class="entry">';
    html += '<h3 class="term">'+entry['term']+'</h3>';
    html += '<div class="part">'+entry['part']+'</div>';
    html += '<div class="definition">'
    html += entry['definition'];
    if(entry['quote']){
    html += '<div class="quote">';
    $.each(entry['quote'],function(entryIndex,line){
    html += '<div class="quote-line">' +line+ '</div>';
    });
    if(entry['author']){
    html += '<div class="author">'+entry['author']+'</div>';
    }
    }
    html += '</div>';
    $('#dictionary').append(html);
    });
    });
    return false;
    });
      
     
     
      //getScript的基础使用方法
      $('#clickJS').click(function(){
       $.getScript("js/11.js",function(){
    alert('ok');
    });
    return false;
    });
      
      
      
      //javascript json 调用
      $('#getSZ').click(function(){
       var varJson =[
    {name:'huanhuan',age:'23',city:'beijing'},
    {name:'majie',age:'23',city:'beijing'},
    {name:'tutu',age:'26',city:'wenzhou'}
    ];
    varJson[0].name='wanghuan';
     
    for(var i in varJson){
    alert(varJson[i].name);
    $('#varJson').html('name:' + varJson[i].name +' '+ 'age:' + varJson[i].age +' '+ 'city:' + varJson[i].city + '<br/>');
    }
     
    var json ={
    options:[
    {name:'lujuan',age:'23',city:'beijing'},
    {name:'lucy',age:'20',city:'hangzhou'},
    {name:'yuanyuan',age:'25',city:'wenzhou'}
    ]
    };
    json = eval(json.options);
    for(var n=0; n<json.length; n++){
    alert(json[n].name);
    $('#varJson00').html('name:' + json[n].name +' '+ 'age:' + json[n].age +' '+ 'city:' + json[n].city + '<br/>');
    }
     
     
    $.each(varJson,function(s){
    $('#varJson01').append('name:' + varJson[s].name +' '+ 'age:' + varJson[s].age +' '+ 'city:' + varJson[s].city + '<br/>');
    });
     
     
    });

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
    <script type="text/javascript">
    $(function(){
    $('#clickJS').click(function(){
    $.getScript("js/11.js",function(){
    alert('ok');
    });
    return false;
    });

    $('#clickJSON').click(function(){
    $.getJSON('js/text.json',function(data){
    alert('成功了吗?');
    $('#dictionary').empty();
    $.each(data,function(entryIndex,entry){
    var html = '<div class="entry">';
    html += '<h3 class="term">'+entry['term']+'</h3>';
    html += '<div class="part">'+entry['part']+'</div>';
    html += '<div class="definition">'
    html += entry['definition'];
    if(entry['quote']){
    html += '<div class="quote">';
    $.each(entry['quote'],function(entryIndex,line){
    html += '<div class="quote-line">' +line+ '</div>';
    });
    if(entry['author']){
    html += '<div class="author">'+entry['author']+'</div>';
    }
    }
    html += '</div>';
    $('#dictionary').append(html);
    });
    });
    return false;
    });

    $('#clickHTML').click(function(){
    $('.htmlBox').load('demo.html');
    return false;
    });

    $('#clickXML').click(function(){
    $.get('js/demo.xml',function(data){
    $('#showXml').empty();
    $(data).find('entry').each(function(){
    var $entry = $(this);
    var html = '<div class="entry"></div>';
    html += '<h3 class="term">'+$entry.attr('term')+'</h3>';
    html += '<div class="part">'+$entry.attr('part')+'</div>';
    html += '<div class="definition">';
    html += $entry.find('definition').text();
    var $quote = $entry.find('quote');
    if($quote.length){
    html += '<div class="quote">';
    $quote.find('line').each(function(){
    html += '<div class="quote-line">' +$(this).text()+ '</div>';
    });
    if($quote.attr('author')){
    html += '<div class="quote-author">' +$quote.attr('author')+ '</div>';
    }
    html += '</div>';
    }

    html += '</div>';
    html += '</div>';
    $('#showXml').append($(html));
    });
    });
    return false;
    });

    //javascript json 调用
    $('#getSZ').click(function(){
    var varJson =[
    {name:'huanhuan',age:'23',city:'beijing'},
    {name:'majie',age:'23',city:'beijing'},
    {name:'tutu',age:'26',city:'wenzhou'}
    ];
    varJson[0].name='wanghuan';

    for(var i in varJson){
    alert(varJson[i].name);
    $('#varJson').html('name:' + varJson[i].name +' '+ 'age:' + varJson[i].age +' '+ 'city:' + varJson[i].city + '<br/>');
    }

    var json ={
    options:[
    {name:'lujuan',age:'23',city:'beijing'},
    {name:'lucy',age:'20',city:'hangzhou'},
    {name:'yuanyuan',age:'25',city:'wenzhou'}
    ]
    };
    json = eval(json.options);
    for(var n=0; n<json.length; n++){
    alert(json[n].name);
    $('#varJson00').html('name:' + json[n].name +' '+ 'age:' + json[n].age +' '+ 'city:' + json[n].city + '<br/>');
    }


    $.each(varJson,function(s){
    $('#varJson01').append('name:' + varJson[s].name +' '+ 'age:' + varJson[s].age +' '+ 'city:' + varJson[s].city + '<br/>');
    });


    });

    $('#loadBtn').click(function(){
    //responseTxt 包含来自请求的结果数据
    //statusTxt 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")
    //xhr 包含 XMLHttpRequest 对象
    //如果想要调用txt中的其他的一个标签里边的内容,那么就直接这样写 js/demo_ajax_load.txt h2
    $('.ajaxDiv').load('js/demo_ajax_load.txt',function(responseTxt,statusTxt,xhr){
    if(statusTxt=='success'){
    alert('异步加载成功')
    }
    if(statusTxt=='error'){
    alert('出错:'+xhr.status+':'+xhr.statusTxt)
    }
    });
    });


    })
    </script>
    </head>
    <body>



    <input type="button" value="点击加载js文件" id="clickJS" />
    <div id="dictionary"></div>
    <input type="button" value="点击加载json文件" id="clickJSON" />
    <div class="htmlBox"></div>
    <input type="button" value="点击加载html文件" id="clickHTML" />
    <div id="showXml"></div>
    <input type="button" value="点击加载xml文件" id="clickXML" />

    <div id="varJson">
    for循环出来:
    </div>
    <div id="varJson00">
    for循环出来2:
    </div>
    <div id="varJson01">
    each遍历出来:
    </div>
    <input type="button" value="javascript json 调用" id="getSZ" />
    <div class="ajaxDiv"></div>
    <input type="button" value="点击加载txt文件" id="loadBtn" />
    </body>
    </html> 

  • 相关阅读:
    统计元音 题解
    C语言合法标识符 题解
    查找最大元素 题解
    java_day05_数组
    java_day4_while循环
    java_day03_if,Switch,三目和for循环
    java_day02_基本运算符和数据类型
    java_day01_注释,变量
    前端_day04_行,块,RGB,行高,overflow
    前端_day03_盒子模型,border,padding,margin
  • 原文地址:https://www.cnblogs.com/huanhuan1989/p/3241154.html
Copyright © 2011-2022 走看看