使用 jQuery 从 PHP 文件返回 JSON 数据
Posted
技术标签:
【中文标题】使用 jQuery 从 PHP 文件返回 JSON 数据【英文标题】:Returning JSON data from PHP file using jQuery 【发布时间】:2012-03-01 09:23:37 【问题描述】:长期阅读,第一次海报。我对 jQuery 和 JSON 的世界非常陌生,并且发现我正在运行的登录脚本存在问题。
最终目标是从表单中捕获数据,将该数据传递到 php 文件以通过 jQuery.ajax() post 进行处理,将数据与 mysql 数据库进行比较以进行身份验证,并返回成功或失败的数据.
我的问题是我无法将 JSON 格式的数据从 PHP 脚本传递回 jQuery。使用 Chrome 的开发人员工具查看处理时,我看到“登录失败”。我已经通过将数组 $rows 扔到我的 error_log 文件中仔细检查了它,它返回了格式正确的 JSON,但我一辈子都无法让它返回到 jQuery 文件。任何帮助表示赞赏。
我的表单输入:
<!-- BEGIN: Login Page -->
<section data-role="page" id="login">
<header data-role="header" data-theme="b">
<a href="#landing" class="ui-btn-left">Back</a>
<h1>Please Log In</h1>
</header>
<div data-role="content" class="content" data-theme="b">
<form id="loginForm" action="services.php" method="post">
<div data-role="fieldcontain">
<label for="schoolID">School ID</label>
<input type="text" name="schoolID" id="schoolID" value="" />
<label for="userName">Username</label>
<input type="text" name="userName" id="userName" value="" />
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" />
<h3 id="notification"></h3>
<button data-theme="b" id="submit" type="submit">Submit</button>
<input type="hidden" name="action" value="loginForm" id="action">
</div>
</form>
</div>
<footer data-role="footer" data-position="fixed" data-theme="b">
<h1>Footer</h1>
</div>
</section>
<!-- END: Login Page -->
我的 jQuery 处理程序:
// Listen for the the submit button is clicked, serialize the data and send it off
$('#submit').click(function()
var data = $("#loginForm :input").serializeArray();
var url = $("#loginForm").attr('action');
$.ajax(
type: 'POST',
url: url,
cache: false,
data: data,
dataType: 'json',
success: function(data)
$.ajax(
type: 'GET',
url: "services.php",
success: function(json)
alert(json);
$('#notification').append(json);
);
);
);
这是我的 PHP 处理:
if (isset($_POST['action']))
$schoolID = $_POST['schoolID'];
$userName = $_POST['userName'];
$password = $_POST['password'];
$sql = "SELECT FirstName, LastName, FamilyID, StudentID, UserID ";
$sql .= "FROM Users ";
$sql .= "WHERE SchoolID = '$schoolID' ";
$sql .= "AND Username = '$userName' ";
$sql .= "AND Password = '$password'";
$rs = mysql_query($sql);
$rows = array();
while($row = mysql_fetch_array($rs, MYSQL_ASSOC))
$row_array['firstName'] = $row['FirstName'];
$row_array['lastName'] = $row['LastName'];
$row_array['familyID'] = $row['FamilyID'];
$row_array['studentID'] = $row['StudentID'];
$row_array['userID'] = $row['UserID'];
array_push($rows, $row_array);
header("Content-type: application/json", true);
echo json_encode(array('rows'=>$rows));
exit;
else
echo "Login Failure";
【问题讨论】:
"将该数据传递给 PHP 文件以通过 jQuery 进行处理" jQuery 在客户端上运行。 PHP 在服务器上运行。他们从不见面。 我在 jQuery 中使用 $.ajax() 函数将 JSON 数据传递给 PHP。对不起,我没有很好地解释它。 我认为的问题可能是您正在发出 2 个请求,第一个请求可能会响应您想要的数据,而您不处理第二个请求的数据不是您的 php 中的条件从未满足,也考虑使用.submit() - tut 也许条件从未满足? 为什么需要进行 2 次 ajax 调用?在这种情况下,为什么只显示 1 个 php 脚本,而不是 2 个? 我不确定它是否正确,但从我收集的内容来看,我必须使用 $.ajax() 来发布序列化数据,然后在成功函数中使用 $.ajax () 来获取 JSON 数据。我有一个偷偷摸摸的怀疑,我在这个假设中是非常错误的。 【参考方案1】:看看你在这里犯了什么错误很简单
$.ajax(
type: 'POST',
url: 'services.php',
cache: false,
data: $('#loginForm').serialize(),
dataType: 'json',
success: function(data)
alert(data);
$('#notification').append(data);
);
);
使用jquery的序列化功能。当你在成功函数中有一个参数时,它不是你在这个指令中的“数据”
data : data,
它是从php端返回的,它是成功返回的新数据。为避免冲突,请使用其他东西,例如 new_data
success: function(new_data)
alert(new_data);
$('#notification').append(new_data);
新数据是json格式,检查一下。如果您使用的是 firefox,请使用 console.log 在 firebug 中查看。
success: function(new_data)
console.log(new_data);
alert(new_data);
$('#notification').append(new_data);
【讨论】:
【参考方案2】:简单的答案:用户错误。我并没有真正理解 getJSON() 函数的概念。它旨在将数据发送到 PHP 脚本,并在成功时处理返回数据。我假设它需要一个函数来发送信息和一个函数来检索信息。
感谢您的所有帮助!
【讨论】:
【参考方案3】:尝试改变:
var data = $("#loginForm :input").serializeArray();
到:
var data = $("#loginForm").serialize();
这应该可以工作,因为我很确定 .ajax 请求中的“数据”应该是一个序列化字符串,serializeArray 返回一个对象数组。
http://api.jquery.com/serialize/
http://api.jquery.com/serializeArray/
编辑 1:
这看起来像是一个事件冒泡问题。请尝试以下操作:
将您的 javascript 更改为:
function processForm(formObj)
var $form = $(formObj);
var data = $form.serializeArray();
var url = $form).attr('action');
$.ajax(
type: 'POST',
url: url,
cache: false,
data: data,
dataType: 'json',
success: function(data)
$('#notification').append(data);
);
return false;
你的表格:
<form id="loginForm" action="services.php" method="post" onsubmit="return processForm(this)">
<div data-role="fieldcontain">
<label for="schoolID">School ID</label>
<input type="text" name="schoolID" id="schoolID" value="" />
<label for="userName">Username</label>
<input type="text" name="userName" id="userName" value="" />
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" />
<h3 id="notification"></h3>
<button data-theme="b" id="submit" type="submit">Submit</button>
<input type="hidden" name="action" value="loginForm" id="action">
</div>
</form>
【讨论】:
我更改了数据变量,但 PHP 脚本仍在发送“登录失败”。即使 PHP error_log 读取 "rows":["firstName":"Zach","lastName":"Alexander","familyID":"0","studentID":"0","userID":" 87585"] @Sharproot - 如果它返回Login Failure
,那么它不应该根据你给我们的php代码查询数据库。 Garry Welding 建议的更改在这里不会产生影响,但它确实比您在其位置使用的代码更有意义且更具可读性。
是的,我同意@Garry Welding 的更改更有意义。这就是为什么我很困惑。所有 PHP 代码都在 if() 语句中,如果设置了 $_POST,我们将比较和编码,如果没有设置,我们会得到“登录失败”。但是通过监控我的 error_logs,我可以看到 PHP 正在处理并从数据库中获取正确的数据......但我们最终仍然会收到“登录失败”。
试试上面 EDIT 1: 中的建议,看起来您首先触发了提交功能上的点击事件,然后因为该按钮是一个提交按钮,您也可以手动提交表单。事件在 DOM 中冒泡。你也可以保持你的代码不变,只使用 event.stopPropagation();停止泡沫。
这也可以解释为什么你会得到错误日志数据,因为 ajax 请求首先触发,然后是警告,因为默认事件(表单提交)接下来触发。这就是为什么我总是使用 onsubmit 而不是将点击处理程序绑定到提交按钮。以上是关于使用 jQuery 从 PHP 文件返回 JSON 数据的主要内容,如果未能解决你的问题,请参考以下文章
使用 PHP json_encode() 和 MySQL 返回一个 JSON 对象以传递给 jQuery 函数 [重复]
使用 jQuery 的 $.ajax( ) 函数从 php 文件中获取 JSON 数据不起作用