从 AJAX 成功中提交 AJAX 表格

Question

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

例如，这会执行 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 中提交。

Answer 1

在 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>

我已经在我的本地主机中进行了检查和验证（通过简单的设置）。它正在发出两个ajax请求。希望这会有所帮助！