javascript - How do I setup simple firebase ajax request?

I know I can use set to hit Firebase, but I want to use AJAX instead so I tried the below code. When I load test.html in my browser, the console says -

XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 405.

//text.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Firebase Test</title>
    <script src='.2.1/firebase.js'></script>
  </head>
  <body>
    <div id="hi"></div>
    <script   src=".12.2.min.js"   integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk="   crossorigin="anonymous"></script>
    <script>
      $(document).ready(function () {
        var param = {lastName: "Doe", firstName: "John"};
        $.ajax({
          url: '',
          type: "POST",
          data: param,
          success: function () {
            alert("success");
          }
        });
      });
    </script>
  </body>
</html>

//firebase rules

{
    "rules": {
        ".read": true,
        ".write": true
    }
}

I know I can use set to hit Firebase, but I want to use AJAX instead so I tried the below code. When I load test.html in my browser, the console says -

XMLHttpRequest cannot load https://jleiphonebook.firebaseio./json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 405.

//text.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Firebase Test</title>
    <script src='https://cdn.firebase./js/client/2.2.1/firebase.js'></script>
  </head>
  <body>
    <div id="hi"></div>
    <script   src="https://code.jquery./jquery-1.12.2.min.js"   integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk="   crossorigin="anonymous"></script>
    <script>
      $(document).ready(function () {
        var param = {lastName: "Doe", firstName: "John"};
        $.ajax({
          url: 'https://jleiphonebook.firebaseio./json',
          type: "POST",
          data: param,
          success: function () {
            alert("success");
          }
        });
      });
    </script>
  </body>
</html>

//firebase rules

{
    "rules": {
        ".read": true,
        ".write": true
    }
}

Share Improve this question asked Mar 22, 2016 at 21:12 akantoword 3,0749 gold badges28 silver badges49 bronze badges

You're missing a . before json, so https://jleiphonebook.firebaseio./.json. – Frank van Puffelen Commented Mar 22, 2016 at 21:14
Given that you're loading loading JSON data, you'll probably want to use $.getJSON(): – Frank van Puffelen Commented Mar 22, 2016 at 21:16
@FrankvanPuffelen I added the . and it got a bad request feedback. I'm making a POST request, can you explain why I should use getJSON? that didn't work either – akantoword Commented Mar 22, 2016 at 21:23
Ah, I missed that you're trying to add data. In that case indeed, you can't use getJSON(). You'll still need the . in there though. See firebase./docs/rest/guide/saving-data.html#section-post for an example of how to POST with curl, you'll need to do the equivalent in jQuery. – Frank van Puffelen Commented Mar 22, 2016 at 21:31

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

Firebase expects the body to be a JSON string, so you'll need to stringify it:

$(document).ready(function () {
   var param = {lastName: "Doe", firstName: "John"};

   $.ajax({
     url: 'https://jleiphonebook.firebaseio./.json',
     type: "POST",
     data: JSON.stringify(param),
     success: function () {
       alert("success");
     },
     error: function(error) {
       alert("error: "+error);
     }
   });
 });

This will acplish the same by the way:

$.post('https://jleiphonebook.firebaseio./.json',
  JSON.stringify(param),
  function () {
    alert("success");
  }
);

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How do I setup simple firebase ajax request? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)