从AJAX Success中提交AJAX表单

时间:2013-07-25 06:09:38

标签: php jquery ajax

我需要在第一个表单成功函数中执行另一个AJAX表单发布。

http://i.imgur.com/rZ2gx6G.jpg

示例,这会执行2个AJAX请求。 搜索电影=>选择电影通缉=>查看特定电影详细信息

我可以将结果加载到div <div id="results"></div>中,但是一旦我选择了一个电影标题,它就不会执行另一个AJAX请求,请求会转到主窗口。

以下是处理结果的初始搜索页。

<script type="text/javascript">
   $(document).ready(function(){
       $("#searchtitle").submit(function() {
           var id = $(this).children('input[name="thetitle"]').attr('value');
           $.ajax({
               type: "POST",
               url: "s.php",
               data: $('#searchtitle').serialize(), 
               cache: false,
               success: function(data){
            $('#status').html(data);
               }
           });
          return false;
      });
   });

</script>

<form id="searchtitle">
   <input type="text" name="thetitle" />
   <input type="submit" name="submit" class="button expand postfix" value="Search" />
</form>
<div id="status"></div>

s.php在#results

中返回结果
<?php
   if(empty($_POST['thetitle'])) {
   ?>
<div class="alert-box error">
   <div class="alert-error"></div>
   Error: Nothing Found
</div>
<?php
   }
   if(!empty($_POST['thetitle'])) {
      $myid = strtoupper($_POST['thetitle']);

      $searchReults = $tmdb_V3->searchMovie($myid,'en');
      ?>
<?php
   foreach($searchReults['results'] as $result) {
   ?>
<form class="sform">
   <input type="hidden" name="mid" value="<?php echo $result['id']); ?>" />
   <h5><?php echo $result['title']; ?></h5>
   <span class="mreleased">Year: <?php echo $result['year']; ?></span>
   <input type="submit" class="button" value="Select">
</form>
<?php
   }
   }
   ?>

这是将发布s.php

结果的代码
<script type="text/javascript">
$(".sform").submit(function () {
    $.ajax({
        type: 'POST',
        url: 'sx.php',
        data: $(this).closest("form").serialize();
        success: function (response) {
            $('#status').load(response);
            $('#status').find('script').each(function (i) {
                eval($(this).text());
            });

        }
    });

    return false;
}  
</script>

我已经尝试将它放在s.php中,在初始搜索页面的底部,在初始页面的头部,没有运气,它提交的很好,而不是sx.php应该在哪里。

1 个答案:

答案 0 :(得分:2)

在s.php中声明:

<input type="hidden" name="mid" value="<?php echo $result['id']); ?>" />

应该是:

<input type="hidden" name="mid" value="<?php echo $result['id']; ?>" /> //remove extra bracket

在s.php的javascript代码中有一些拼写错误:

data: $(this).closest("form").serialize(); // here should be comma not semicolon

return false之后,您应该正确关闭脚本}应为});

由于您尝试提交动态内容$(".sform").submit(function ()将无效。您应该使用on作为动态内容。所以正确的脚本是:

<script type="text/javascript">
 $(document).on('submit', '.sform', function () {
    $.ajax({
        type: 'POST',
        url: 'sx.php',
        data: $(this).closest("form").serialize(),
        success: function (response) {
            $('#status').load(response);
            $('#status').find('script').each(function (i) {
                eval($(this).text());
            });

        }
    });

    return false;
 });  
</script>

我已经在我的localhost中进行了检查和验证(通过简单的设置)。它正在制作ajax请求。希望这有帮助!