Head First JQuery学习笔记(三)

来源：互联网发布：淘宝400 bad request 编辑：程序博客网时间：2024/04/28 16:07

八. JQuery与Ajax

1. 使用Ajax时，Web页面只在需要时（以及需要的地方）向服务器请求它们真正需要的内容，即部分刷新。

2. Ajax调用受到同源策略的限制

3. 通过结合使用find方法和each方法，可以搜索一组元素，使用一个循环分别与各个元素交互

九. 处理JSON数据

1. HTTP GET方法将表单域名和值作为键/值对追加到URL的末尾

2. serialize()和serializeArray()两个函数用来实现数据的串行化

3. JSON是JavaScript对象记法（JavaScriptObject Notation）的缩写;

这是一种轻量级数据交换格式，对于人们来说容易读写，对计算机则容易解析和生成；

jQuery提供了一个快捷方法post，这个方法专门用来向服务器发送数据；

$.post(url_to_send,data, function(json){})

jQuery中获取JSON数据：getJSON方法；

$.getJSON(url_to_load,function(json){})

4. PHP json_encode()函数可以将一个关联数组转换为JSON编码的值串；

PHP arraypush()函数可以将新元素增加到数组的末尾；

PHP preg_match()函数可以匹配指定的特定条件，从而控制输入数据的类型

5. 代码示例：

<!-- index.html --><!DOCTYPE html> <html> <head> <title>2011 Race Finishers</title> <link href="styles/my_style.css" rel="stylesheet"></head> <body> <header><h2>2011 Race Finishers!</h2></header><div id="main"><ul class="idTabs"> <li><a href="#male">Male Finishers</a></li> <li><a href="#female">Female Finishers</a></li> <li><a href="#all">All Finishers</a></li> <li><a href="#new">Add New Finisher</a></li></ul> <div id="male"><h4>Male Finishers</h4><ul id="finishers_m"></ul></div> <div id="female"><h4>Female Finishers</h4><ul id="finishers_f"></ul></div><div id="all"><h4>All Finishers</h4><ul id="finishers_all"></ul></div><div id="new"><h4>All Finishers</h4><form id="addRunner" name="addRunner" action="service.php" method="POST">First Name: <input type="text" name="txtFirstName" id="txtFirstName"> <br>Last Name: <input type="text" name="txtLastName" id="txtLastName"> <br>Gender: <select id="ddlGender" name="ddlGender"><option value="">--Please Select--</option><option value="f">Female</option><option value="m">Male</option></select><br>Finish Time: <input type="text" name="txtMinutes" id="txtMinutes" size="10" maxlength="2">(Minutes)<input type="text" name="txtSeconds" id="txtSeconds" size="10" maxlength="2">(Seconds)<br><br><button type="submit" name="btnSave" id="btnSave">Add Runner</button><input type="hidden" name="action" value="addRunner" id="action"></form></div></div><footer><h4>Congratulations to all our finishers!</h4><button id="btnStart">Start Page Updates</button><button id="btnStop">Stop Page Updates</button><br><span id="freq"></span><br><br>Last Updated: <div id="updatedTime"></div></footer><script src="scripts/jquery-1.6.2.min.js"></script><script src="scripts/my_scripts.js"></script><script src="scripts/jquery.idTabs.min.js"></script></body></html>

<!-- service.php --><?phpif($_POST){if ($_POST['action'] == 'addRunner') {$fname = htmlspecialchars($_POST['txtFirstName']);$lname = htmlspecialchars($_POST['txtLastName']);$gender = htmlspecialchars($_POST['ddlGender']);$minutes = htmlspecialchars($_POST['txtMinutes']);$seconds = htmlspecialchars($_POST['txtSeconds']);if(preg_match('/[^\w\s]/i', $fname) || preg_match('/[^\w\s]/i', $lname)) {fail('Invalid name provided.');}if( empty($fname) || empty($lname) ) {fail('Please enter a first and last name.');}if( empty($gender) ) {fail('Please select a gender.');}if( empty($minutes) || empty($seconds) ) {fail('Please enter minutes and seconds.');}$time = $minutes.":".$seconds;$query = "INSERT INTO runners SET first_name='$fname', last_name='$lname', gender='$gender', finish_time='$time'";$result = db_connection($query);if ($result) {$msg = "Runner: ".$fname." ".$lname." added successfully" ;success($msg);} else {fail('Insert failed.');}exit;}}if($_GET){if($_GET['action'] == 'getRunners'){$query = "SELECT first_name, last_name, gender, finish_time FROM runners order by finish_time ASC ";$result = db_connection($query);$runners = array();while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {array_push($runners, array('fname' => $row['first_name'], 'lname' => $row['last_name'], 'gender' => $row['gender'], 'time' => $row['finish_time']));}echo json_encode(array("runners" => $runners));exit;}}function db_connection($query) {mysql_connect('127.0.0.1', 'runner_db_user', 'runner_db_password')OR die(fail('Could not connect to database.'));mysql_select_db('race_info');return mysql_query($query);}function fail($message) {die(json_encode(array('status' => 'fail', 'message' => $message)));}function success($message) {die(json_encode(array('status' => 'success', 'message' => $message)));}?>

<!-- time.php --><?phpdate_default_timezone_set('America/Los_Angeles');echo date("F j, Y, g:i:s a");?>

/* my_scripts.js */$(document).ready(function(){var FREQ = 10000 ;var repeat = true;showFrequency();getDBRacers();startAJAXcalls();function showFrequency(){$("#freq").html( "Page refreshes every " + FREQ/1000 + " second(s).");}function startAJAXcalls(){if(repeat){setTimeout( function() {getDBRacers();startAJAXcalls();}, FREQ);}}function getTimeAjax(){var time = "";$.ajax({url: "time.php",cache: false,success: function(data){$('#updatedTime').html(data);}});}$("#btnStop").click(function(){repeat = false;$("#freq").html( "Updates paused." );});$("#btnStart").click(function(){repeat = true;startAJAXcalls();showFrequency();});function getDBRacers(){$.getJSON("service.php?action=getRunners", function(json) {if (json.runners.length > 0) {$('#finishers_m').empty();$('#finishers_f').empty();$('#finishers_all').empty();$.each(json.runners,function() {var info = '<li>Name: ' +  this['fname'] + ' ' +  this['lname'] + '. Time: ' +  this['time'] + '</li>';if(this['gender'] == 'm'){$('#finishers_m').append( info );}else if(this['gender'] == 'f'){$('#finishers_f').append( info );}else{}$('#finishers_all').append( info );});}});getTimeAjax();}$("#addRunner").submit(function(){return false;});$('#btnSave').click(function() {var data = $("#addRunner :input").serializeArray();$.post($("#addRunner").attr('action'), data, function(json){if (json.status == "fail") {alert(json.message);}if (json.status == "success") {alert(json.message);clearInputs();}}, "json");});function clearInputs(){$("#txtFirstName").val('');$("#txtLastName").val('');$("#ddlGender").val('');$("#txtMinutes").val('');$("#txtSeconds").val('');}});

/* my_style.css */body{background-color: #000;color: white;}/* Style for tabs */#main {  background:#181818;  color:#111;  padding:15px 20px;  width:600px;  border:1px solid #222;  margin:8px auto;}#main > li, #main > ul > li { list-style:none; float:left; }#main ul a {  display:block;  padding:6px 10px;  text-decoration:none!important;  margin:1px;  margin-left:0;  color:#FFF;  background:#444;}#main ul a:hover {  color:#FFF;  background:#111;  }#main ul a.selected {  margin-bottom:0;  color:#000;  background:snow;  border-bottom:1px solid snow;  cursor:default;  }#main div {  padding:10px 10px 8px 10px;  *padding-top:3px;  *margin-top:-15px;  clear:left;  background:snow;  height: 300px ;}#main div a { color:#000; font-weight:bold; }

十. jQuery UI

1. jQuery提供了一个插件体系结构，允许Web开发人员扩展核心jQuery库

2. Puff：效果插件，显示某个事件当前完成的百分比；

Autocomplete：部件插件，用户在一个输入域中键入时，提供一组可取值的列表；

Droppable：交互插件，使一个DOM元素作为可拖放元素的目标；

Explode：效果插件，使元素看起来像破碎成片，四处分散；

Sortable：交互插件，使元素可以通过拖动进行排序；

Progressbar：部件插件，显示某个时间当前完成的百分比；

Resizable：交互插件，为元素提供一个可拖动的手柄，从而允许用户扩展这个元素；

Blind：效果插件，使元素看起来像窗户一样上滑或下滑；

Accordion：部件插件，创建折叠区来组织Web内容

3. 代码示例：

<!-- sightings.html --><!DOCTYPE html><html><head><title>Submit Your Cryptid Sighting</title><link rel="stylesheet" type="text/css" href="style/form.css" /><link type="text/css" href="jquery-ui-1.8.16.custom/css/sunny/jquery-ui-1.8.16.custom.css" rel="stylesheet" /></head><body><div class="ui-widget-header ui-corner-top form_pad">      <h2>Submit Your Cryptid Sighting</h2>  <h3>Fill out the form below and click "Enter" to Submit</h3></div><form id="frmAddSighting" name="form" method="post" action="service.php"><div class="ui-widget-content form_pad"><h3>CRYPTID SIGHTING DATA</h3></div><div class="ui-widget-content form_pad"><h3>Date of Sighting:</h3><input  type="text" name="sighting_date" id="datepicker" /><h3>Creature Type:</h3><div id="type_select"><input type="radio" id="radio1" name="creature_type" value="Chupacabras"/><label for="radio1">Chupacabras</label><input type="radio" id="radio2" name="creature_type" value="Jersey Devil"/><label for="radio2">Jersey Devil</label><input type="radio" id="radio3" name="creature_type" value="Loch Ness Monster"/><label for="radio3">Loch Ness Monster</label><input type="radio" id="radio4" name="creature_type" value="Sasquatch"/><label for="radio4">Sasquatch</label><input type="radio" id="radio5" name="creature_type" value="Yeti"/><label for="radio5">Yeti</label><input type="radio" id="radio6" name="creature_type" value="Other"/><label for="radio6">Other</label></div><h3>Distance from Creature (in ft.):</h3><input type="text" id="distance" class="just_display" name="creature_distance" readonly="readonly"/><div id="slide_dist"></div><h3>Creature Weight (in lbs.):</h3><input  type="text" id="weight" class="just_display" name="creature_weight"   readonly="readonly"/><div id="slide_weight"></div><h3>Creature Height (in ft.):</h3><input  type="text" id="height" class="just_display" name="creature_height" readonly="readonly"/><div id="slide_height"></div><h3>Color of Creature (use the color sliders to enter):</h3>Color:<input  type="text" class="just_display" name="creature_color_rgb" id="color_val" readonly="readonly"/><div id="swatch" class="ui-widget-content ui-corner-all"></div>Red:<input  type="text" class="just_display" name="creature_color" id="red_val" readonly="readonly"/><div id="red"></div>Green:<input  type="text" class="just_display" name="creature_color" id="green_val" readonly="readonly"/><div id="green"></div>Blue:<input  type="text" class="just_display" name="creature_color" id="blue_val" readonly="readonly"/><div id="blue"></div></div><div class="ui-widget-content form_pad"><h3>CRYPTID LOCATION DATA</h3></div><div class="ui-widget-content form_pad"><h3>Latitude of Sighting:</h3><input  type="text" id="latitude"  name="sighting_latitude"/><div id="slide_lat"></div><h3>Longitude of Sighting:</h3><input  type="text" id="longitude" name="sighting_longitude"/><div id="slide_long"></div></div><div class="ui-widget-header ui-corner-bottom form_pad"><button type="submit" id="btnSave">Submit</button><input type="hidden" name="action" value="addSighting" id="action"></div></form><script src="scripts/jquery-1.6.2.min.js"></script><script src="scripts/my_scripts.js"></script><script src="jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js"></script></body></html>

/* my_scripts.js */$(document).ready(function(){//1. Build a date picker for users to enter the date of the sighting.$("#datepicker").datepicker({ changeMonth: true, changeYear: true});//2. Build more engaging radio buttons for users to choose the creature type.$( "#type_select" ).buttonset();//3. Build number entry sliders for users to enter distance from creature, creature weight, and creature height.//3a. slide_dist$( "#slide_dist" ).slider({value:0,min: 0,max: 500,step: 10,slide: function( event, ui ) {$( "#distance" ).val( ui.value);}});$( "#distance" ).val( $( "#slide_dist" ).slider( "value" ));//3b. slide_weight$( "#slide_weight" ).slider({value:0,min: 0,max: 5000,step: 5,slide: function( event, ui ) {$( "#weight" ).val( ui.value);}});//3c.  slide_height$( "#slide_height" ).slider({value:0,min: 0,max: 20,step: 1,slide: function( event, ui ) {$( "#height" ).val( ui.value);}});//3d. latitude$( "#slide_lat" ).slider({value:0,min: -90,max: 90,step: 0.00001,slide: function( event, ui ) {$( "#latitude" ).val( ui.value);}});//3e. longitude$( "#slide_long" ).slider({value:0,min: -180,max: 180,step: 0.00001,slide: function( event, ui ) {$( "#longitude" ).val( ui.value);}});//4. Build a color mixer interface component for the user to enter creature color.function refreshSwatch() {varred = $( "#red" ).slider( "value" );vargreen = $( "#green" ).slider( "value" );varblue = $( "#blue" ).slider( "value" );varmy_rgb = "rgb(" + red + "," + green + "," + blue + ")"; $( "#swatch" ).css( "background-color", my_rgb );$( "#red_val" ).val(red );$( "#blue_val" ).val( blue);$( "#green_val" ).val( green);$( "#color_val" ).val( my_rgb);}$( "#red, #green, #blue" ).slider({orientation: "horizontal",range: "min", max: 255, value: 127, slide: refreshSwatch,change: refreshSwatch});$( "#red" ).slider( "value", 127 );$( "#green" ).slider( "value", 127 );$( "#blue" ).slider( "value", 127 );//5. Build a nicer-looking “submit“ button for the Sightings form..$("button:submit").button();$("#frmAddSighting").submit(function(){return false;});$('#btnSave').click(function() {var data = $("#frmAddSighting :input").serializeArray();$.post($("#frmAddSighting").attr('action'), data, function(json){if (json.status == "fail") {alert(json.message);}else if (json.status == "success") {alert(json.message);}else{alert("Nothing Happened");}}, "json");});});//end doc ready

0 0