2015-04-12 130 views
1

我爲我的Ruby on Rails應用程序創建了一個簡單的API。這是我使用捲曲時得到的結果。我認爲這是如何完成的。如何使用jQuery mobile/Ajax驗證並顯示json數據?

成功返回所有用戶的Json數據。

$ curl --basic -u [email protected]:test http://rails-tutorial-abc.c9.io/api/users.json 

[{"id":1,"name":"sumar","email":"[email protected]","created_at":"2015-01-23T12:57:41.502Z","updated_at":"2015-03-28T02:53:46.438Z","password_digest":"$2a$10$xNvGKpPwspaeTd33QrTwuuLP0TesuuTmfbrUlFO7LDsWXGkf7XP7m","remember_digest":null,"admin":false,"date_of_birth":"1985-01-01T00:00:00.000Z","is_female":true,"activation_digest":"$2a$10$nIwWkX2X8WugscC/Yre7KeWRIzw6ecNyA5hLn/xPw9C0FyzyO6BJq","activated":true,"activated_at":"2015-01-23T12:58:58.337Z","reset_digest":null,"reset_sent_at":null,"avatar_file_name":null,"avatar_content_type":null,"avatar_file_size":null,"avatar_updated_at":null,"country_id":1,"cover_file_name":null,"cover_content_type":null,"cover_file_size":null,"cover_updated_at":null,"intro":"test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test "},{"id":13,"name":"mahumar","email":"[email protected]","created_at":"2015-03-24T13:57:56.184Z","updated_at":"2015-03-24T13:58:47.267Z","password_digest":"$2a$10$oyIFQ9b.yyLQ8AMagwGNfeBE9.iXhSg/8PyoQ8fO9.ApH3ZvZ7Q/K","remember_digest":null,"admin":false,"date_of_birth":"1985-01-01T00:00:00.000Z","is_female":false,"activation_digest":"$2a$10$xhpJCNVDvyLqcBZC8LhgkOqTeptHEy.UGNCH.4FFGBLPalLotqPQO","activated":true,"activated_at":"2015-03-24T13:58:23.488Z","reset_digest":null,"reset_sent_at":null,"avatar_file_name":null,"avatar_content_type":null,"avatar_file_size":null,"avatar_updated_at":null,"country_id":1,"cover_file_name":null,"cover_content_type":null,"cover_file_size":null,"cover_updated_at":null,"intro":"test"}] 
$ 

成功返回JSON數據,當我檢索特定用戶的數據。

$ curl --basic -u [email protected]:test http://rails-tutorial-abc.c9.io/api/users/2.json 

{"id":2,"name":"testtest","email":"[email protected]","created_at":"2015-01-26T15:27:30.101Z","updated_at":"2015-03-08T19:19:16.254Z","password_digest":"$2a$10$uWIbqRn0BGs2HW1hnbkLFO.5ywXm1YCwOWR2KtRoeCXKzfgaBi3Yu","remember_digest":null,"admin":false,"date_of_birth":"1985-01-01T00:00:00.000Z","is_female":false,"activation_digest":"$2a$10$E6sQkdCtY3Ww//BsjtaSguG8PHOykMU.3cmXEfuzzz1Ng7r7iHpqO","activated":false,"activated_at":null,"reset_digest":"$2a$10$mizJ.AhAbWvK4R.x6PGKKOlfgFGuHEs0BAUrr7T7xlhmaylEtElwq","reset_sent_at":"2015-03-08T19:18:46.707Z","avatar_file_name":null,"avatar_content_type":null,"avatar_file_size":null,"avatar_updated_at":null,"country_id":1,"cover_file_name":null,"cover_content_type":null,"cover_file_size":null,"cover_updated_at":null,"intro":"tt","microposts":[]} 
$ 

當我給出錯誤憑據時,訪問被拒絕。

$ curl --basic -u [email protected]:best http://rails-tutorial-abc.c9.io/api/users/2.json 

HTTP Basic: Access denied. 
$ 

未給出證書時訪問被拒絕。

$ curl http://rails-tutorial-abc.c9.io/api/users/2.json 
HTTP Basic: Access denied. 
$ 

當檢索到不存在的用戶時返回錯誤消息。

$ curl --basic -u [email protected]:test http://rails-tutorial-abc.c9.io/api/users/26.json 

{"message":"Not Found"} 
$ 

所以我認爲API按預期工作。

這是我在我的Rails應用程序中進行身份驗證的方式。

module Api 
    class ApiController < ApplicationController 
    # Prevent CSRF attacks by raising an exception. 
    # For APIs, you may want to use :null_session instead. 

    skip_before_filter :verify_authenticity_token 

    protect_from_forgery with: :null_session 
    before_filter :authenticate 

    def current_user 
     @current_user 
    end  

    def authenticate 
     authenticate_or_request_with_http_basic do |email, password| 
     Rails.logger.info "API authentication:#{email}" 
     user = User.find_by(email: email) 
     if user && user.authenticate(password) 
      @current_user = user 
      Rails.logger.info "Logging in #{user.inspect}" 
      true 
     else 
      Rails.logger.warn "No valid credentials." 
      false 
     end   
     end 
    end   
    end 
end 

我使用jQuery手機來創建我的移動應用程序,然後我將使用PhoneGap。

現在,這是我現在的代碼,只是打印一個小歡迎消息。我知道這並不多。我正在學。

<!doctype html> 
<html> 

<head> 
    <title>Home</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="apple-touch-icon" href="images/icon.png"/> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 


    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> 


</head> 

<body> 

<div data-role="page"> 
    <div data-role="panel" id="left-panel" data-theme="c"> 
     <ul data-theme="d" data-role="listview"> 
      <li data-icon="delete"><a href="#" data-rel="close">Close</a></li> 
      <li data-role="list-divider">Menu</li> 
       <li ><a href="#" class="link" data-rel="close">Home</a></li> 
       <li ><a href="#" class="link" data-rel="close">Search</a></li> 
     </ul> 
    </div><!-- /panel --> 

    <div data-role="header" data-position="fixed" data-theme="c"> 
     <h1>Home</h1> 
     <a href="#left-panel" data-icon="bars" data-role="button" data-iconpos="notext" data-iconshadow="false">Menu</a> 
    </div> 
    <div data-role="content" class="content"> 
     <h1 id="current_temp" class="icon" data-icon="B">Welcome</h1> 

    </div> 
</div> 


</body> 

</html> 

enter image description here

任何人都可以請您分享如何認證和檢索JSON數據?
在這種情況下,我該如何打印電子郵件和姓名?

我每次查詢某些數據時是否應該通過電子郵件和密碼?
我應該購買一次並存儲它嗎?
有人可以分享一些具有此信息的資源嗎?
請幫忙。謝謝。

回答

1

這是一個很重要的話題,只是在一個答案中,我會盡力指出你正確的方向。

首先,我建議更新到最新版本JQM,1.4.5

任何人都可以請分享如何驗證和檢索JSON數據?

  1. 顯示登錄彈出(請參閱「登錄」例如here
  2. 附加一個事件處理程序到您的登錄按鈕,$(document).on("click", "#your_button_id", function() { /* auth code goes here */});
  3. do your basic authentication with Ajax inside your event handler
  4. 再次,使用Ajax來檢索數據(許多例子可用)

在這實例,我如何打印電子郵件和名稱?

您的JSON數據將在$.ajax呼叫的success處理程序中可用。 添加<span id="name"></span><span id="email"></span>您的內容,並填寫他們與像$("#name").html(data.name);

而且,我也要我每次查詢一些數據的時間通過電子郵件和密碼? 我應該購買一次並存儲它嗎?

它取決於你的API,它可以支持通過成功登錄啓動的「會話」(但這是另一個話題)。

希望這有助於你開始。