Ajax成功功能在jquery mobile中不起作用
Posted
技术标签:
【中文标题】Ajax成功功能在jquery mobile中不起作用【英文标题】：Ajax success function not working in jquery mobile 【发布时间】：2016-03-24 18:49:49 【问题描述】：我正在尝试使用用户名和密码字段验证基本登录表单。我需要从check.php ajax 页面验证用户名和密码。 ajax请求和响应没有问题。我从 ajax 页面得到了正确的响应。但是Ajax成功函数不能正常工作。
ajaxrequest.html
$(document).on('pagebeforeshow', '#login', function()
$(document).on('click', '#submit', function()
if($('#username').val().length > 0 && $('#password').val().length > 0)
$.ajax(
url : 'serverurl/check.php',
data: action : 'login', formData : $('#check-user').serialize(),
type: 'post',
beforeSend: function()
$.mobile.loading(true);
alert("beforesend");
,
complete: function()
$.mobile.loading(false);
alert("complete");
,
success: function (result)
console.log("Ajax response");
res = JSON.stringify(result);
if(res.status == "success")
resultObject.formSubmitionResult = res.uname;
localStorage["login_details"] = window.JSON.stringify(result);
$.mobile.changePage("#second");
else
$.mobile.changePage("#login");
alert("incorrect login");
,
error: function (request,error)
alert('Network error has occurred please try again!');
);
else
alert('Fill all fields');
return false;
);
);
在这里我添加了我的 ajax 页面。此页面仅验证发布的用户名和密码。最后它返回json 对象。我做错了什么？
serverurl/check.php
header("Access-Control-Allow-Origin: *");
header('Content-Type: application/json');
if(isset($_POST['formData']) && isset($_POST['action']) && $_POST['action'] == 'login')
parse_str($_POST['formData'],$searchArray);
$uname = "arun";
$pwd = "welcome";
$resultArray = array();
if($uname == $searchArray['username'] && $pwd == $searchArray['password'])
$resultArray['uname'] = $searchArray['username'];
$resultArray['pwd'] = $searchArray['password'];
$resultArray['status'] = 'success';
else
$resultArray['status'] = 'failed';
echo json_encode($resultArray);
【问题讨论】：
发布响应 json、任何错误或异常。 我没有收到任何错误。相反，我没有在成功功能中得到响应。直接进入错误函数。 【参考方案1】：你的代码应该是
success: function (result)
console.log("Ajax response");
//don't do this
//res = JSON.stringify(result);
if(result.status == "success")
resultObject.formSubmitionResult = result.uname;
localStorage["login_details"] = window.JSON.stringify(result);
$.mobile.changePage("#second");
else
$.mobile.changePage("#login");
alert("incorrect login");
在JSON.stringify 之后，您像stringJson.status 一样访问，这将不起作用。它桅杆已“解析”“json 对象”而不是字符串化。
【讨论】：
感谢您的回复。我想要做，jQuery.parseJSON(result) 还是只是删除那个 stringify？ 只需删除 stringify 。 我已经按照你说的做了。转换为apk后，我将我的apk安装到了我的手机上。同样的问题也存在。当我输入错误的用户名和密码时，它会进入错误功能并抛出错误消息（发生网络错误，请重试！）。响应没有进入成功函数 在浏览器中得到正确的结果。当我将我的代码转换为 apk 并安装到移动设备中时。它不工作。 它在success 里面吗？可以在手机上追踪吗？【参考方案2】：
不需要将您的 JSON 转换为字符串。
$(document).on('pagebeforeshow', '#login', function()
$(document).on('click', '#submit', function()
if($('#username').val().length > 0 && $('#password').val().length > 0)
$.ajax(
url : 'serverurl/check.php',
data: action : 'login', formData : $('#check-user').serialize(),
type: 'post',
beforeSend: function()
$.mobile.loading(true);
alert("beforesend");
,
complete: function()
$.mobile.loading(false);
alert("complete");
,
success: function (result)
console.log("Ajax response");
//Don't need to converting JSON to String
//res = JSON.stringify(result);
//directly use result
if(result.status == "success")
resultObject.formSubmitionResult = result.uname;
localStorage["login_details"] = window.JSON.stringify(result);
$.mobile.changePage("#second");
else
$.mobile.changePage("#login");
alert("incorrect login");
,
error: function (request,error)
alert('Network error has occurred please try again!');
);
else
alert('Fill all fields');
return false;
);
);
【讨论】：
在浏览器中得到正确的结果。当我将我的代码转换为 apk 并安装到移动设备中时。它不工作。 如果您必须同时使用这两个结果，则此结果在 android 中不起作用，那么您需要使用 API 这为两者提供结果。 我需要澄清一件事。您需要使用 API。这是什么意思。你能告诉我一些更详细的吗？ 没有。现在您正在谈论成功功能。我的问题是代码不会进入成功函数本身。直接进入错误函数。【参考方案3】：您的 AJAX 调用很完美，但数据类型未在 ajax 中声明
尝试使用 JSON 或 JSONP。你会成功的。
$.ajax(
url : 'serverurl/check.php',
type: 'post',
dataType: "json", OR "jsonp",
async: false,
data: action : 'login', formData : $('#check-user').serialize(),
beforeSend: function()
$.mobile.loading(true);
alert("beforesend");
,
complete: function()
$.mobile.loading(false);
alert("complete");
,
success: function (result)
console.log("Ajax response");
alert(JSON.stringify(result)); // Check response in alert then parse according to that
res = JSON.stringify(result);
if(res.status == "success")
resultObject.formSubmitionResult = res.uname;
localStorage["login_details"] = window.JSON.stringify(result);
$.mobile.changePage("#second");
else
$.mobile.changePage("#login");
alert("incorrect login");
,
error: function (request,error)
alert('Network error has occurred please try again!');
);
【讨论】：
在浏览器中得到正确的结果。当我将我的代码转换为 apk 并安装到移动设备中时。它不工作。 将 async: false & jsonp 用于移动目的 我也尝试过异步和 jsonp。同样的问题也存在。成功功能不起作用 警报框在 apk/mobile 中不起作用更好的方式将您的成功结果绑定到任何 要绑定结果，我的响应应该进入成功函数。我的问题是成功功能不起作用。直接进入错误函数。【参考方案4】：在某些情况下，您的服务器可能无法正确返回响应。您是否尝试过像这样处理实际的响应代码（例如，如果您的服务器返回 200）：
$.ajax(
url : 'serverurl/check.php',
data: action : 'login', formData : $('#check-user').serialize(),
type: 'post',
....
statusCode:
200: function (response)
// do your stuff here
);
【讨论】：
我试过statusCode，在statusCode里面我使用了alert(statusCode)，它返回空的[object Object]。我想我们就在附近。那是什么？ 尝试：alert(response); 或 alert(response.responseText);，具体取决于您的回复内容...
alert(response) 给出 [object Object]，alert(response.responseText) 给出未定义。
如果我是你，我会调试函数来查看你的响应对象是什么。你可以这样做：... 200: function(response)debugger; 在浏览器中打开你的页面并打开检查器，你的代码应该在这里中断。如果确实如此（它应该这样做），只需在控制台中输入response。通过这种方式，您可以检查响应对象为您提供的属性...
感谢您的回复。我收到成功响应 --- response = Object uname: "arun", pwd: "welcome", status: "success"，失败响应 --- response = Object status: "failed"。所以我得到了服务器的正确响应。但在移动 apk 中，成功函数内部什么也没有发生以上是关于Ajax成功功能在jquery mobile中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
完整功能中的ajax调用后刷新jquery mobile listview不起作用
为啥我的 simpledialog2 在我的 jQuery Mobile 代码段中不起作用？