Question

我有下面的代码用于提交带有ajax的表单，但只有5个评论框中的第一个实例正在提交余额我得到了描述=＆＃34;并插入错误的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>
';

Answer 1

发布的代码并不能说明完整的故事，但查看提到的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>

ajax表单仅将空白描述提交给第一个ID

1 个答案: