0
这是我第一次使用jquery通过客户端进行验证，并且遇到了.ajaxSubmit函数（我也刚刚使用.ajax）和当点击提交按钮时，数据库被更新，但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>"}
谢谢，我从response.php文件中删除了所有html，但问题仍然存在，请参阅上面的更新。 – nelly 2013-04-22 15:01:14