我有下面的代码来用ajax提交表单，但只有5个评论框中的第一个实例被提交以保持平衡。我得到了discraption="并且还被插入了错误的id。这是我的代码和实际示例。我想允许用户对任何项目进行评论
http://way2enjoy.com/app/jokestest-991-1.php
$output .='<div id="'.$idd.'" align="left" class="messagelove_box" ><div class="content_box_1">
<div class="content_box_2z"><sup class="joke_icon"></sup></div>
<div class="content_box_3_title"></div>
<div class="content_box_3_text">'.nl2br($cont).'</div>
<script type="text/javascript">
var ajaxSubmit = function(formEl) {
var url = $(formEl).attr(''action'');
var comment=document.getElementById("jokes_comment").value;
var joke_id=document.getElementById("joke_id_hidden'. $idd.'").value;
$.ajax({
url: url,
data:{
''action'':''addComment'',
''comment'':comment,
''joke_id'':joke_id
},
dataType: ''json'',
type:''POST'',
success: function(result) {
console.log(result);
$.ajax({
url: url,
data:{
''action'':''getLastComment'',
''joke_id'':joke_id
},
dataType: ''json'',
type:''POST'',
success: function(result) {
$(''#jokes_comment'').val("");
console.log(result[0].description);
$("#header ul").append(''<li>''+result[0].description+''</li>'');
},
error: function(){
alert(''failure'');
}
});
},
error: function(){
alert(''failure'');
}
});
return false;
}
</script>
<div id="header" class="content_box_31_text"><ul id="commentlist" class="justList">'.$contpp.'</ul></div>
<form method="post" action="check/process2.php" class="button-1" onSubmit="return ajaxSubmit(this);"><input type="hidden" value="'. $idd.'" id="joke_id_hidden'. $idd.'"><input type="text" id="jokes_comment" value="" name="jokes_comment">
<input type="submit" value="comment"></form>
</div></div>
';
发布的代码没有说明全部情况，但查看提到的URL可以。你发布的片段在页面中一遍又一遍地重复。这意味着ajaxSubmit函数的每个定义都会覆盖前一个定义，并且您有多个输入元素，所有元素都具有相同的id。难怪页面会对该做什么感到困惑。您只需要一个提交函数，如果编写得当，它可以处理所有不同的注释输入。您的注释输入不可能每次都有相同的id，但它们可以有相同的CSS类，由于它们都在表单中，当我们提交特定表单时，我们知道我们正在处理的上下文，jQuery可以自动为我们找到表单中的所有字段，而无需编写代码来单独访问它们。
所以。。考虑到这个设计，像这样定义javascript，并确保它在整个页面输出中只被渲染一次。我稍微重写了一下，以利用jQuery提供的更简单的语法。
$(".comment-form").submit(function(event) {
event.preventDefault(); //prevent the default postback behaviour
var form = $(this);
var jokeID = form.find(".joke_id").val();
$.ajax({
url: form.attr("action"),
type: "POST",
dataType: "json",
data: $(this).serialize(), //automatically finds all the form fields and puts the data in postback-friendly format
success: function(result) {
//I'm not convinced you need this second ajax call - can't you just write the contents of the input box directly into the list? But I'll leave it here in case you want it
$.ajax({
url: form.attr("action"),
type: "POST",
dataType: "json",
data:{
"action":"getLastComment",
"joke_id": jokeID
},
success: function(result) {
form.find(".jokes_comment").val("");
$("#header-" + jokeID + " ul").append("<li>" + result[0].description + "</li>");
},
error: function (jQXHR, textStatus, errorThrown) { //this is the correct definition of the error function as per jQuery docs
alert("An error occurred while contacting the server: " + jQXHR.status + " " + jQXHR.responseText + ".");
}
});
},
error: function (jQXHR, textStatus, errorThrown) { //this is the correct definition of the error function as per jQuery docs
alert("An error occurred while contacting the server: " + jQXHR.status + " " + jQXHR.responseText + ".");
}
});
});
其次，让为每个笑话生成评论标记的PHP看起来像这样：
<div id="header-'.$idd.'" class="content_box_31_text">
<ul id="commentlist" class="justList">'.$contpp.'</ul>
</div>
<form method="post" action="check/process2.php" class="button-1 comment-form">
<input type="hidden" value="'. $idd.'" name="joke_id"/>
<input type="hidden" value="addComment" name="action" />
<input type="text" class="jokes_comment" value="" name="comment" />
<input type="submit" value="comment">
</form>