这是我的第一个表单使用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。当我使用ie8并点击提交按钮时，它要求打开或保存为文本文件(重复相同的表单数据多次):
{"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>"}
去掉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，所以jQuery不会调用success回调。删除HTML中的所有，只在JSON中发出
响应现在可以工作了。我将代码更改为以下内容，结果现在显示在我的schedTablediv中，没有页面刷新:
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数组方法修复了此问题。