如何使HTML表单结果仍在jQuery Load()选项卡框中，而不是重定向到操作页面

Question

我将此html表单保存为 file-001.php ：

<form action="file-001.php" method="post" id="select-block" class="general-form">
<input class="clearme" name="Title" value="Title" />
<input type="submit" class="submit-btn" value="SAVE" />
</form>

此表单进程在同一文件上提交变量。但是此文件 file-001.php 实际上由jQuery load调用，位于标签框：

$('a.manage-content-link').click(function (e) {
    var self = $(this),
        file = self.siblings('input[name="block-type"]').val();
    file = file.substring(file.length - 3);
    self.next(".manage-content-wrap").find(".manage-content").load("file-001.php");
    e.preventDefault();
});

但是，当我单击"提交"按钮时，此表格将我重定向到单页，即http://example.com/file-001.php

如何使"动作"在同一选项卡框中仍在附加。未从盒子重定向？

Answer 1

您可以通过ajax

提交表单

由于在您的初始页面加载代码运行时，该表格不存在，请使用on()方法来解释将来的表单。

$(document).on('submit', '#select-block', function() {
    var data = $(this).serialize();
    var actionUrl = $(this).attr('action');
    $.post(actionUrl, data, function(response) {
        /* do something when form submittal completed*/            
    })
    return false; /* prevent browser default submit and redirect*/
});

API参考：

http://api.jquery.com/jquery.post/

http://api.jquery.com/on/

Answer 2

你可以使用ajax实现此目标。

您可以做到的5种方法：

1. load（）：从远程URL加载HTML并将其注入DOM
2. $。getjson（）：从远程位置检索JSON
3. $。getScript（）：从远程位置加载JavaScript
4. $。get（）：获取请求
5. $。post（）：提出邮政请求

示例使用帖子：

//  $.post()  
    $("#post").click(function(){  
        $("#result").html(ajax_load);  
        $.post(  
            loadUrl,  
            {language: "php", version: 5},  
            function(responseText){  
                $("#result").html(responseText);  
            },  
            "html"  
        );  
    });  

示例使用get：

//  $.get()  
    $("#get").click(function(){  
        $("#result").html(ajax_load);  
        $.get(  
            loadUrl,  
            {language: "php", version: 5},  
            function(responseText){  
                $("#result").html(responseText);  
            },  
            "html"  
        );  
    });  

只是使用DIV加载服务器端内容。

" file -001.php实际上是由jQuery load调用，位于标签框" - 在选项卡中使用DIV。