1 / 22

Using JQuery / APIs / JSON

Using JQuery / APIs / JSON. Dr. Charles Severance www.php-intro.com. Document Object Model. JavaScript can manipulate the current HTML docment The “ Document Object Model ” tells us the syntax to use to access various “ bits ” of the current screen to read and/or manipulate

  • jquery
  • jquery 01
  • return false
  • function data
  • document object model
  • json 02 chat index
xaviera-ferguson xaviera-ferguson
Download Presentation

Using JQuery / APIs / JSON

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Using JQuery / APIs / JSON • Dr. Charles Severance • www.php-intro.com

  2. Document Object Model • JavaScript can manipulate the current HTML docment • The “Document Object Model” tells us the syntax to use to access various “bits” of the current screen to read and/or manipulate • You can even find pieces of the model by id attribute and change them • We can read and write the DOM from JavaScript http://en.wikipedia.org/wiki/Document_Object_Model

  3. DOM's are not Identical • Not all browsers represent their page exactly the same. • This makes it a challenge to keep all of your JavaScript working on all browsers • Also means you need to test your code over and over on each browser • Aargh..

  4. JQuery to the rescue • While the DOM's are not particularly portable, and direct DOM manipulation is a little clunky, there are a number of JavaScript frameworks that handle the myriad of subtle differeces between browsers • http://jquery.org/ • With JQuery, instead of manipulating the DOM, we use JQuery functions and everything works much better...

  5. JQuery Documentation • The web is a wonderful source of JQuery documentation • http://docs.jquery.com/Main_Page • http://api.jquery.com/ • http://jqueryui.com/demos/ • .....

  6. jquery-01/hello.php http://www.php-intro.com/code/jquery-01.zip <html> <head> <script type="text/javascript" src="jquery.min.js"> </script> </head> <body> <script type="text/javascript"> $(document).ready(function(){ alert("Hello JQuery World!"); window.console && console.log('Hello JQuery..'); }); </script> <p>Here is some awesome page content</p> </body>

  7. jquery-01/resize.php <html> <head> <script type="text/javascript" src="jquery.min.js"> </script> </head> <body> <script type="text/javascript"> $(window).resize(function() { console.log('.resize() called. width='+ $(window).width()+' height='+$(window).height()); }); </script> <p>Here is some awesome page content</p> </body> http://api.jquery.com/resize/

  8. jquery-01/toggle.php <p id="para">Where is the spinner? <imgid="spinner" src="spinner.gif" height="25" style="vertical-align: middle; display:none;"> </p> <a href="#" onclick="$('#spinner').toggle(); return false;">Toggle</a> <a href="#" onclick="$('#para').css('background-color', 'red'); return false;">Red</a> <a href="#" onclick="$('#para').css('background-color', 'green'); return false;">Green</a>

  9. jquery-01/autoecho.php <?php sleep(1); echo('You sent: '.$_POST['val']); jquery-01/autopost.php <form id="target"> <input type="text" name="one" value="Hello there" style="vertical-align: middle;"/> <img id="spinner" src="spinner.gif" height="25" style="vertical-align: middle; display:none;"> </form> <div id="result"></div> ...

  10. jquery-01/autopost.php <script type="text/javascript"> $('#target').change(function(event) { event.preventDefault(); $('#spinner').show(); var form = $('#target'); vartxt = form.find('input[name="one"]').val(); window.console && console.log('Sending POST'); $.post( 'autoecho.php', { 'val': txt }, function( data ) { window.console && console.log(data); $('#result').empty().append(data); $('#spinner').hide(); } ).error( function() { window.console && console.log('error'); }); return false; }); </script>

  11. JavaScript Object Notation

  12. JavaScript Object Notation • Douglas Crockford - "Discovered" JSON • Object literal notation in JavaScript https://vimeo.com/38054451 http://www.youtube.com/watch?v=-C-JoyNuQJs

  13. Associative Arrays Objects • JavaScript Associative Arrays are actually objects with member variables • They can be accessed with either associative array syntax or object syntax

  14. balls = {"golf": "Golf balls", "tennis": "Tennis balls", "ping": "Ping Pong balls"}; balls.soccer = "Soccer balls"; balls['lacross'] = "Lacross balls"; console.dir(balls);

  15. JSON Syntax who = { 'name': 'Chuck', 'age': 29, 'college': true, 'offices' : [ '3350DMC', '3437NQ' ], 'skills' : { 'fortran': 10, 'C': 10, 'C++': 5, 'python' : '7' } }; String Integer Boolean List/Array Object

  16. json-01/syntax.php http://www.php-intro.com/code/json-01.zip <html><head/><body> <script type="text/javascript"> who = { 'name': 'Chuck', 'age': 29, 'college': true, 'offices' : [ '3350DMC', '3437NQ' ], 'skills' : { 'fortran': 10, 'C': 10, 'C++': 5, 'python' : '7' } }; window.console && console.log(who); </script> <p>Check out the console.log to see the cool object</p> <pre> .... Constant

  17. json-01/index.php ... $(document).ready( function () { $.getJSON('json.php', function(data) { $("#back").html(data.first); window.console && console.log(data); }) } ); ... json-01/json.php <?php sleep(2); header('Content-Type: application/json; charset=utf-8'); $stuff = array('first' => 'first thing', 'second' => 'second thing'); echo(json_encode($stuff));

  18. <?php session_start(); if ( isset($_POST['reset']) ) { $_SESSION['chats'] = Array(); header("Location: index.php"); return; } if ( isset($_POST['message']) ) { if ( !isset ($_SESSION['chats']) ) $_SESSION['chats'] = Array(); $_SESSION['chats'] [] = array($_POST['message'], date(DATE_RFC2822)); header("Location: index.php"); return; } ?> <html> <head> <script type="text/javascript" src="jquery.min.js"> </script> </head> json-02-chat/index.php

  19. http://www.php-intro.com/code/json-02-chat.zip json-02-chat/index.php <html> <head> <script type="text/javascript" src="jquery.min.js"> </script> </head> <body> <h1>Chat</h1> <form method="post" action="index.php"> <p> <input type="text" name="message" size="60"/> <input type="submit" value="Chat"/> <input type="submit" name="reset" value="Reset"/> </p> </form> <div id="chatcontent"> <imgsrc="spinner.gif" alt="Loading..."/> </div> <script type="text/javascript"> ....

  20. function updateMsg() { window.console && console.log("Requesting JSON"); $.ajax({ url: "chatlist.php", cache: false, success: function(data){ window.console && console.log("JSON Received"); window.console && console.log(data); $("#chatcontent").empty(); for (vari = 0; i < data.length; i++) { entry = data[i]; $("#chatcontent").append("<p>"+entry[0] + "<br/>&nbsp;&nbsp;"+entry[1]+"</p>\n"); } setTimeout('updateMsg()', 4000); } }); } window.console && console.log("Startup complete"); updateMsg(); // Call the first time to get things started json-02-chat/index.php

  21. json-02-chat/chatlist.php <?php session_start(); sleep(5); header('Content-Type: application/json; charset=utf-8'); if ( !isset($_SESSION['chats']) ) $_SESSION['chats'] = array(); echo(json_encode($_SESSION['chats']));

  22. http://www.php-intro.com/code/json-03-crud.zip json-03-crud

More Related

代做工资流水公司遵义银行流水账模板南京入职银行流水模板南宁工资流水制作长春打印车贷流水长春代办对公银行流水上海银行流水电子版费用在职证明代开漳州日常消费流水费用桂林流水单开具石家庄入职流水查询福州代做薪资流水单天津银行流水账样本济宁打房贷收入证明福州转账银行流水打印温州开银行流水PS保定办签证工资流水泰州入职工资流水开具扬州代做消费贷流水肇庆制作个人流水衡阳车贷银行流水 代做开封代做个人流水临沂收入证明报价湖州代做银行流水PS常州房贷银行流水 报价阜阳办对公流水威海收入证明制作潍坊银行流水单图片孝感代做银行流水修改襄阳薪资流水单价格三亚做日常消费流水香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声卫健委通报少年有偿捐血浆16次猝死汪小菲曝离婚始末何赛飞追着代拍打雅江山火三名扑火人员牺牲系谣言男子被猫抓伤后确诊“猫抓病”周杰伦一审败诉网易中国拥有亿元资产的家庭达13.3万户315晚会后胖东来又人满为患了高校汽车撞人致3死16伤 司机系学生张家界的山上“长”满了韩国人？张立群任西安交通大学校长手机成瘾是影响睡眠质量重要因素网友洛杉矶偶遇贾玲“重生之我在北大当嫡校长”单亲妈妈陷入热恋 14岁儿子报警倪萍分享减重40斤方法杨倩无缘巴黎奥运考生莫言也上北大硕士复试名单了许家印被限制高消费奥巴马现身唐宁街 黑色着装引猜测专访95后高颜值猪保姆男孩8年未见母亲被告知被遗忘七年后宇文玥被薅头发捞上岸郑州一火锅店爆改成麻辣烫店西双版纳热带植物园回应蜉蝣大爆发沉迷短剧的人就像掉进了杀猪盘当地回应沈阳致3死车祸车主疑毒驾开除党籍5年后 原水城县长再被查凯特王妃现身！外出购物视频曝光初中生遭15人围殴自卫刺伤3人判无罪事业单位女子向同事水杯投不明物质男子被流浪猫绊倒 投喂者赔24万外国人感慨凌晨的中国很安全路边卖淀粉肠阿姨主动出示声明书胖东来员工每周单休无小长假王树国卸任西安交大校长 师生送别小米汽车超级工厂正式揭幕黑马情侣提车了妈妈回应孩子在校撞护栏坠楼校方回应护栏损坏小学生课间坠楼房客欠租失踪 房东直发愁专家建议不必谈骨泥色变老人退休金被冒领16年 金额超20万西藏招商引资投资者子女可当地高考特朗普无法缴纳4.54亿美元罚金浙江一高校内汽车冲撞行人 多人受伤

代做工资流水公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化