Php Ajax 表单在颜色框中提交

Question

我有一个带有一些 php 的表单来验证并在提交时插入到数据库中，并且表单在 colorbox 中打开。

到目前为止一切顺利。我正在尝试做的是关闭颜色框并在成功时刷新 div。

如果一切正常，我想我需要从 php 向 ajax 传递一个响应，使用 setTimeout($.fn.colorbox.close,1000); 之类的东西关闭颜色框。并刷新 div，但我被卡住了，因为我是 ajax 新手。

如果有任何帮助，我将不胜感激。

这是我的 ajax：

jQuery(function(){
 jQuery('.cbox-form').colorbox({maxWidth: '75%', onComplete: function(){
   cbox_submit();

  }});
});


function cbox_submit()
{
  jQuery("#pre-process").submit(function(){
   jQuery.post(
      jQuery(this).attr('action'),
      jQuery(this).serialize(),
      function(data){
       jQuery().colorbox({html: data, onComplete: function(){
          cbox_submit();

        }});
      }
    );
    return false;
  });
}

形成php代码：

    <?php
error_reporting(-1); 
include "conf/config.php";

if(isset($_REQUEST['rid'])){$rid=safe($_REQUEST['rid']);}
if(isset($_REQUEST['pid'])){$pid=safe($_REQUEST['pid']);}
$msg = '';
if (!$_SESSION['rest_id']) $_SESSION['rest_id']=$rid; //change to redirect

$session_id=session_id();


if(isset($_REQUEST['submit'])){

if(isset($_POST['opta'])){
$opta=safe($_POST['opta']);
$extraso = implode(',',array_values( array_filter($_POST['opta']) ));
                    }

if (array_search("", $_POST['opt']) !== false) 
{
$msg = "Please select all accessories!";
}else{

$extrasm = implode(',',array_values( array_filter($_POST['opt']) ));

if ($_POST['opt'] && isset($_POST['opta'])) {$extras= $extrasm .",". $extraso;}
if ($_POST['opt'] && !isset($_POST['opta'])) {$extras= $extrasm;}
if (!$_POST['opt'] && isset($_POST['opta'])) {$extras= $extraso;}

$sql['session_id']  = $session_id;
    $sql['rest_id'] = $_POST['rid'];
    $sql['prod_id'] = $_POST['pid'];
    $sql['extras']  = $extras;
    $sql['added_date']  = Date("Y-m-d H:i:s");
    $newId=insert_sql("cart",$sql);

    }
}
?>

<form id="pre-process" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<div style="background-color:#FFF; padding:20px;">
<?=$msg;?>
  <?php
  $name = getSqlField("SELECT name FROM products WHERE resid=".$_SESSION['rest_id']." and id=".$pid."","name");
  echo "<div style='color:#fff; background-color:#F00;padding:10px;' align='center'><h2>".$name."</h2></div><div style='background-color:#FFF; padding: 20px 70px 30px 70px; '>Please select accessories.<br><br>";
 $getRss = mysql_query("SELECT * FROM optional_groups_product where prodid=".$pid." order by id asc");
    while ($rsrw = @mysql_fetch_array($getRss)) {

  $goptionals = getSqlField("SELECT goptionals FROM optionals_groups WHERE resid=".$_SESSION['rest_id']." and id=".$rsrw['goptid']."","goptionals");

        $goptionals=explode(', ',($goptionals));

echo "<select name='opt[]' id='opt[]' style='width:220px;'>";
echo "<option value='' >Select Options</option>";
    foreach($goptionals as $v)
    {
         $vname = mysql_query("SELECT * FROM optionals where id=".$v." LIMIT 0,1");
         while ($rsgb = @mysql_fetch_array($vname)) {
             $aa=$rsgb['optional'];
         }
             echo "<option value=".$v." >".$aa."</option>";


    }
         echo "</select>(required)<br>";       
    //}
        }
        $getRss = mysql_query("SELECT * FROM optional_product where prodid=".$pid.""); 
        ?>
        <br><br>
        <table border="0" cellpadding="0" cellspacing="0" >
       <tr>
    <td bgcolor="#EAFFEC">
<div style="width:440px; "> 
<?php

while ($rssp = @mysql_fetch_array($getRss)) {
 $optional=getSqlField("SELECT optional FROM optionals WHERE id=".$rssp['optid']."","optional");
 $price=getSqlField("SELECT price FROM optionals WHERE id=".$rssp['optid']."","price");
?>
<div style="width:180px;background-color:#EAFFEC; float:left;padding:10px;""><input type="checkbox" name="opta[]" id="opta[]" value="<?=$rssp['optid']?>"  /> <i><?=$optional?> [<?=CURRENCY?><?=$price?> ]</i> </div>
<?php } ?>
</div>

</td>
 </tr></table>
<input type="hidden" name="rid" value="<?=$rid?>" />
<input type="hidden" name="pid" value="<?=$pid?>"/>
    </div><input type="hidden" name="submit" /><input  id='submit' class="CSSButton"    style="width:120px; float:right;" name='submit' type='submit' value=' Continue ' /><br />

<br /><br />
</div>
</form>

Answer 1

我不知道 colobox，但如果我很了解您要做什么，
我会说你的 javascript 应该更像这样

function cbox_submit()
{
  jQuery("#pre-process").submit(function(e) {
    e.preventDefault(); // prevents the form to reload the page
    jQuery.post(
      jQuery(this).attr('action')
    , jQuery(this).serialize()
    , function(data) {
        if (data['ok']) { // ok variable received in json
          jQuery('#my_colorbox').colorbox.close(); // close the box
        }
      }
    );
    return false;
  });
}

jQuery(function() {
  jQuery('#my_colorbox').colorbox({
    maxWidth: '75%'
  , onComplete: cbox_submit // Bind the submit event when colorbox is loaded
  });
});

您应该至少将执行 post 部分的 php 脚本分开。

如果成功，这个 php（用 jQuery(this).attr('action') 调用）应该返回一个 json ok 变量。示例：

<?php
# ... post part ...
# if success
ob_clean();
header('Content-type: application/json');
echo json_encode(array('ok' => true));
?>