Colorbox和Ajax，发送和接收数据

Question

我有一个网站，需要查询数据库，在colorbox中查看结果（否则也可以使用引导程序模式），从结果中选择数据，然后将这些选择发送回主页以填充引导程序文本区域。

到目前为止，这就是我所拥有的。

html：表单提交到colorbox

<div class="form-group col-sm-4">
    <button type="button" id="pairsub" class="btn-sm-primary form-control"
     data-toggle="modal" data-target="#pairFind" onclick="submitForm">Pair Find</button>
</div>

colorbox JS：

 $(document).ready(function(){
     $("#pairsub").click(function (){
         $.post("pairfind.php",
              $("#form1").serialize(),
              function(data){
                 $.fn.colorbox({
                 html: data,
                 open: true,
                 iframe: false,
                 width: "500",
                 height: "500px",
                });
              },
             "html");
          });
      });

html textarea接收选定的数据：

<div class="form-group col-md-8">
     <textara class="form-control" name="IID" id="IID2">/textarea>
</div>

提交表单并获取颜色框非常完美。 现在，带有颜色框结果的“提交”按钮将通过php echo将信息发送回去并刷新主页。 我想将选定的数据发送回主页，而无需刷新它。 有想法吗？

Answer 1

所以我放弃了colorbox以及使用纯自举程序的时候。 这段代码就像一个魅力。

$(document).ready(function() {   
       $('#formbtn').click(function(e) {
            $.ajax({
                url: 'pairFind.php',
                type: 'POST',
                data: $('#form1').serialize(),
                async:true,
          beforeSend: function () {
             $('#spin').modal('show');
             }
          success: function(data) {
             $('#pairFr .modal-body').html(data);
             $('#pairFr').modal('show');
             $('#spin').modal('hide');
             }
        });
    });  
});