javascript - Ajax 调用不起作用？

Question

您好，我正在尝试以 Bootstrap 模式提交表单。该模式将基于 href 单击事件打开。这个 a href 标签将使用 Jquery 在 ajax 调用中动态生成。

a href 标签的格式如下，用于调用 bootstrap 模式。

'<a id="addvideo" data-toggle="modal" data-title="'+field.title+'" data-id="'+field.video_id+'" data-desc="'+field.description+'" data-channelname="'+field.channel_name+'" data-yudate="'+field.created_date+'" href="#form-content">'+field.title+'</a>'

我正在调用的模式如下所示。

                <div id="form-content" class="modal hide fade in" style="display: none;">
                    <div class="modal-header">
                        <a class="close" data-dismiss="modal">×</a>
                        <h3>Add Video</h3>
                    </div>
                    <div class="modal-body">
                        <form name="addvideo" class="form-horizontal" action="#" id="addchannelvideo">
                            <div class="control-group">
                                <label class="control-label" for="videotitle">Title</label>
                                <div class="controls">
                                    <input type="text" id="videotitle" name="videotitle">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="videoid">Video ID</label>
                                <div class="controls">
                                    <input type="text" id="videoid" name="videoid">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="videodesc">Description</label>
                                <div class="controls">
                                    <textarea id="videodesc" name="videodesc"></textarea>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="channelname">Channel</label>
                                <div class="controls">
                                    <input type="text" id="channelname" name="channelname">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="actors">Actors</label>
                                <div class="controls">
                                    <input type="text" id="actors" name="actors">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="directors">Directors</label>
                                <div class="controls">
                                    <input type="text" id="directors" name="directors">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="producers">Producers</label>
                                <div class="controls">
                                    <input type="text" id="producers" name="producers">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="musicians">Music Directors</label>
                                <div class="controls">
                                    <input type="text" id="musicians" name="musicians">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="cast">Cast</label>
                                <div class="controls">
                                    <input type="text" id="cast" name="cast">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="yudate">Youtube Uploaded Date</label>
                                <div class="controls">
                                    <input type="text" id="yudate" name="yudate">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="cudate">CMS Uploaded Date</label>
                                <div class="controls">
                                    <input type="text" id="cudate" name="cudate">
                                </div>
                            </div>
                            <div class="control-group">
                                <div class="controls">
                                    <label class="checkbox">
                                        <input type="checkbox" id="orderno">Priority video
                                    </label>
                                    <label class="checkbox">
                                        <input type="checkbox" id="hidevideo">Hide in Mobile App
                                    </label>
                                    <button class="btn btn-success" id="submit"><i class="icon-white icon-ok"></i> Submit</button>
                                    <button class="btn btn-inverse"><i class="icon-white icon-circle-arrow-left"></i> Cancel</button>
                                </div>
                            </div>
                         </form>
                    </div>
                </div>

现在，要根据点击调用模态，我使用下面的 javascript 代码，并且仅在此代码中，我通过使用 Jquery 在模态中设置文本框值来将数据传递到模态，如下所示。

$(document).on("click", "#addvideo", function () {
 var videoid = $(this).data('id');
 var videotitle = $(this).data('title');
 var videodesc = $(this).data('desc');
 var channelname = $(this).data('channelname');
 var yudate = $(this).data('yudate');

 $(".modal-body #videoid").val( videoid );
 $(".modal-body #videotitle").val( videotitle );
 $(".modal-body #videodesc").val( videodesc );
 $(".modal-body #channelname").val( channelname );
 $(".modal-body #yudate").val( yudate );
  });

Ajax调用函数如下。

$(document).ready(function(e) { 
     $('input#submit').click(function() {
        var title = $('#videotitle').val();
        var videoid = $('#videoid').val();
        var description = $('#videodesc').val();
        var channel = $('#channelname').val();
        var actors = $('#actors').val();
        var directors = $('#directors').val();
        var producers = $('#producers').val();
        var musicians = $('#musicians').val();
        var cast = $('#cast').val();
        var yudate = $('#yudate').val();
        var orderno = 0;
        if($("#orderno").is(':checked'))
        {
            var orderno = 1;
        }
        var hidevideo = 0;
        if($("#hidevideo").is(':checked'))
        {
            var hidevideo = 1;
        }
        var postdata = "title="+title+"&videoid="+videoid+"&description="+description+"&channel="+channel+"&actors="+actors+"&directors="+directors+"&producers="+producers+"&musicians="+musicians+"&cast="+cast+"&orderno="+orderno+"&hidevideo="+hidevideo+"&yudate="+yudate;


        $.ajax({            
            type: 'POST',
            url: 'addvideo.php',
            data: "title="+title+"&videoid="+videoid+"&description="+description+"&channel="+channel+"&actors="+actors+"&directors="+directors+"&producers="+producers+"&musicians="+musicians+"&cast="+cast+"&orderno="+orderno+"&hidevideo="+hidevideo+"&yudate="+yudate,
            datatype:'json',
            success: function(response) {
                $("#form-content").modal('hide');
                alert(response);
            },error: function(){
                alert("video categorization failed");
            }
        });
    });
    });

现在我的模式加载正常，一旦单击 href 标签加载模式，值就会显示在指定的文本框中。但是点击提交后，它会重定向到相同的 php url，并且所有参数都作为查询参数添加，奇怪的是，如果我第二次打开模式并尝试提交 ajax 调用正在工作。

Answer 1

$('input#submit').click(function(e) {
e.preventDefault();//
.....rest of the code here 
});

如果表单元素是动态加载的，则尝试委派点击

$(document).on("click", "#submit", function (e) {
 e.preventDefault();
});