嵌套的Ajax问题.如何调试/解决? [英] Nested Ajax problem. How to debug/solve?
本文介绍了嵌套的Ajax问题.如何调试/解决?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
关于嵌套Ajax问题的很多帖子，但是我不知道是什么我自己错了.
There is a lot of posts about nested Ajax problems, but I can't figure out whats wrong with my own.
我看到的问题是服务器端脚本在嵌套的Ajax调用中没有收到表单值.
The problem I see is that the server side script doesn't receive the form values in the nested Ajax call.
在客户端，我得到result2为空.
On the client side I get that result2 is null.
嵌套的Ajax代码封装在// problem中.
The nested Ajax code is encapsulated with // problem.
谁能看到嵌套Ajax为什么不接收表单值的原因?
Can anyone see why the nested Ajax doesn't receive the form values?
$(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，显示时如下所示:此
Update Here is the HTML, when shown looks like 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>
推荐答案
在问题区域的这一行上
data: $(this).serialize(),
"this"是指对话框本身或可能的ajax
"this" is referring to the dialog itself or possible the ajax
您将要引用您要序列化的特定表格.
you'll want to refer to the specific form you are trying to serialize.
我会将值设置为变量，并将其记录下来以测试/查看发生了什么事情
i would set the value to a variable and log it to test /see what is going on there
所以首先要弄清楚
$(this)
通过运行
alert($(this).prop('id')) // or something similar if your using older jQuery use .attr instead of .prop
编辑 它看起来不像您给表单提供的ID，所以我不确定100％，但是我认为您可以做到这一点
EDIT it doesn't look like you give the form an id so i'm not 100% sure but i think you can do this
$('form').live('submit', function(){
var aform = $(this)
.....
然后在Problam地区
then in the problam area
data: $(aform).serialize(),
这篇关于嵌套的Ajax问题.如何调试/解决?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
