萬盛學電腦網

 萬盛學電腦網 >> 網絡編程 >> 編程語言綜合 >> 使用$.get()根據選項的不同從數據庫異步請求數據

使用$.get()根據選項的不同從數據庫異步請求數據

 本例實現的是這樣的一個效果:當從select下拉框選擇編程語言時時,根據選項的不同,異步請求不同的函數API描述,需要的朋友可以參考下

Ajax極大地改善了用戶體驗,對於web2.0來說必不可少,是前端開發人員必不可少的技能。    這個例子是這樣的,當從select下拉框選擇編程語言時時,根據選項的不同,異步請求不同的函數API描述。這種功能在現在web應用程序中是及其常見的。    我們先來看一下$.get()的結構   代碼如下: $.get(url, [, data], [, callback] [, type])  //url:請求的HTML頁的URL地址;  //data(可選),發送至服務器的key/value數據作為QueryString附加到請求URL中;  //callback(可選):載入成功時的回調函數(只有當Response的返回狀態是success才調用該方法;  //type(可選):服務器端返回內容格式,包括xml,html,script,json,text和_default    首先創建examplDB數據庫,建立language和functions表,SQL如下   代碼如下: CREATE TABLE IF NOT EXISTS language (  id int(3) NOT NULL AUTO_INCREMENT,  languageName varchar(50) NOT NULL,  PRIMARY KEY (id));    CREATE TABLE IF NOT EXISTS functions (  id int(3) NOT NULL AUTO_INCREMENT,  languageId int(11) NOT NULL,  functionName varchar(64) NOT NULL,  summary varchar(128) NOT NULL, //功能概述  example text NOT NULL, //舉例  PRIMARY KEY (id));    下面是插入數據的SQL   代碼如下: INSERT INTO language (id, languageName) VALUES  (1, 'PHP'),  (2, 'jQuery');    INSERT INTO functions (id, languageId, functionName, summary, example) VALUES  (1, 1, 'simplexml_load_file', 'Interprets an XML file into an object ', '$xml = simplexml_load_file(''test.xml'');rnprint_r($xml);rn'),  (2, 1, 'array_push', 'Push one or more elements onto the end of array', '$arrPets = array(''Dog'', ''Cat'', ''Fish'' );rnarray_push($arrPets, ''Bird'', ''Rat'');rn'),  (3, 1, 'ucfirst', 'Make a string''s first character uppercase', '$message = ''have a nice day;rn$message = ucfirst($message); // output: Have A Nice Dayrn'),  (4, 1, 'mail', 'used to send email', '$message = "Example message for mail";rnif(mail(''[email protected]'', ''Test Subject'', $message))rn{rn echo ''Mail sent'';rn}rnelsern{rn echo ''Sending of mail failed'';rn}rn'),  (5, 2, '$.get', 'Load data from the server using a HTTP GET request.', '$.ajax({rn url: url,rn data: data,rn success: success,rn dataType: dataTypern});rn'),  (6, 2, 'hover', 'hover method accepts 2 functions as parameters which execute alternativelt when mouse enters and leaves an element.', '$(selector).hover(rnfunction()rn{rn//executes on mouseenterrn},rnfunction()rn{rn//executes on mouseleavern});'),  (7, 2, 'bind', 'Attach a handler to an event for the elements.', '$(element).bind(''click'', function() rn{rn alert(''click happened'');rn});rn'),  (8, 2, 'jQuery.data', 'Store arbitrary data associated with the specified element.', 'jQuery.data(element, key, value);'),  (9, 1, 'add class', 'Adds a class', '(''p'').addClass(''myClass yourClass'');');    都是比較簡單的SQL操作,一切准備就緒後就可以編碼了。總共有兩個腳本文件,一個index.php,一個results.php用於處理請求,先編寫index.php   代碼如下: <!DOCTYPE html>  <html>  <head>  <title></title>  <style type="text/css">  body {font-family:"Trebuchet MS", Verdana, Arial; width:600px;}  div {background-color:#f5f5dc;}  </style>  <script type="text/javascript" src="jquery.js"></script>  </head>  <body>  <?php  $mysqli = new mysqli('localhost', 'root', 'passwd', 'exampledb');//將passwd改為你的數據庫密碼  if (mysqli_connect_errno())  {  die('Unable to connect');  }  else  {  $query = 'SELECT * FROM language'; //這裡開始是核心代碼,都是很簡單的語句,主要是在language中取得記錄,然後循環輸出到select選項  if ($result = $mysqli->query($query))  {  if ($result->num_rows > 0)  {  ?>  <p>  Select a languae  <select id="selectLanguage">  <option value="">select</option>  <?php  while($row = $result->fetch_assoc()) //以編程語言的id作為option的value,以語言作為選項。  {  ?>  <option value="<?php echo $row['id'];?>"><?php echo $row['languageName']; ?></option>  <?php  }  ?>  </select>  </p>  <p id="result"></p>  <?php  }  else  {  echo 'No records found';  }  $result->close();  }  else  {  echo 'Error in query: $query.'.$mysqli->error;  }  }  $mysqli->close();  ?>    <script type="text/javascript">  $(function() {  $('#selectLanguage').change(function() {  if($(this).val() == '') return;  $.get(  'results.php',  {id: $(this).val()},  function(data) {  $('#result').html(data);  }  );  });  });  </script>  </body>  </html>    引入jquery,給#selectLanguage添加change事件處理程序,並放在index.php中body結束前   代碼如下: <script src="scripts/jquery.js"></script>  <script type="text/javascript">  $(function() {  $('#selectLanguage').change(function() {  if($(this).val() == '') return;  $.get(  'results.php',  {id: $(this).val()},  function(data) {  $('#result').html(data);  }  );  });  });  </script>    下面就是results.php了。它先連接到數據庫,然後取得index.php發送到id,根據id在數據庫裡選擇相應的編程語言記錄,並將每條記錄放到ul列表中   代碼如下: <?php  $mysqli = new mysqli('localhost', 'root', 'passwd', 'exampledb'); //這裡也要用你的數據庫密碼改寫passwd  $resultStr = '';  $query = 'SELECT functionName, summary, example FROM functions where languageId ='.$_GET['id']; //$_GET['id']就是index.php中用$.get()發送的id  if ($result = $mysqli->query($query))  {  if ($result->num_rows > 0)  {  $resultStr .= '<ul>';  while($row = $result->fetch_assoc()) //和index.php的語句差不多,也是先從數據庫取得記錄,然後格式化輸出  {  $resultStr .= '<li><strong>'.$row['functionName'].'</strong>-'.$row['summary'];  $resultStr .= '<div><pre>'.$row['example'].'</pre></div>'.'</li>';  }  $resultStr .= '</ul>';  }  else  {  $resultStr = 'Nothing found';  }  }  echo $resultStr;  ?>   
copyright © 萬盛學電腦網 all rights reserved