这是我的第一个使用jquery通过客户端进行验证的表单，我遇到了.ajaxSubmit函数的问题（我也只是使用了.ajax），当点击提交按钮时，数据库被更新但是ajax函数不会将结果返回到页面。所以，当我点击提交按钮时，看起来什么也没发生，但是当我查看数据库时，字段会随数据一起更新。此外，当我注释掉ajax函数并只使用警报时，当我点击提交按钮时，警报会弹出。如果有人可以帮助我，因为我已经为此工作了一个星期了。
这是html和jQuery脚本：
<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>
这是response.php代码：
<?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>
更新：我删除了所有的HTML，使用chrome时问题也是一样的。当我使用IE 8并点击提交按钮时，它会要求打开或保存为文本文件（同样重复相同的表单数据）：
{"msg":"<table border='1'><tr>\n <th>Type<\/th>\n <th>Account<\/th>\n <th>Comment<\/th>\n <\/tr><tr>\n <td>other<\/td>\n <td>12345678<\/td>\n <td>sssss<\/td>\n <\/tr><tr>\n <td>other<\/td>\n <td>12345678<\/td>\n <td>sssss<\/td>\n <\/tr><tr>\n <td>other<\/td>\n <td>12345678<\/td>\n <td>sssss<\/td>\n <\/tr><\/table>"}
答案 0 :(得分：1)
删除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);
答案 1 :(得分：1)
由于发出了msg的未定义数组索引$return的通知，可能会返回无效的JSON，但更可能是因为大量HTML的发布。基本上这会返回：
<some html>JSON<some html>
这不是有效的JSON，因此jQuery不会调用success回调。删除HTML的所有并仅发出 JSON。
答案 2 :(得分：0)
响应现在有效。我将我的代码更改为以下内容，结果现在显示在我的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个作业。猜猜，我回到绘图板上寻找这个问题。感谢Explosion Pills和Musa的建议。
更新：将while循环更改为json数组方法可解决此问题。现在一切正常。