0
關於嵌套的Ajax問題有很多，但我無法弄清楚我自己有什麼問題。嵌套的Ajax問題。如何調試/解決？
我看到的問題是服務器端腳本沒有收到嵌套的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，當這條線的問題區域
data: $(this).serialize(),
所示的樣子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>
儘量少嵌套:(。將它抽象爲對象和函數。不內聯你所有的匿名函數可以讓事情變得更簡單。 – Raynos 2011-05-18 12:09:51
我們可以看到與此相符的html嗎？ – mcgrailm 2011-05-18 12:30:06
@mcgrailm：當然。還添加了一個截圖。它是我點擊的「創建」按鈕。 – 2011-05-18 12:38:52