使用ajax或jquery在提交时刷新的特定div

时间:2014-06-30 09:23:42

标签: javascript jquery ajax

我想在包含数据库字段的页面上使用特定div来刷新自身,以显示表单提交时的当前条目。包含记录的div称为#new_entry

 <div id="new_entry"></div>
    <script>
    $(document).ready(function(){
        $("#form3").on('submit',function(event){
            event.preventDefault();

            data = $(this).serialize();
            $.ajax({
            type: "POST",
            url: "../calls/insert_call_love.asp",
            data: data
            }).success(function() {

     $("#feedback").append("<div class='messages' style='border:1px purple solid; padding:2px; margin:5px;'>Your have loved this photo </div>");

                setTimeout(function() { 
                    $(".messages").fadeOut(function(){
                        $(".messages").remove();
                    }); 
                }, 1000);

                $("input[type=text]").val("");

            });
        });
    });
    </script>

这是我发布到insert_call_love.asp

的内容
<form action="<%=MM_editAction%>" method="post" name="form3" id="form2">
          <input name="comment" type="text" id="comment" size="50" />
          <input name="imageField3" type="image" id="imageField3" src="../imgs/buttons/comment.png" align="bottom" />
          <input name="wardrobe" type="hidden" id="wardrobe" value="1" />
          <input name="comme" type="hidden" id="comme" value="2" />
          <input name="comfn" type="hidden" id="comfn" value="3" />
          <input name="photo_id" type="hidden" id="photo_id" value="4" />
          <input name="ctype" type="hidden" id="ctype" value="picture" />
          <input name="resp_email" type="hidden" id="resp_email" value="5" />
          <input name="MM_insert" type="hidden" id="MM_insert" value="form2" />
        </form>

2 个答案:

答案 0 :(得分:1)

在您的代码中,您必须向success(function())函数

添加变量
success(function(msg)

** "msg" **将包含您想要从以下网址返回的数据: -

url: "../calls/insert_call_love.asp",

然后您可以将此数据分配给任何div

}).success(function(msg) {
   $('#new_entry').html(msg);
}

注意:变量"msg"将包含您在页面上打印的所有数据"insert_call_love.asp"

答案 1 :(得分:0)

根据您在服务器端使用此帖子所做的操作...您需要查询数据库并检索最新项目,并将其作为JSON发回/回显。

所以在伪代码步骤......

     Process posted variables...
       Query DB for latest entry..
           Echo out as JSON...

然后做一些像......

.success(function(data) {
    $('#new_entry').html(data);