Php ajax提交函数不支持'；t返回响应，但它会更新数据库
这是我第一次使用jquery通过客户端进行验证，我遇到了.ajaxSubmit函数的问题（我也刚刚使用了.ajax），当单击submit按钮时，数据库会更新，但ajax函数不会将结果返回到页面。因此，当我单击submit按钮时，看起来好像什么都没有发生，但当我查看数据库时，字段会用数据更新。另外，当我注释出ajax函数并仅使用警报时，当我单击submit按钮时，警报弹出。如果有人能帮助我，因为我已经为此工作了一个星期了 以下是html和jQuery脚本：Php ajax提交函数不支持'；t返回响应，但它会更新数据库,php,ajax,jquery,jquery-plugins,Php,Ajax,Jquery,Jquery Plugins,这是我第一次使用jquery通过客户端进行验证，我遇到了.ajaxSubmit函数的问题（我也刚刚使用了.ajax），当单击submit按钮时，数据库会更新，但ajax函数不会将结果返回到页面。因此，当我单击submit按钮时，看起来好像什么都没有发生，但当我查看数据库时，字段会用数据更新。另外，当我注释出ajax函数并仅使用警报时，当我单击submit按钮时，警报弹出。如果有人能帮助我，因为我已经为此工作了一个星期了 以下是html和jQuery脚本： <html> <hea
<html>
<head>
<style type="text/css">
<!--
@import "./css/job.css";
-->
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.validate.js"></script>
<script type="text/javascript" src="./js/jquery.form.js"></script>
<script type="text/javascript">
(function($,W,D) {
var JQUERY4U = {};
JQUERY4U.UTIL =
{
setupFormValidation: function() {
//form validation rules
$("#job").validate({
rules: {
jobtype: {
required: true },
account: {
required: true,
minlength: 8 },
phone: {
required: true,
minlength: 7 },
comment: {
required: true,
minlength: 5 },
available: {
required: true,
minlength: 3 }
},
messages: {
jobtype: {
required: "Select a job type" },
account: {
required: "Enter account in correct format" },
phone: {
required: "Enter phone number" },
comment: {
required: "Enter WIP details" },
available: {
required: "Enter an available timeframe" }
},
submitHandler: function(form) {
// alert("Submitting Job");
$(form).ajaxSubmit({
url: 'response.php',
type: 'POST',
data: {
jobtype: $("#jobtype").val(),
account: $("#account").val(),
phone: $("#phone").val(),
comment: $("#comment").val(),
available: $("#available").val(),
},
dataType: 'json',
cache: false,
timeout: 7000,
success: function(data) {
$('form #schedTable').html(data.msg).fadeIn('fast');
}
});
}
});
}
}
//when the dom has loaded setup form validation rules
$(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);
</script>
</head>
<body>
<div id="jobForm">
<form id="job" name="job" action="response.php" method="post" novalidate="novalidate">
<h1>Job Scheduling</h1>
<label>Type</label>
<select id="jobtype" name="jobtype">
<option value="" selected><< SELECT >></option>
<option value="service">Service</option>
<option value="install">Install</option>
</select>
<label>Account</label>
<input type="text" id="account" name="account" maxlength="10" size="10">
<label>Phone</label>
<input type="text" id="phone" name="phone" maxlength="7" size="7">
<label>Comment</label>
<textarea id="comment" name="comment" rows="2" cols="40" maxlength="40"></textarea>
<label>Available</label>
<input type="text" id="available" name="available" maxlength="20" size="20">
<input id="submit" name="submit" type="submit" value="Submit" class="submit">
</form>
</div>
<div id="schedTable"></div>
</body>
</html>
（函数（$，W，D）{
var JQUERY4U={}；
JQUERY4U.UTIL=
{
setupFormValidation:函数（）{
//表单验证规则
$（“#作业”）。验证({
规则：{
工作类型：{
必需：true}，
账户：{
要求：正确，
minlength:8}，
电话：{
要求：正确，
最小长度：7}，
评论：{
要求：正确，
最小长度：5}，
提供：{
要求：正确，
最小长度：3}
},
信息：{
工作类型：{
必需：“选择作业类型”}，
账户：{
必填：“以正确格式输入帐户”}，
电话：{
必填：“输入电话号码”}，
评论：{
必需：“输入WIP详细信息”}，
提供：{
必需：“输入可用的时间范围”}
},
submitHandler:函数（表单）{
//警报（“提交作业”）；
$（表格）.ajaxSubmit({
url:'response.php'，
键入：“POST”，
数据：{
作业类型：$（“#作业类型”）.val（），
账户：$（“#账户”）.val（），
电话：$（“#电话”）.val（），
注释：$（“#注释”）.val（），
可用：$（“#可用”）.val（），
},
数据类型：“json”，
cache:false，
超时：7000，
成功：功能（数据）{
$（'form#schedTable'）.html（data.msg）.fadeIn（'fast'）；
}
});
}
});
}
}
//当dom加载了设置表单验证规则时
$（D）.就绪（函数（$）{
JQUERY4U.UTIL.setupFormValidation（）；
});
})（jQuery、窗口、文档）；
作业调度
类型
挑选
服务
安装
账户
电话
评论
可用
<?php
$mydb connection info here
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Test Form</title>
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<?php
// form inputs
$account = trim($_POST['account']);
$type = $_POST['type'];
$phone = $_POST['phone'];
$comment = trim($_POST['comment']);
$available = trim($_POST['available']);
// Insert into mysql db
$ins = mysql_query(sprintf("INSERT INTO table (type,comment,available,phone,account) VALUES ('%s','%s','%s','%s','%s')", $type,$comment,$available,$phone,$acct)) or die(mysql_error());
$sched = mysql_query(sprintf("SELECT * FROM table ORDER BY type asc"));
$return['msg'] = "
<table border='1'>
<tr>
<th>Type</th>
<th>Account</th>
<th>Comment</th>
</tr>";
while($rowu = mysql_fetch_array($sched)) {
$return['msg'] .= "
<tr>
<td>{$type}</td>
<td>{$acct}</td>
<td>{$comment}</td>
</tr>";
}
$return['msg'] .= "</table>";
// header("Content-Type: text/javascript; charset=utf-8");
// $return['msg'] = "Testing " .$account . "works";
header('Content-Type: application/json');
echo json_encode($return);
?>
</body>
</html>
测试表
去掉php逻辑周围的所有html。这就是问题的原因，响应只需要json，而不是html+json+html
<?php
$mydb connection info here
// form inputs
$account = trim($_POST['account']);
$type = $_POST['type'];
$phone = $_POST['phone'];
$comment = trim($_POST['comment']);
$available = trim($_POST['available']);
// Insert into mysql db
$ins = mysql_query(sprintf("INSERT INTO table (type,comment,available,phone,account) VALUES ('%s','%s','%s','%s','%s')", $type,$comment,$available,$phone,$acct)) or die(mysql_error());
$sched = mysql_query(sprintf("SELECT * FROM table ORDER BY type asc"));
$return['msg'] = "
<table border='1'>
<tr>
<th>Type</th>
<th>Account</th>
<th>Comment</th>
</tr>";
while($rowu = mysql_fetch_array($sched)) {
$return['msg'] .= "
<tr>
<td>{$type}</td>
<td>{$acct}</td>
<td>{$comment}</td>
</tr>";
}
$return['msg'] .= "</table>";
// header("Content-Type: text/javascript; charset=utf-8");
// $return['msg'] = "Testing " .$account . "works";
header('Content-Type: application/json');
echo json_encode($return);
返回无效的JSON可能是因为发出了$return
的未定义数组索引通知msg
，但更可能是因为发出了大量HTML。从本质上讲，这返回：
<some html>JSON<some html>
JSON
这不是有效的JSON，因此jQuery不会调用success
回调。删除所有HTML并只发出JSON。响应现在可以工作了。我将代码更改为以下内容，结果现在显示在我的schedTable div中，无需页面刷新：
submitHandler: function(form) {
var data = $("#job").serialize();
$.ajax({
type: 'POST',
url: 'response.php',
data: data,
cache: false,
success: function(data) {
$('#job')[0].reset();
$('#schedTable').html(data).fadeIn('fast');
}
});
}
然而，现在显示的结果并不完全正确。例如，我通过表单提交了3个作业，只有第三个作业会显示3次，而不是数据库中所有3个作业都显示。我猜，我又回到了绘图板上，寻找这个问题。谢谢你的建议，药丸和穆萨
更新：将while循环更改为json数组方法修复了此问题。现在一切正常。谢谢，我从response.php文件中删除了所有html，但问题仍然存在，请参阅上面的更新。我假设发生数据循环是因为我的php文件中未定义“$return”？谢谢，我从response.php文件中删除了所有html，但问题仍然存在，请参阅上面的更新。
submitHandler: function(form) {
var data = $("#job").serialize();
$.ajax({
type: 'POST',
url: 'response.php',
data: data,
cache: false,
success: function(data) {
$('#job')[0].reset();
$('#schedTable').html(data).fadeIn('fast');
}
});
}