使用$.ajaxSetup() 函数可以修改调用 Ajax 方法时每个选项的默认值

2017-06-30 16:34:00
admin
原创
392
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>The Devil's Dictionary</title>

	  <style>
/***************************************
   Default Styles
***************************************/

html, body {
  margin: 0;
  padding: 0;
}

body {
  font: 62.5% Verdana, Helvetica, Arial, sans-serif;
  color: #000;
  background: #fff;
}
#container {
  font-size: 1.2em;
  margin: 10px 2em;
}

h1 {
  font-size: 2.5em;
  margin-bottom: 0;
}

h2 {
  font-size: 1.3em;
  margin-bottom: .5em;
}
h3 {
  font-size: 1.1em;
  margin-bottom: 0;
}

code {
  font-size: 1.2em;
}

a {
  color: #06581f;
}


/***************************************
   Chapter Styles
***************************************/

#header {
  margin-bottom: 1em;
  padding-bottom: 1em;
  border-bottom: 1px solid #eee;
}


.letters {
  float: left;
  width: 15%;
  padding-right: 5%;
}

.letter {
  margin: 10px;
}
.letter h3 {
  font-weight: bold;
}

.letter ul {
  list-style: none;
  padding: 0;
  margin: 0 1em;
}

.letter input {
  width: 100%;
  margin-bottom: 1em;
}


#dictionary {
  float: left;
  width: 78%;
}

.entry {
  padding: 1em 0em;
  border-bottom: 1px solid #eee;
}
.entry .term {
  display: inline;
  font-weight: bold;
}
.entry .part {
  padding: 0 1em;
  display: inline;
  font-style: italic;
}
.entry .definition {
  padding: .5em;
}
.entry .definition .quote {
  margin: .5em 2em;
  padding: 0 1em;
  color: #333;
  border-left: 2px #eee solid;
}
.entry .definition .quote .quote-author {
  font-weight: bold;
  margin-left: 20em;
}

#loading {
  display: none;
  position: fixed;
  left: 50%;
  top: 40%;
  width: 90px;
  padding: 20px;
  margin-left: -66px;
  border: 1px #000 solid;
  background-color: #eee;
}
* html #loading {
  position: absolute;
}

.highlighted {
  background-color: #dfd;
  font-style: italic;
}


	  </style>

    <script src="http://code.ybao.org/js/jquery.js"></script>
    <script>
$(document).ready(function() {
 $('#letter-a a').click(function(event) {
    event.preventDefault();

    $.ajaxSetup({
      url: 'http://code.ybao.org/demo/src/ajax/a.html',
      type: 'POST',
      dataType: 'html'
    });

    $.ajax({
      type: 'GET',
      success: function(data) {
        $('#dictionary').html(data);
      }
    });
  });

  $('#letter-b a').click(function(event) {
    event.preventDefault();
    $.getJSON('http://code.ybao.org/demo/src/ajax/b.json', function(data) {
      var html = '';
      $.each(data, function(entryIndex, entry) {
        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(lineIndex, line) {
            html += '<div class="quote-line">' + line + '</div>';
          });
          if (entry.author) {
            html += '<div class="quote-author">' + entry.author + '</div>';
          }
          html += '</div>';
        }
        html += '</div>';
        html += '</div>';
      });
      $('#dictionary').html(html);
    });
  });

  $('#letter-c a').click(function(event) {
    event.preventDefault();
    $.getScript('http://code.ybao.org/demo/src/ajax/c.js');
  });

  $('#letter-d a').click(function(event) {
    event.preventDefault();
    $.get('http://code.ybao.org/demo/src/ajax/d.xml', function(data) {
      $('#dictionary').empty();
      $(data).find('entry').each(function() {
        var $entry = $(this);
        var html = '<div class="entry">';
        html += '<h3 class="term">' + $entry.attr('term');
          html += '</h3>';
        html += '<div class="part">' + $entry.attr('part');
          html += '</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">';
              html += $(this).text() + '</div>';
          });
          if ($quote.attr('author')) {
            html += '<div class="quote-author">';
              html += $quote.attr('author') + '</div>';
          }
          html += '</div>';
        }
        html += '</div>';
        html += '</div>';
        $('#dictionary').append($(html));
      });
    });
  });

 $('#letter-e a').click(function(event) { event.preventDefault();
event.preventDefault();
    var requestData = {term: $(this).text()};
    $.get('http://code.ybao.org/demo/src/ajax/z.php', requestData, function(data) {
      $('#dictionary').html(data);
    }).fail(function(jqXHR) {
      $('#dictionary')
      .html('Sorry, but an error occurred: ' + jqXHR.status)
      .append(jqXHR.responseText);
    });
});
	
$('#letter-f form').submit(function(event) { event.preventDefault();
var formValues = $(this).serialize();
$.get('http://code.ybao.org/demo/src/ajax/f.php', formValues, function(data) {
$('#dictionary').html(data);
});
});
	
  var $loading = $('<div id="loading">Loading...</div>')
    .insertBefore('#dictionary');

  $(document).ajaxStart(function() {
    $loading.show();
  }).ajaxStop(function() {
    $loading.hide();
  });

$('body').on('click', 'h3.term', function() {
    $(this).siblings('.definition').slideToggle();
  });
	
 var url = 'http://examples.learningjquery.com/jsonp/g.php';
  $('#letter-g a').click(function(event) {
    event.preventDefault();
    $.getJSON(url + '?callback=?', function(data) {
      var html = '';
      $.each(data, function(entryIndex, entry) {
        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(lineIndex, line) {
            html += '<div class="quote-line">' + line + '</div>';
          });
          if (entry.author) {
            html += '<div class="quote-author">' + entry.author + '</div>';
          }
          html += '</div>';
        }
        html += '</div>';
        html += '</div>';
      });
      $('#dictionary').html(html);
    });
  });
	
});

	</script>
  </head>
  <body>
    <div id="container">
      <div id="header">
        <h2>The Devil's Dictionary</h2>
        <div class="author">by Ambrose Bierce</div>
      </div>

      <div class="letters">
        <div class="letter" id="letter-a">
          <h3><a href="entries-a.html">A</a></h3>
        </div>
        <div class="letter" id="letter-b">
          <h3><a href="entries-b.html">B</a></h3>
        </div>
        <div class="letter" id="letter-c">
          <h3><a href="entries-c.html">C</a></h3>
        </div>
        <div class="letter" id="letter-d">
          <h3><a href="entries-d.html">D</a></h3>
        </div>
        <div class="letter" id="letter-e">
          <h3>E</h3>
          <ul>
            <li><a href="e.php?term=Eavesdrop">Eavesdrop</a></li>
            <li><a href="e.php?term=Edible">Edible</a></li>
            <li><a href="e.php?term=Education">Education</a></li>
            <li><a href="e.php?term=Eloquence">Eloquence</a></li>
            <li><a href="e.php?term=Elysium">Elysium</a></li>
            <li><a href="e.php?term=Emancipation">Emancipation</a></li>
            <li><a href="e.php?term=Emotion">Emotion</a></li>
            <li><a href="e.php?term=Envelope">Envelope</a></li>
            <li><a href="e.php?term=Envy">Envy</a></li>
            <li><a href="e.php?term=Epitaph">Epitaph</a></li>
            <li><a href="e.php?term=Evangelist">Evangelist</a></li>
          </ul>
        </div>
        <div class="letter" id="letter-f">
          <h3>F</h3>
          <form action="f.php">
            <input type="text" name="term" value="" id="term">
            <button type="submit">Search</button>
          </form>
        </div>
        <div class="letter" id="letter-g">
          <h3><a href="entries-g.html">G</a></h3>
        </div>
        <div class="letter" id="letter-h">
          <h3><a href="entries-h.html">H</a></h3>
        </div>

      </div>
      <div id="dictionary">
      </div>

    </div>
  </body>
</html>
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227