gpt4 book ai didi

javascript - 嵌套 Ajax 问题。如何调试/解决?

转载 作者:行者123 更新时间:2023-12-02 20:17:32 25 4
gpt4 key购买 nike

有很多posts关于嵌套 Ajax 问题,但我无法弄清楚我自己的问题出在哪里。

我看到的问题是服务器端脚本没有接收嵌套 Ajax 调用中的表单值。

在客户端,我得到 result2 为空。

嵌套的Ajax代码用//问题封装。

有人能明白为什么嵌套 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>

最佳答案

在问题区域的这一行

data: $(this).serialize(),

“this”指的是对话框本身或可能是ajax

您需要引用您尝试序列化的特定表单。

我会将值设置为变量并将其记录下来以测试/查看那里发生了什么

所以首先弄清楚什么

 $(this) 

是通过运行

alert($(this).prop('id')) // or something similar if your using older jQuery use .attr instead of .prop

编辑看起来您没有给表单提供 id,所以我不是 100% 确定,但我认为您可以这样做

$('form').live('submit', function(){
var aform = $(this)
.....

然后在问题区域

 data: $(aform).serialize(),

关于javascript - 嵌套 Ajax 问题。如何调试/解决?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6044377/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com