【发布时间】：2011-08-28 00:18:51
【问题描述】：
有很多关于嵌套 Ajax 问题的 posts，但我无法弄清楚我自己的问题。
我看到的问题是服务器端脚本没有收到嵌套 Ajax 调用中的表单值。
在客户端，我知道result2 为空。
嵌套的Ajax代码用// problem封装。
谁能看到为什么嵌套的 Ajax 不接收表单值？
$(document).ready(function(){
$('form').live('submit', function(){
// ...
$.ajax({
type: "GET",
url: "/cgi-bin/ajax_confirm.pl",
contentType: "application/json; charset=utf-8",
dataType: "json",
// async: false,
data: $(this).serialize(),
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('div#create_result').text("responseText: " + XMLHttpRequest.responseText +
", textStatus: " + textStatus +
", errorThrown: " + errorThrown);
$('div#create_result').addClass("error");
alert("Error occured in ajax.js confirm code.");
},
success: function(result){
if (result.error) {
$('div#create_result').text("result.error: " + result.error);
$('div#create_result').addClass("error");
} else { // server side script says everything is okay
var users = $.parseJSON(result.users);
var owners = $.parseJSON(result.owners);
$("#dialog:ui-dialog").dialog("destroy");
$("#dialog-confirm").dialog({
resizable: false,
height: 600,
modal: true,
open: function() {
$(this).children('div.dialog-text').replaceWith("<h3><b>Users</b></h3>" + makeDialogTable(users) + "<h3><b>Owners</b></h3>" + makeDialogTable(owners));
},
buttons: {
Okay: function() {
$(this).dialog("close");
// problem
$.ajax({
type: "GET",
url: "/cgi-bin/ajax.pl",
contentType: "application/json; charset=utf-8",
dataType: "json",
// generate and send parameters to server-side script
data: $(this).serialize(),
// script call was *not* successful
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('div#create_result').text("responseText: " + XMLHttpRequest.responseText + ", textStatus: " + textStatus + ", errorThrown: " + errorThrown);
$('div#create_result').addClass("error");
},
success: function(result2){
if (result2.error) { // script returned error
$('div#create_result').text("result2.error: " + result2.error);
$('div#create_result').addClass("error");
} else { // perl script says everything is okay
$('div#create_result').text("result2.success: " + result.success + ", result2.id: " + result.id);
$('div#create_result').addClass("success");
} //else
} // success
}); // ajax
} else { // if (is_okay) { ...
$('div#create_result').text("Fill out the form to create an activity");
$('div#create_result').addClass("error");
} // else
}, // Okay
// problem
Cancel: function() {
is_okay = 0;
$(this).dialog("close");
}
} // buttons
}); // dialog
} //else
} // success
}); // ajax
// ...
更新 这是 HTML，显示时看起来像 this
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="/ajaxv2.js"></script>
<script src="http://jqueryui.com/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.button.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.draggable.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.position.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.dialog.js"></script>
</head>
<body>
<div class="page-body">
<div class="create-new">
<div id="create_result" style="display:none;">
</div>
<form id="create_form" name="create_form" action="" method="post">
<input name="anchor" id="anchor" value="create" type="hidden">
<label class="new" for="title">Title:</label>
<input class="new" type="text" name="title" id="title" />
<label class="new" for="owner">Owner:</label>
<input class="new" type="text" name="owner" id="owner" /><br class="new"/>
<label class="new" for="users">Users:</label>
<input class="new" type="text" name="users" id="users"/>
<label class="new" for="groups">Groups:</label>
<input class="new" type="text" name="groups" id="groups" /><br class="new"/>
<label class="new" for="begin_date">Begin Date:</label>
<input class="new" type="text" id="from" name="from"/>
<label class="new" for="end_date">End Date:</label>
<input class="new" type="text" id="to" name="to"/><br class="new"/>
<label class="new" for="type">Type:</label>
<input name="ctype" id="ctype" value="individuel" type="radio" /> Individuel <br/>
<input name="ctype" id="ctypee" value="course" type="radio" /> Course <br/>
<button class="n" type="submit">Create</button>
</form>
</div>
<div id="dialog-confirm" title="Can you confirm?" style="display: none;">
<div class="dialog-text">
<p>dialog text goes here</p>
</div>
</div>
<TMPL_INCLUDE NAME="menu.tmpl">
<table class="alerts" cellspacing="0">
<tbody>
<tr class="header">
<th class="activity-header">ID</th>
<th class="activity-header">Title</th>
<th class="activity-header">Owner</th>
<th class="activity-header">Begin Date</th>
<th class="activity-header">End Date</th>
<th class="activity-header">Type</th>
<th class="activity-header"></th>
</tr>
</tbody>
</table>
<TMPL_LOOP NAME=ROW>
<form action="" method="post">
<input name="anchor" value="<TMPL_VAR ID>" type="hidden">
<table class="alerts" cellspacing="0">
<tbody>
<tr>
<td class="activity-data"><TMPL_VAR ID></td>
<td class="activity-data"> <input name="title" id="<TMPL_VAR ID>_title" value="<TMPL_VAR TI>" type="text" /> </td>
<td class="activity-data"> <input name="owner" id="<TMPL_VAR ID>_owner" value="<TMPL_VAR OW>" type="text" /> </td>
<td class="activity-data"> <input name="from" id="<TMPL_VAR ID>_begin_date" value="<TMPL_VAR BD>" type="text" class="datepick" /> </td>
<td class="activity-data"> <input name="to" id="<TMPL_VAR ID>_end_date" value="<TMPL_VAR ED>" type="text" class="datepick" /> </td>
<td class="activity-data"> <input name="ctype" value="individuel" type="radio" <TMPL_VAR IN>/> Individuel <br> <input name="ctype" value="course" type="radio" <TMPL_VAR CO>/> Course </td>
<td class="edit-column"><a href="javascript:showhide('<TMPL_VAR ID>');">Members</a> <input value="Save" type="submit"></td>
</tr>
<tr id="<TMPL_VAR ID>" class="edit-row" style="display: none;">
<td class="activity-data"></td>
<td class="activity-data" colspan="5" align="center">
Users <input name="users" id="<TMPL_VAR ID>_users" size="35" value="<TMPL_VAR US>" type="text" />
Groups <input name="groups" id="<TMPL_VAR ID>_groups" size="35" value="<TMPL_VAR GR>" type="text" />
</td>
<td class="edit-column">
</td>
</tr>
</form>
</TMPL_LOOP>
</div>
</body>
</html>
【问题讨论】：
-
尽量少嵌套:(。将其抽象为对象和函数。不内联所有匿名函数会让事情变得更容易。
-
我们能看到与此相关的 html 吗？
-
@mcgrailm：当然。还添加了截图。这是我点击的“创建”按钮。
标签： javascript jquery ajax