如何在Ajax中实现相同的行为

时间:2015-04-17 08:39:41

标签: javascript php ajax json

$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);

任何人都可以帮我解决这个问题。这实际上是一个登录网站的PHP脚本,我需要在仅使用HTML和JQuery的Cordova应用程序上实现相同的功能,所以请提供有关如何执行此操作的信息。

$(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;
});
});

1 个答案:

答案 0 :(得分:2)

你在代码中犯了一些错误,我在下面列出了这些错误。

  1. 请勿使用$('#username').attr('value')。而不是使用$('#username').val()。因为$('#username').attr('value')在创建html时返回元素的值。但$('#username').val()将返回当前值。与更改$('#password').attr('value')$('#password').val()相同。有关详细信息,请查看此post
  2. javascript中的连接运算符为+而非.。你还添加了一个像$jsonString
  3. 这样的变量
  4. 在您的服务器php代码中,如果您使用$_POST['loginemployee']来检索post值,则表示不使用contentType: "application/json; charset=utf-8",。因为它会使用包括密钥在内的整个内容作为无效的json,例如loginemployee={"userName":"cloud","password":"cloudnine"}。如果您需要,则表示您需要使用file_get_contents('php://input')来检索帖子内容。但最好不要在ajax中使用contentType。因此,您可以使用$_POST['loginemployee']轻松获取帖子内容。
  5. 如果回复是json,则表示在ajax中使用dataType,否则请不要使用它。有关contentTypedataType的详细信息,请查看此post
  6. 所以,我更新了代码。如果有任何问题,请检查并回复。希望它能按你的意愿工作。

    $(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;
        });
    });