Javascript Ajax will work with AngularJS?

Question

Here i have small login created using Ajax XML. its work fine.

function ajax_post(){
      // Create our XMLHttpRequest object
      var hr = new XMLHttpRequest();
      // Create some variables we need to send to our PHP file
      var url = "http://boost.meximas.com/mobile/login.php";
      var fn = document.getElementById("username").value;
      var ln = document.getElementById("password").value;
      var vars = "username="+fn+"&password="+ln;
      hr.open("POST", url, true);
      // Set content type header information for sending url encoded variables in the request
      hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      // Access the onreadystatechange event for the XMLHttpRequest object
      hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
          var return_data = hr.responseText;
        //document.getElementById("status").innerHTML = return_data;
        if(return_data=="1"){

          location.href = "home.html?username=" + fn;
        }else{
          //alert("Login Failed...");
          $.mobile.loading( "hide" );
          ons.notification.alert({message: 'Login Failed!'});

        }

        }
      }
      // Send the data to PHP now... and wait for response to update the status div
      hr.send(vars); // Actually execute the request

I want to integrate this same process with Angulajs. will this work with AngularJS or do i need to remodify this to AngularJS process. i can find reference that do just URL Ajax request using angularjs. but couldnt find with parameters that i want to send. username and Password

found this in AngularJS site

// Simple GET request example :
$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

Sorry for english

nanndoj · Accepted Answer · 2015-02-13 21:31:17Z

2

You are in the right way. You can pass parameter to Angular $http like in the function below:

$http({
    url: "http://boost.meximas.com/mobile/login.php", 
    method: "POST",
    data: { username: "", password: "" },
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(data, status, headers, config) {
   // this callback will be called asynchronously
   // when the response is available
}).
error(function(data, status, headers, config) {
   // called asynchronously if an error occurs
   // or server returns response with an error status.
});

edited Feb 13, 2015 at 21:31

answered Feb 13, 2015 at 18:48

nanndoj

6,7907 gold badges33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jasen Over a year ago

I think you want to use data: { username: "", password: "" } instead of params or your password will appear in the URL (and logs!).

Im Batman Over a year ago

ah thanks, so will this work with just triggering function using onClick or onsubmit?

nanndoj Over a year ago

It's supposed to do so!

Musa Over a year ago

@CadeLewis note that by degault $http sends application:json not application/x-www-form-urlencoded, which you were doing with raw XHR.

Im Batman Over a year ago

@Musa how can i change it to Content-Type':'application/x-www-form-urlencoded ? with out this it wont work right?

Collectives™ on Stack Overflow

Javascript Ajax will work with AngularJS?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related