如何实现在阿贾克斯同样的行为 [英] How to achieve the same behaviour in Ajax
本文介绍了如何实现在阿贾克斯同样的行为的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
$ usrname = $这个 - ＆GT;会话级＆GT;用户数据（用户名）;
$密码= $这个 - ＆GT;会话级＆GT;用户数据（'密码'）;
$数据=阵列（用户名=＆GT; urlen code（$ usrname），'密码'=＆GT; urlen code（$密码））;
$ data_string = json_en code（$的数据）;
$ datanew =loginemployee =。 $ data_string;
$方法='后';
$格式=应用/ JSON;
$这个 - ＆GT; REST-＆GT;格式（$格式）;
$ LOGIN_URL = $这个 - ＆GT; LOGIN_URL;
//的print_r（$ LOGIN_URL）;
//出口;
$结果= $这个 - ＆GT; REST-＆GT; {$方法}（$ LOGIN_URL，$ datanew）;
任何人都可以请帮助我与此有关。这实际上是一个PHP脚本登录到一个网站，我需要达到同样的在我的科尔多瓦应用程序，它仅使用HTML和jQuery，所以请给我提供关于如何做到这一点的信息。
$（文件）。就绪（函数（）{
$（'＃形式登录表单）。递交（函数（）{//登录表单提交
变种的用户名= $（'＃用户名）ATTR（'值'）。 //获取用户名
VAR密码= $（'＃密码）ATTR（'值'）。 //获取密码
警报（用户名）;
VAR的UserData = {username的：用户名，密码：密码};
VAR jsonString = JSON.stringify（的UserData）;
变种datanew =loginemployee =。 $ jsonString;
如果（jsonString）
{
警报（EN codeD+ jsonString）;
}
如果（用户名和放大器;＆放大器;密码）{//值不为空
$阿贾克斯（{
键入：POST，
网址：HTTP：//我知道URL，//网址
的contentType：应用/ JSON的;字符集= UTF-8，
数据类型：JSON，
//发送用户名和密码参数
数据：datanew，//脚本调用是*不*成功
错误：函数（XMLHtt prequest，textStatus，errorThrown）{
$（'＃DIV loginResult）文本（responseText的：+ XMLHtt prequest.responseText +，textStatus：+ textStatus +，'输入code here`errorThrown：+ errorThrown）;
$（'＃DIV loginResult）addClass（错误）。
}， // 错误
//脚本调用成功
//数据包含由Perl脚本返回的JSON值
成功：功能（数据）{
警报（成功）;
如果（data.error）{//脚本返回错误
$（'＃DIV loginResult）文本（data.error：+ data.error）。
$（'＃DIV loginResult）addClass（错误）。
} // 如果
其他{//登录成功
警报（数据）;
的console.log（数据）;
$（'＃形式登录表单）隐藏（）;
$（＃loginResult）追加（都好）。
} //其他
} // 成功
}）; //阿贾克斯/如果
} // 如果
其他 {
$（'＃DIV loginResult）文本（输入用户名和密码）;
$（'＃DIV loginResult）addClass（错误）。
} // 其他
$（'＃DIV loginResult）淡入（）。
返回false;
}）;
}）;
解决方案
您已经做在code一些错误，我下面列出的那些事儿。
- 请不要使用
$（'＃用户名）。ATTR（'值'）。相反，使用$（'＃用户名）。VAL（）。因为$（'＃用户名）。ATTR（'值'），而HTML创建返回元素的值。但$（'＃用户名）。VAL（）将返回当前值。相同的变化$（'＃密码）。ATTR（'值'）到$（'＃密码）。VAL（）。欲了解更多信息，请查阅此帖子。 - 级联运营商在JavaScript是
+不是。。而且还û添加像$ jsonString的变量。 - 在您的服务器的PHP code，如果你使用
$ _ POST ['loginemployee']检索后价值就意味着不使用的contentType：应用/ JSON的;字符集= UTF-8，。因为它将使用的全部内容，包括密钥无效JSON像loginemployee = {username的：云，密码：龙之梦}。如果你需要像这意味着ü需要使用的file_get_contents（PHP：//输入'）检索文章内容。但最好不要在AJAX使用的contentType。所以，你可以用能够轻松地获得了帖子内容$ _ POST ['loginemployee']。 - 并且如果答复是
JSON意味着AJAX使用的dataType，否则不要使用它。有关的contentType和的dataType检查本的帖子。
所以，我更新了code。检查并回复回来，如果有任何问题。希望这将作为你的愿望。
$（文件）。就绪（函数（）{
$（'＃形式登录表单）。递交（函数（）{//登录表单提交
。VAR用户名= $（'＃用户名）VAL（）; //获取用户名
VAR密码= $（'＃密码）VAL（）。 //获取密码
警报（用户名）;
VAR的UserData = {username的：用户名，密码：密码};
VAR jsonString = JSON.stringify（的UserData）;
变种datanew =loginemployee =+ jsonString;
如果（jsonString）
{
警报（EN codeD+ jsonString）;
}
如果（用户名和放大器;＆放大器;密码）{//值不为空
执行console.log（datanew）;
$阿贾克斯（{
键入：POST，
网址：HTTP：// url_to_post，//网址
//的contentType：应用/ JSON的;字符集= UTF-8，
//如果回答是JSON意味着取消对以下行。
//数据类型：JSON，
//发送用户名和密码参数
跨域：真正的，
数据：datanew，//脚本调用是*不*成功
错误：函数（XMLHtt prequest，textStatus，errorThrown）{
$（'＃DIV loginResult）文本（responseText的：+ XMLHtt prequest.responseText +，textStatus：+ textStatus +，'输入code here`errorThrown：+ errorThrown）;
$（'＃DIV loginResult）addClass（错误）。
}， // 错误
//脚本调用成功
//数据包含由Perl脚本返回的JSON值
成功：功能（数据）{
警报（成功）;
如果（data.error）{//脚本返回错误
$（'＃DIV loginResult）文本（data.error：+ data.error）。
$（'＃DIV loginResult）addClass（错误）。
} // 如果
其他{//登录成功
的console.log（数据）;
$（'＃形式登录表单）隐藏（）;
$（＃loginResult）追加（都好）。
} //其他
} // 成功
}）; //阿贾克斯/如果
} // 如果
其他 {
$（'＃DIV loginResult）文本（输入用户名和密码）;
$（'＃DIV loginResult）addClass（错误）。
} // 其他
$（'＃DIV loginResult）淡入（）。
返回false;
}）;
}）;
$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);
Can anybody please assist me with this. This is actually a PHP script to login into a website, I need to achieve the same on my Cordova app which uses only HTML and JQuery, so please provide me info on how to do this.
$(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;
});
});
解决方案
You have done some mistakes in code and I listed those thing below.
- Don't use
$('#username').attr('value'). Instead of use$('#username').val(). Because$('#username').attr('value')return the value of the element while the html created. But$('#username').val()will return the current value. Same as change$('#password').attr('value')to$('#password').val(). For more information check this post. - Concatenation operator in javascript is
+not.. And also u added a variable like$jsonString. - In your Server php code, if your using
$_POST['loginemployee']to retrieve thepostvalues means don't usecontentType: "application/json; charset=utf-8",. Because it will use the entire content including key as invalid json likeloginemployee={"userName":"cloud","password":"cloudnine"}. If you need like that means u need to usefile_get_contents('php://input')to retrieve the post content. But better don't usecontentTypein ajax. So you can able to easily get the post content using$_POST['loginemployee']. - And also if the reply is
jsonmeans usedataTypein ajax, else dont use that. For more information aboutcontentTypeanddataTypecheck this post.
So, I updated the code. Check and reply back if there is any issues. Hope it will work as your wish.
$(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;
});
});
这篇关于如何实现在阿贾克斯同样的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
