CODEWITHSUNDEEP
javascriptjqueryajaxangularjsionic-framework
Im Batman
Im Batman

Reputation: 1876

Javascript Ajax will work with AngularJS?

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

Upvotes: 1

Views: 163

Answers (1)

nanndoj
nanndoj

Reputation: 6770

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.
});

Upvotes: 2

Related Questions