如何使用ajax提交表单并在不同的页面上获取响应

时间:2017-05-02 10:14:56

标签: jquery ajax

这是我的表格

<form id="new_type"  action="../control/c_type.php" method="post" class="form-horizontal form-bordered">
                <div class="form-group">
                    <label class="col-md-4 control-label" for="type">Type<span class="text-danger">*</span></label>
                    <div class="col-md-4">
                        <input type="text" id="type" name="type" class="form-control" placeholder="Type..." required="required" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 control-label" for="description">Description</label>
                    <div class="col-md-4">
                        <textarea id="description" name="description" rows="7" class="form-control" placeholder="Description ..."></textarea>
                    </div>
                </div>
            <div class="form-group form-actions">
                <div class="col-md-8 col-md-offset-5">
                    <button type="submit" class="btn btn-effect-ripple btn-primary" name="submit" value="submit">Save</button>
                    <button type="reset" class="btn btn-effect-ripple btn-danger" name="reset" value="reset">Cancel</button>
                </div>
            </div>
            </form>

然后我想使用ajax提交表单并将用户重定向到另一个页面并以模态显示响应。

这是我的剧本

$('#new_type').submit(function() { // catch the form's submit event
$.ajax({ // create an AJAX call...
    data: $(this).serialize(), // get the form data
    type: $(this).attr('method'), // GET or POST
    url: $(this).attr('action'), // the file to call
    success: function(response) { // on success..
        $('#').html(response); // HERE I WANT TO REDIRECT THE USER TO ANOTHER PAGE AND DISPLAY THE RESPONSE IN A MODAL
    }
});
return false; // });

请帮助我

1 个答案:

答案 0 :(得分:0)

你需要在操作url中执行技巧,将所有变量存储在会话中,将用户重定向到另一个页面,然后获取所有数据并显示给用户。只有这样,ajax才能将所有数据传输到另一个页面,你必须使用一些后端技术在会话中存储变量,如果你不想使用服务器端技术,你也可以存储数据本地浏览器存储并在另一个页面中获取变量。

https://developer.mozilla.org/en/docs/Web/API/Window/localStorage https://www.w3schools.com/html/html5_webstorage.asp

感谢。