jQuery 表单插件 - 有没有办法在 Ajax 成功上加载页面？答案

【问题标题】：jQuery Form plugin - is there a way to load a page on Ajax success?jQuery 表单插件 - 有没有办法在 Ajax 成功上加载页面？
【发布时间】：2011-11-07 04:30:51
【问题描述】：

当用户上传照片时，它会通过控制器 (profile/upload_picture) 上传，该控制器运行文件类型、文件大小等验证。

如果验证返回错误，该错误会通过前端的 Ajax 显示。这行得通。

但如果验证没有返回错误，我想自动加载另一个允许用户裁剪图片的控制器/视图（profile/crop_picture）。

这是否可以通过 Jquery 使用 malsup's Form plugin？

下面的代码在成功后不起作用，我仍然停留在上传页面。

这是我的代码：

jQuery 视图

$("#file_select").change(function(){

        var options = {
        type:           'post',
        dataType:       'json',
        resetForm:      true,
        beforeSubmit:       function(){
                                $('#loading').show();
                                $('#validation_message').html('');
                        },
        success:            function(data){

                                if (data.success == 0) {
                                    $('#loading').hide();
                                    $('#validation_message').html(data.message).fadeIn();

                                } else {
                                    $('body').load('profile/crop_picture');
                                }
                        }
    };

    $('#upload_form').ajaxSubmit(options);
});

上传图片控制器

function upload_picture()
{
    if ($this->input->post('upload')) {

        $upload = $this->profile_model->upload_picture();

        if ($upload) { // if there are upload errors

            $val['success'] = '0';
            $val['message'] = '<div class="error_message" style="margin:20px 0">' . $upload . '</div>';
            echo '<textarea>' . json_encode($val) . '</textarea>'; 
        } else {

                   //redirecting here seems to have no effect

                }
    }

    $data['selector'] = 'picture';
    $data['records']  = $this->profile_model->get_user_data();

    $string = $this->load->view('account/prf/profile_crop_vw', $data, TRUE);
    $this->template->write('content', $string);
    $this->template->render();
}

【问题讨论】：

您能否确认您的成功回调是否运行？听起来它在这两种情况下都运行，因为您说过在出现验证错误时可以看到错误消息。所以真的不归结为“$（'body'）.load（'profile/crop_picture'）;”正在工作中？您可以在该行之前发出警报以确认它运行吗？然后，您还可以添加一个完成的回调来查看您的crop_picture ajax 方法是否有效： $('body').load('profile/crop_picture', function(txt, txtStatus) { alert('Load was executed: ' + txt状态）；}

标签： php javascript jquery ajax codeigniter

【解决方案1】：

你可以在那里尝试javascript窗口加载功能。像这样：

$("#file_select").change(function(){

   var options = {
      type:          'post',
      dataType:      'json',
      resetForm:     true,
      beforeSubmit:  function() {
                        $('#loading').show();
                        $('#validation_message').html('');
                     },
      success:       function(data) {
                        if (data.success == 0) {
                           $('#loading').hide();
                           $('#validation_message').html(data.message).fadeIn();
                        } else {
                           window.location.href='profile/crop_picture';
                           location.reload();   
                        }
                    }
   };

   $('#upload_form').ajaxSubmit(options);

});

希望这能解决您的问题。

【讨论】：

【解决方案2】：

也许你可以做一个简单的重定向到裁剪页面。我看不到您如何处理上传的图片，但您始终可以保存图片 ID 或 url 或您用作会话 flashdata 变量的任何内容，并在裁剪页面上使用它。

【讨论】：

shomz - 如果我在控制器上重定向没有任何反应 - 我认为这是 b/c 图像最初是通过 ajax 提交的，控制器上的任何操作都将通过 Ajax 传回，这不是我们想要的-- 我们想要一个硬重定向（页面刷新），我想知道这是否可以在成功时完成
然后你可以重写crop方法是这样的： function crop_picture($image_id)... 你提供来自ajax的图像id，然后在重定向url中重用它。这有意义吗？
顺便说一句。我的意思是你应该重定向到主控制器/页面，而不是 ajax 页面，当然。