Como alcançar o mesmo comportamento no Ajax

$usrname = $this->session->userdata('username'); $password = $this->session->userdata('password'); $data = array('userName'=>urlencode($usrname),'password'=>urlencode($password)); $data_string = json_encode($data); $datanew = "loginemployee=". $data_string; $method = 'post'; $format = 'application/json'; $this->rest->format($format); $login_url = $this->login_url; //print_r($login_url); //exit; $result = $this->rest->{$method}($login_url, $datanew); 

Alguém pode me ajudar com isso. Este é realmente um script PHP para fazer login em um site, eu preciso alcançar o mesmo no meu aplicativo Cordova que usa apenas HTML e JQuery, então forneça informações sobre como fazer isso.

 $(document).ready(function(){ $('form#loginForm').submit(function() { // loginForm is submitted var username = $('#username').attr('value'); // get username var password = $('#password').attr('value'); // get password alert(username); var UserData= {"userName":username , "password":password}; var jsonString=JSON.stringify(UserData); var datanew = "loginemployee=". $jsonString; if(jsonString) { alert("encoded"+jsonString); } if (username && password) { // values are not empty $.ajax({ type: "POST", url: "http:// i know URL", // URL contentType: "application/json; charset=utf-8", dataType: "json", // send username and password as parameters data: datanew, // script call was *not* successful error: function (XMLHttpRequest, textStatus, errorThrown) { $('div#loginResult').text("responseText: " + XMLHttpRequest.responseText + ", textStatus: " + textStatus + ", `enter code here`errorThrown: " + errorThrown); $('div#loginResult').addClass("error"); }, // error // script call was successful // data contains the JSON values returned by the Perl script success: function (data) { alert("success"); if (data.error) { // script returned error $('div#loginResult').text("data.error: " + data.error); $('div#loginResult').addClass("error"); } // if else { // login was successful alert(data); console.log(data); $('form#loginForm').hide(); $("#loginResult").append('all good'); } //else } // success }); // ajax/ if } // if else { $('div#loginResult').text("enter username and password"); $('div#loginResult').addClass("error"); } // else $('div#loginResult').fadeIn(); return false; }); }); 

Você cometeu alguns erros no código e eu listei essas coisas abaixo.

  1. Não use $('#username').attr('value') . Em vez de usar $('#username').val() . Como $('#username').attr('value') retorna o valor do elemento enquanto o html criado. Mas $('#username').val() retornará o valor atual. Mesmo com a mudança $('#password').attr('value') para $('#password').val() . Para mais informações, verifique esta publicação .
  2. O operador de concatenação no javascript é + não . . E também adicionou uma variável como $jsonString .
  3. No seu código de php do servidor, se o uso de $_POST['loginemployee'] para recuperar os valores de post significa que não use o contentType: "application/json; charset=utf-8", ,. Porque usará todo o conteúdo, incluindo a chave como json inválido, como loginemployee={"userName":"cloud","password":"cloudnine"} . Se você precisar, significa que você precisa usar file_get_contents('php://input') para recuperar o conteúdo do post. Mas melhor, não use o contentType no ajax. Então você pode facilmente obter o conteúdo do post usando $_POST['loginemployee'] .
  4. E também se a resposta é json significa usar dataType no ajax, senão não use isso. Para obter mais informações sobre contentType e dataType verifique esta publicação .

Então, eu atualizei o código. Verifique e responda se há algum problema. Espero que funcione como seu desejo.

 $(document).ready(function(){ $('form#loginForm').submit(function() { // loginForm is submitted var username = $('#username').val(); // get username var password = $('#password').val(); // get password alert(username); var UserData= {"userName":username , "password":password}; var jsonString=JSON.stringify(UserData); var datanew = "loginemployee="+ jsonString; if(jsonString) { alert("encoded"+jsonString); } if (username && password) { // values are not empty console.log(datanew); $.ajax({ type: "POST", url: "http://url_to_post", // URL // contentType: "application/json; charset=utf-8", // If reply is json means uncomment the below line. // dataType: "json", // send username and password as parameters crossDomain : true, data: datanew, // script call was *not* successful error: function (XMLHttpRequest, textStatus, errorThrown) { $('div#loginResult').text("responseText: " + XMLHttpRequest.responseText + ", textStatus: " + textStatus + ", `enter code here`errorThrown: " + errorThrown); $('div#loginResult').addClass("error"); }, // error // script call was successful // data contains the JSON values returned by the Perl script success: function (data) { alert("success"); if (data.error) { // script returned error $('div#loginResult').text("data.error: " + data.error); $('div#loginResult').addClass("error"); } // if else { // login was successful console.log(data); $('form#loginForm').hide(); $("#loginResult").append('all good'); } //else } // success }); // ajax/ if } // if else { $('div#loginResult').text("enter username and password"); $('div#loginResult').addClass("error"); } // else $('div#loginResult').fadeIn(); return false; }); });