如何使用 jQuery mobile/Ajax 验证和显示 json 数据？答案

【问题标题】：How to authenticate and display the json data using jQuery mobile/Ajax?如何使用 jQuery mobile/Ajax 验证和显示 json 数据？
【发布时间】：2015-04-12 16:43:33
【问题描述】：

我为我的 Ruby on Rails 应用程序创建了一个简单的 API。这是我使用 curl 时得到的。我想这就是它的完成方式。

成功返回所有用户的Json数据。

$ curl --basic -u test@gmail.com:test http://rails-tutorial-abc.c9.io/api/users.json

[{"id":1,"name":"sumar","email":"test@gmail.com","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":"testlmah@gmail.com","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 test@gmail.com:test http://rails-tutorial-abc.c9.io/api/users/2.json

{"id":2,"name":"testtest","email":"test@gmail.com","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 test@gmail.com: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 test@gmail.com: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 mobile 来创建我的移动应用程序，然后我将使用 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>

谁能分享一下如何验证和检索 json 数据？
在这种情况下，如何打印电子邮件和姓名？

我是否应该在每次查询某些数据时传递电子邮件和密码？
我应该得到它一次并储存它吗？
有人可以分享一些包含此信息的资源吗？
请帮忙。谢谢。

【问题讨论】：

标签： jquery ruby-on-rails ajax json jquery-mobile

【解决方案1】：

这是一个相当大的话题，只需一个答案即可涵盖，我会尽力为您指出正确的方向。

首先，我建议更新到最新的 jQM 版本，1.4.5。

谁能分享一下如何验证和检索 json 数据？

显示登录弹出窗口（参见“登录”示例here）
使用$(document).on("click", "#your_button_id", function() { /* auth code goes here */}); 将事件处理程序附加到您的登录按钮
do your basic authentication with Ajax inside your event handler
再次重申，使用 Ajax 以同样的方式检索您的数据（提供许多示例）

在这种情况下，如何打印电子邮件和姓名？

您的 JSON 数据将在您的 $.ajax 调用的 success 处理程序中可用。将<span id="name"></span> 和<span id="email"></span> 添加到您的内容中，并用$("#name").html(data.name); 之类的内容填充它们

我每次查询某些数据时都应该传递电子邮件和密码吗？我应该得到它一次并储存它吗？

这取决于您的 API，它可以支持由成功登录发起的“会话”（但这是另一个话题）。

希望这有助于您入门。

【讨论】：